Newsletter โ Issue 011
๐ฅ Headlines
Douges released
TRIPLEX, the React Three Fiber editor that saves
scene changes back to source. See the introduction
video 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, which is
currently a plugin for Vite.
Ambient was released (blog post). It is a multiplayer game engine powered by Rust, WebAssembly, and WebGPU. It features a GPU-driven physically-based-rendering engine, PhysX-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 page!
Meta open-sourced Project
Flowerbed, their WebXR showcase game
(repo). They also published a very in-depth
article containing many
workflow and performance tips useful for any WebGL game. It complements nicely their previous
WebXR talk at Meta Connect about
Flowerbed. David Heaney wrote an
article about how
Project Flowerbed and Above Par-adowski prove WebXR can be used for
full VR games.
SwissGL (demo) is a minimalistic wrapper on top of the WebGL2 JS API by Alex Mordvintsev. It is an early-stage experiment at Google but is not an officially supported Google product at the moment.
๐ Tools & Updates
- Three.js r150 โ Adds mipped
bicubic transmission filtering by
mrdoob and N8, EXT_texture_avif support by
Leon Radley, camera view offset in CSS3DRenderer by
yomotsu
(changelog, migration
guide).
- Drei v9.57 โ Cleaner percent-closer
<SoftShadows> by
N8 and 0xca0a.
- R3F Drei helpers will be made
available to vanilla Three.js
users via Drei Vanilla by
V_Prime.
PlayCanvas โ Generate Draco-compressed glTF
files in the Editor at import time (blog
post).
Babylon.js v5.48.0- mjurczyk created an AI-generated envmaps tool.
- Emil Widlund released Nodl, a visual node graphs framework that powers Alma.
โ๏ธ Content
- ๐ฌ How to create animated shaders with Three.js by Wawa Sensei
- ๐ฌ ๐ Physics of JellyCar: Soft Body Physics Explained by Walaber
- โ๏ธ
Build 3D Scenes Declaratively with TresJS using Vue by Alvaro Sabu - โ๏ธ
WebGPU Error Handling best practices by Brandon Jones - โ๏ธ
Performing Lag Compensation in Unreal Engine 5 by Jay Mattis - โ๏ธ
5 ways to draw an outline by Alex Ameye. You can also try Outline or <Outline>. - โ๏ธ Creating carved surfaces using Three.js by Charlotte Dann
- โ๏ธ
Building a Phaser 3 Game with bitECS (source) by Yenum - ๐ Three.js February Talk with 0xca0a as special guest.
โจ Games & Demos
- ๐ฎ Peter Talisman: Lord of the Harvest by Ben West and Joseph Pleass โ A musical incremental game. ๐พ
- ๐ฎ Bowling R3F by Jorge Rubiano โ I managed to get a score of 242, beat me! ๐ณ
- ๐ฎ
Wooden labyrinth maze by Leon Radley (source) โ Might stress you out even more than the real thing. ๐ณ - ๐ฎ
Dungeon Quest by rallieon and foundrium โ A Pacman-like with a Bomberman twist! ๐ฅ - ๐ฎ
13 by Elias Ku (originally created for JS13K 2022, article, source). Small warning: pixel-art gore ๐ - โจ Lightformers (env map and lighting demo) by V_Prime
- โจ The God particle from Dark TV series by Marco Ludovico Perego
- โจ On-Scroll WebGL Fire by Ksenia Kondrashova
- โจ Train portfolio by Fikri Emre
- โจ Scan Wave Shader by BabylonJS
- โจ Augmented Reality Ball Pit (video) by Ian Curtis. Uses 8th Wall.
Bonus: PSA - Do not use the Red Cross in your game
See more on the โจ Games & Demos page or ๐ฎ WebGamer.io.
Liked this issue? ๐ฆ Retweet it, join our Discord, and Subscribe below!