Newsletter – Issue 011

🔥 Headlines

Douges (opens in a new tab) released TRIPLEX (opens in a new tab), the React Three Fiber editor that saves scene changes back to source. See the introduction video (opens in a new tab) for a demo. TRIPLEX is a standalone server that runs alongside your project and is therefore compatible with any bundler and framework, including Next.js and Remix. Run npx @triplex/run init in a new folder to give it a try! Note that there is also the react-three-editor (opens in a new tab), which is currently a plugin for Vite.

Ambient (opens in a new tab) was released (blog post (opens in a new tab)). It is a multiplayer game engine powered by Rust, WebAssembly, and WebGPU. It features a GPU-driven physically-based-rendering engine, PhysX (opens in a new tab)-powered physics, a React-like UI system, spatial audio with composable filters, platform-independent user input, and more. If you are interested in game development in Rust, check out this website's new 🦀 Rust Game Dev (opens in a new tab) page!

Meta open-sourced Project Flowerbed (opens in a new tab), their WebXR showcase game (repo (opens in a new tab)). They also published a very in-depth article (opens in a new tab) containing many workflow and performance tips useful for any WebGL game. It complements nicely their previous WebXR talk (opens in a new tab) at Meta Connect about Flowerbed. David Heaney (opens in a new tab) wrote an article (opens in a new tab) about how Project Flowerbed and Above Par-adowski (opens in a new tab) prove WebXR can be used for full VR games.

SwissGL (opens in a new tab) (demo (opens in a new tab)) is a minimalistic wrapper on top of the WebGL2 JS API by Alex Mordvintsev (opens in a new tab). It is an early-stage experiment at Google but is not an officially supported Google product at the moment.

🛠 Tools & Updates

• Three.js r150 (opens in a new tab) – Adds mipped bicubic transmission filtering (opens in a new tab) by mrdoob (opens in a new tab) and N8 (opens in a new tab), EXT_texture_avif support by Leon Radley (opens in a new tab), camera view offset in CSS3DRenderer by yomotsu (opens in a new tab) (changelog (opens in a new tab), migration guide (opens in a new tab)).
• Drei v9.57 (opens in a new tab) – Cleaner percent-closer <SoftShadows> (opens in a new tab) by N8 (opens in a new tab) and 0xca0a (opens in a new tab).
• R3F Drei (opens in a new tab) helpers will be made available (opens in a new tab) to vanilla Three.js users via Drei Vanilla (opens in a new tab) by V_Prime (opens in a new tab).
• PlayCanvas (opens in a new tab) – Generate Draco-compressed glTF files in the Editor at import time (blog post (opens in a new tab)).
• Babylon.js v5.48.0 (opens in a new tab)
• mjurczyk (opens in a new tab) created an AI-generated envmaps (opens in a new tab) tool.
• Emil Widlund (opens in a new tab) released Nodl (opens in a new tab), a visual node graphs framework that powers Alma (opens in a new tab).

✍️ Content

• 🎬 How to create animated shaders with Three.js (opens in a new tab) by Wawa Sensei (opens in a new tab)
• 🎬 🎓 Physics of JellyCar: Soft Body Physics Explained (opens in a new tab) by Walaber (opens in a new tab)
• ✍️ Build 3D Scenes Declaratively with TresJS using Vue (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• ✍️ WebGPU Error Handling best practices (opens in a new tab) by Brandon Jones (opens in a new tab)
• ✍️ Performing Lag Compensation in Unreal Engine 5 (opens in a new tab) by Jay Mattis (opens in a new tab)
• ✍️ 5 ways to draw an outline (opens in a new tab) by Alex Ameye (opens in a new tab). You can also try Outline (opens in a new tab) or <Outline> (opens in a new tab).
• ✍️ Creating carved surfaces using Three.js (opens in a new tab) by Charlotte Dann (opens in a new tab)
• ✍️ Building a Phaser 3 Game with bitECS (opens in a new tab) (source (opens in a new tab)) by Yenum (opens in a new tab)
• 🎙 Three.js February Talk (opens in a new tab) with 0xca0a (opens in a new tab) as special guest.

✨ Games & Demos

• 🎮 Peter Talisman: Lord of the Harvest (opens in a new tab) by Ben West (opens in a new tab) and Joseph Pleass (opens in a new tab) – A musical incremental game. 🌾
• 🎮 Bowling R3F (opens in a new tab) by Jorge Rubiano (opens in a new tab) – I managed to get a score of 242, beat me! 🎳
• 🎮 Wooden labyrinth maze (opens in a new tab) by Leon Radley (opens in a new tab) (source (opens in a new tab)) – Might stress you out even more than the real thing. 🕳
• 🎮 Dungeon Quest (opens in a new tab) by rallieon (opens in a new tab) and foundrium (opens in a new tab) – A Pacman-like with a Bomberman twist! 🔥
• 🎮 13 (opens in a new tab) by Elias Ku (opens in a new tab) (originally created for JS13K 2022, article (opens in a new tab), source (opens in a new tab)). Small warning: pixel-art gore 💀
• ✨ Lightformers (opens in a new tab) (env map and lighting demo) by V_Prime (opens in a new tab)
• ✨ The God particle from Dark TV series (opens in a new tab) by Marco Ludovico Perego (opens in a new tab)
• ✨ On-Scroll WebGL Fire (opens in a new tab) by Ksenia Kondrashova (opens in a new tab)
• ✨ Train portfolio (opens in a new tab) by Fikri Emre (opens in a new tab)
• ✨ Scan Wave Shader (opens in a new tab) by BabylonJS (opens in a new tab)
• ✨ Augmented Reality Ball Pit (opens in a new tab) (video) by Ian Curtis (opens in a new tab). Uses 8th Wall (opens in a new tab).

Bonus: PSA - Do not use the Red Cross in your game (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!