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!
It takes me ~10 hours to make an issue like this! Please consider โค๏ธ sponsoring my work like these lovely folks: