Newsletter โ Issue 008
๐ฅ Headlines
The Khronos WebGL + WebGPU Meetup took place last week. Here are the
slides (opens in a new tab), video (opens in a new tab), and
highlights (opens in a new tab).
My main personal takeaway from the meetup is that Three.js' mrdoob (opens in a new tab) thinks the way forward for writing shaders is node-based solutions that provide a compatibility abstraction layer over WebGL Shader Language (GLSL) and WebGPU Shader Language (WGSL). In Three.js, that would be the NodeMaterial (opens in a new tab), which has a visual editor (opens in a new tab). Three.js is working on aligning with the MaterialX (opens in a new tab) open standard for node-based materials and already has a MaterialXLoader (opens in a new tab). Sunag (opens in a new tab) does the heavy lifting on that front. You can also check out Hendrik Mans (opens in a new tab)' Shader Composer (opens in a new tab), which has React Three Fiber bindings but currently only supports GLSL.
Alvaro Sabu released (opens in a new tab)
TresJS (opens in a new tab), a library to create Three.js scenes declaratively with
Vue (opens in a new tab). Read the Motivation (opens in a new tab) section
to see how it relates to TroisJS (opens in a new tab) and
Lunchbox (opens in a new tab), which are similar Vue wrappers for
Three.js.
Meta released the Immersive Web
Emulator (opens in a new tab) to easily test WebXR
experiences on desktop (Chrome
Store (opens in a new tab)).
๐ Tools & Updates
Three.js (opens in a new tab) only supports instanced skinned meshes for WebGPU (opens in a new tab), not WebGL, so Cody Bennett (opens in a new tab) wrote a user-land port of the unmerged PR (opens in a new tab) for InstancedSkinnedMesh in a CodeSandbox (opens in a new tab).
Editor and code generator (opens in a new tab) for MeshTransmissionMaterial by Alex Warnes (opens in a new tab). Works for R3F and Threlte.
@threlte/gltf (opens in a new tab) is an experimental fork of gltfjsx (opens in a new tab) for Threlte by Grischa Erbe (opens in a new tab) to transform gLTF and GLB files into declarative Threlte components (demo (opens in a new tab)).
Phy (opens in a new tab), 3TH (opens in a new tab)'s game engine to add physics to Three.js, now supports NVIDIA PhysX (opens in a new tab) 5.1 via physx-js-webidl (opens in a new tab) JavaScript / Wasm bindings. See the other new features (opens in a new tab) and live demo (opens in a new tab). 3TH also created Oimo.js (opens in a new tab) and Full IK (opens in a new tab).
PlayCanvas v1.61.0 (opens in a new tab) โ PlayCanvas now supports Microsoft's Volumetric Videos (opens in a new tab). All PlayCanvas builds now include WebGPU support (it was previously only included in debug builds), adding only 9kb (opens in a new tab) to the engine!
Babylon.js v5.45.0 (opens in a new tab)
โ๏ธ Content
- ๐ฌ
React Three Fiber tutorial - Scroll Animations (opens in a new tab) by Wawa Sensei (opens in a new tab)
- ๐ฌ
3D Games in JavaScript??! (opens in a new tab) by Theo - t3.gg (opens in a new tab)
- ๐ฌ
Needle Engine - Quick intro to custom scripting (opens in a new tab) by Marcel Wiessler (opens in a new tab)
- โ๏ธ
How to make your HTML5 Games Awesome! (opens in a new tab) by Paulo Oliveira (opens in a new tab)
- โ๏ธ
Math Breakdown: Anime Homing Missiles (opens in a new tab) by Max! (opens in a new tab)
- โ๏ธ
Shell Shockers' multi-million $ web game success (opens in a new tab) by Jason Kapalka (opens in a new tab) and Simon Carless (opens in a new tab)
- โ๏ธ
Making PuttClub.io - Social WebXR Games in Full Body VR (opens in a new tab) by Josh Field (opens in a new tab)
- โ๏ธ
WebXR Pass-Through on Quest (opens in a new tab) by Timmy Kokke (opens in a new tab)
- โจ
Bruno Simon's Awwwards 3D presentation (opens in a new tab) (video (opens in a new tab) for Awwwards Pro members only)
โจ Games & Demos
- ๐ฎ
A Number From the Ghost (opens in a new tab) by jittercub (opens in a new tab) โ A one-of-a-kind musical experience. ๐ต
- ๐ฎ
Townscaper (opens in a new tab) (80MB) by Oskar Stรฅlberg (opens in a new tab) โ A relaxing city-builder on the ocean. ๐
- โจ
Infinite World (opens in a new tab) by Bruno Simon (opens in a new tab) (source (opens in a new tab)) โ You'll love the super fluffy grass. ๐
- โจ
Some strange rainbow oil bubbles (opens in a new tab) and bubble tea (opens in a new tab) by Maeda Mameo (opens in a new tab). ๐
- โจ
Portal shaders from Shadertoy (opens in a new tab) by Cosmitar (opens in a new tab) โ Check out the 3 presets. ๐
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: