Newsletter โ Issue 024
This is the last issue of 2024! Got any cool game ideas you want to work on during the holidays? ๐ ๐
๐ฅ Headlines
Three.js
r171 has been released, and itโs a major
milestone for WebGPU integration with third-party libraries such as React Three Fiber and bundlers
like Vite or Next.js. We can now just do this with zero configuration:
import * as THREE from 'three'
import { WebGPURenderer } from 'three/webgpu'
const renderer = new WebGPURenderer()import { Canvas } from '@react-three/fiber'
import { WebGPURenderer } from 'three/webgpu'
<Canvas gl={canvas => new WebGPURenderer({ canvas })}>It also works with
Threlte, which supports passing a custom renderer to the canvas, and
Tres support is coming too. In practice, there are some minor gotchas to be aware of. I have set up a repo of test cases with workarounds. React Three Fiber folks who like to live on the bleeding edge can use React 19, R3F 9 RC, Next 15, and even RSCs with Three.js r171, WebGPU, and TSL for cross-renderer shaders. It all works! Now is a great time to jump in and start using WebGPU with Three.js. ๐
The Khronos Group has launched the Slang
Initiative
to oversee and advance the open-source Slang shading language and
compiler originally developed by NVIDIA. Slang has experimental support for WebGPU (not WebGL).
Support for PWAs in the Meta Horizon
Store is coming soon.
The State of JS 2024 results are out!
GSAP has been acquired by
Webflow.
โญ๏ธ Sponsor
Poki is on a mission to create the ultimate online playground โ where players and developers come together to play and create! Together with a growing 400+ game developer community and 90 million players each month, weโre creating a new standard for web games. Interested in working together? Share your game with us!
Web Game Dev! Check out the link in this #showcase post on Discord to get access to our new Playtest feature. This allows you to get free and unlimited playtests of your game with our players! Learn more about Poki in this presentation.
๐ Engines
Three.js r171 โ
Changelog, migration
guide.
Drei Vanilla v1.20.0 โ Adds
meshPortalMaterial.
R3F v9 RC โ Support for
React 19 is coming with R3F v9. See the WIP migration
guide
and these examples.
Drei v9.120.0 โ
MultiMaterial,
FaceControls improvements,
WebcamVideoTexture and
ScreenVideoTexture.
TresJS v4.3.0 โ
UseLoader and
UseTexture as components.
TresJS Post-processing v1 โ
Add post-processing to your TresJS scenes.
PlayCanvas Engine
v2.3.0 and
v2.1.0 โ New 3D Gaussian Splat custom
shader architecture and RenderPass architecture, glTF exporter enhancements.
Phaser v3.87 and v4.0.0 Beta
1 โ Discord Activity
Launcher, Phaser Editor
v4.7.0, Create Game CLI
Update.
PixiJS v8.6.0 โ PixiJS Create
CLI,
ParticleContainer.
Babylon.js โ Make WGSL
materials, particles, post processes, and textures directly with Node
Materials.
Needle launched Needle
Cloud
(thread).
Wonderland Engine 1.2.4
โ The Wonderland Editor is now available on
Flathub.
Construct
r416 โ Linux export option which
supports SteamDeck and ARM architectures like Raspberry Piโs.
Excalibur
v0.30.0 โ Browser extension, new
sample games and templates, GPU particles, and a lot more.
๐ Tools
TypeGPU โ Type-safe abstraction over
WebGPU by Software Mansion.
three-low-poly โ
Procedurally-generated models based on Three.js geometries by Jason
Sturges.
Three Shader Baker โ Bake
your Three.js shaders or materials into textures, by Faraz.- ๐พ Koota ECS state management with React bindings by Kris Baumgarter โ
R3F Starter by Brian Breiholz.
react-three-gpu-pathtracer
โ R3F abstraction of three-gpu-pathtracer by
Faraz and Dennis Smolek.
Broider โ CSS
9-slice generator by Max
Bittker.
9-slicer โ Another CSS 9-slice generator by
Lean Rada.
EZ-tree โ Procedural tree generator by
Dan Greenheck.- ๐ค Trellis (repo) โ AI-generated 3D models from images by Microsoft. Try it on Hugging Face.
You can export Blender Geometry
Nodes as GLTF to Three.js Instanced Mesh.
glTF Tools VS Code
Extension โ Preview and
debug glTF 3D models from Visual Studio Code.-
UltraLoot โ Extendable loot table system by Harry Mustoe-Playfair.
๐ฌ Videos
WebGL & WebGPU Meetup - November
2024 by Khronos
Group
An introduction to Shader Art
Coding by kishimisu
(must-watch!)
Real-Time Painterly Renderer, Van Gogh
Style by
Yusef28
Moving Three.js from WebGL to
WebGPU by mrdoob
New Car - New Portfolio - Devlog
3 by Bruno
Simon
Coding a VR/AR Rhythm Game with R3F
by Wawa Sensei
R3F UI in Next.js
(uikit) by Nabil
Mansour
Mastering the AutoFocus Component in
R3F by Anderson
Mancini
TresJS Presentation at
GlasgowJS by Jaime
Torrealba
Babylon.js and the Quest for Next-Gen Web
Graphics by Gary Hsu
Beginner Series - AR Portal Pt1: WebXR
Introduction by
Babylon.js
Games Made Using Phaser - ShowReel
2024 by
Phaser
Pixi.js
Tutorials by Wael
Yasmina
โ๏ธ Articles
- ๐ Classic 3D videogame shadow techniques by Pekka Vรครคnรคnen
- ๐ Thread about N64 water techniques by Kaze Emanuar
Whatโs Next for WebGPU by
Franรงois Beaufort and Corentin Wallez
How to implement Blender Principled BSDF Materials in
Three.js
by Open Studios
Rune Three.js Tech Demo by Kevin
Glass
Getting to grips with ThreeJS Shading
Language by Nik
Lever
WebXR First
Steps and the
React Three Fiber version by Felix Z
Creating an ASCII Shader Using
OGL by Andrico
Karoulla
Rune Phaser Tech Demo by Kevin
Glass
React Three Fiber Tutorials by Sean
Bradley
Creating Dynamic Terrain Deformation with
R3F
by Oฤuzhan Tรผfenk
Frosted Glass from Games to the Web by
Tyler Wolf Leonhardt
Next-level frosted glass by
Josh Comeau
3D Terrain Renderer with React + the
DOM by Saman Bemel
Benrud
Optimizing the Unity 6 web build
size by Aras
Pranckeviฤius- ๐ฐ Game economy handbook by Alex Wiserax
- Come Build Where the World Plays by Ben Shanken
- How FRVR Scaled and Monetized Krunker Strike on Discord by FRVR (other case studies)
- ๐ Telegram Mini Apps 2.0 by Telegram
How We Made Cannon Clash Load
Fast and Boosted
Conversion
by Leonidas
๐ฎ Games
-
Under the Red Sky by Dedra Games โ 3D parkour game with challenges to complete.
-
CombiMon by ARF Games โ Game in which you farm and evolve monsters.
-
Jump Only by Kimo โ Satisfying puzzle game where you only jump left or right.
-
Path to Glory by Rรฉmi Vansteelandt โ Beat 'em up that won JS13K 2023, originally 13KB.
-
Johnny Trigger by SayGames โ Time your shots perfectly to complete levels.
Netlify: 5 Million Devs by Little
Workshop โ Marble Madness-inspired promotional game.
Carillon by Sven
Frankson โ Crillion-like game made for Revival Jam 2024.
โจ Demos
Roquefort WebGPU Fluid Simulator
(repo) by Jerry Ylilammi
Elden Ring map in low-poly by Jan
Pรกnek-
Shopify: Black Friday Cyber Monday by Shopify
(details thread)
Poimandres Examples
(repo) by Poimandres
Flight of the Dragon by Manoj
Kumar
Zenbox 3 by Zenbox by
Matthew Willox
PS1-style portfolio by Oฤuzhan Tรผfenk
jsd.ski portfolio by Jamaal
Sawyer-Dymski
Liked this issue? ๐ฆ Retweet it, ๐ฆ Repost it on Bluesky, join our Discord, and Subscribe below!