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!