Newsletter – Issue 012

🔥 Headlines

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

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

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

🛠 Tools & Updates

• R3F v8.12.0 (opens in a new tab) – Adds scene render prop to Canvas to pass a custom THREE.Scene.
• PixiJS v7.2.0 (opens in a new tab) – 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 (opens in a new tab)! 🎂
• 🤺 Rapier v0.17.0 (opens in a new tab) (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 (opens in a new tab).
• TresJS v1.8.0 (opens in a new tab) – Adds the possibility to set individual vector props.
• @coconut-xr/koestlich (opens in a new tab) is a WebXR UI library for Three.js with React Three Fiber bindings.
• Babylon.js v5.50.0 (opens in a new tab) – Plus, BabylonJS 6.0 is coming on March 30th (opens in a new tab) with a performance priority mode.
• Construct Animate (opens in a new tab) is a new freemium browser-based animation tool (video (opens in a new tab)) by Construct (opens in a new tab).
• Guillaume Fradin (opens in a new tab) released CAD modeling (opens in a new tab) (demo (opens in a new tab)) capabilities for Three.js with Polygonjs (opens in a new tab). Polygonjs is a procedural node-based WebGL design and animation tool.

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

🎬 Videos

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

✍️ Articles

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

🎮 Games

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

✨ Demos

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

See more on the ✨ Games & Demos (opens in a new tab) page or 🎮 WebGamer.io (opens in a new tab).

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