Newsletter – Issue 012

🔥 Headlines

0beqz released his highly-anticipated postprocessing library for Three.js, Realism Effects (repo, demo). The effects include SSGI (Screen-Space Global Illumination), motion blur, and TRAA (Temporal Reprojection Anti-Aliasing). react-postprocessing integration should be coming soon.

Self-service publishing is now available for the Epic Games Store (more details). There is a $100 submission fee per game, and you can get an IARC rating usable in other stores. Here is a video walkthrough by Epic.

Cody Bennett published preact-reconcilier. It implements react-reconciler, which allows custom renderers to be shared between Preact and React. The reconciler makes it possible to use the React Three Fiber ecosystem including Drei with Preact and Preact Signals.

🛠 Tools & Updates

• R3F v8.12.0 – Adds scene render prop to Canvas to pass a custom THREE.Scene.
• PixiJS v7.2.0 – Adds HTMLText to core, a standardized Color class, Event Modes, Global Move Events. @pixi/node was moved out of the main repo, and peerDependencies are back. PixiJS is 10 years old! 🎂
• 🤺 Rapier v0.17.0 (15 Jan. 2023) – Adds DynamicRayCastVehicleController, enabling and disabling rigid bodies, colliders, or joints, without having to delete them and character controller fixes. Objectives for 2023.
• TresJS v1.8.0 – Adds the possibility to set individual vector props.
• @coconut-xr/koestlich is a WebXR UI library for Three.js with React Three Fiber bindings.
• Babylon.js v5.50.0 – Plus, BabylonJS 6.0 is coming on March 30th with a performance priority mode.
• Construct Animate is a new freemium browser-based animation tool (video) by Construct.
• Guillaume Fradin released CAD modeling (demo) capabilities for Three.js with Polygonjs. Polygonjs is a procedural node-based WebGL design and animation tool.

Some native news: Godot 4.0 is out (video), and 🦀 Bevy, the Rust ECS game engine hit version 0.10.

🎬 Videos

• R3F react-spring animations by Wawa Sensei
• R3F Ankou scene with custom loading screen by Wawa Sensei
• Fighting game tutorial with Kaboom.js by JS Legend
• 📐 Basics of trig + how your computer computes sine by SimonDev
• WebGPU for Beginners: A Crash Course in WGSL by GetIntoGameDev
• WebXR panel in WebXR: Developing for WebXR by jin, with msub2, codefrau, SrileXR and svox

✍️ Articles

• Beautiful and mind-bending effects with WebGL Render Targets by Maxime Heckel
• Stylized Water Shader by Alexander Ameye
• WebGL Shadow Maps (2 parts) by Rob Louie
• All JavaScript and TypeScript Features of the last 3 years by Linus Schlumberger
• Celebrating the Immersive Web in 2023 by Matt Cool
• The 2023 Polys WebXR Awards Recap by Jon Jaehnig
• Unlocking the Power of UV Manipulation by Jason Carter

🎮 Games

• Danger Crew (video) by Drew Conley and Glenn LaBarre – DOM-based Pokémon-like made in React 💻
• Dinogen Online by Wilkin Games – 2D multiplayer top-down shooter. Play as human or dinosaur! 🦖
• Jamir by Mert Öztürk – v2.0.0 update of the multiplayer Three.js FPS 🧑‍🚀
• Earth’s Greatest Defender (article) by Rémi Vansteelandt – Repel the alien invasion! 👾
• Wolfenstein 3D (repo) by midzer (Emscripten port) and fabiangreffrath (original SDL port) 🔫

✨ Demos

• MeshTranslucentMaterial (tweet) by N8
• Volumetric spotlights (video) by V_Prime for Drei vanilla.
• SKYBX (video) by Felix Zhang. Uses BlockadeLabs AI-generated skyboxes.
• Car game and mecha game video demos by Mark Linington, made in Spline.
• Procedural GLSL sea in a tweet (live demo) by yonatan
• Spaceship portfolio by Arthur Engel

See more on the ✨ Games & Demos page or 🎮 WebGamer.io.

Liked this issue? 🐦 Retweet it, join our Discord, and Subscribe below!