Newsletter – Issue 008

🔥 Headlines

The Khronos WebGL + WebGPU Meetup took place last week. Here are the slides, video, and highlights.

My main personal takeaway from the meetup is that Three.js’ mrdoob 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, which has a visual editor. Three.js is working on aligning with the MaterialX open standard for node-based materials and already has a MaterialXLoader. Sunag does the heavy lifting on that front. You can also check out Hendrik Mans’ Shader Composer, which has React Three Fiber bindings but currently only supports GLSL.

Alvaro Sabu released TresJS, a library to create Three.js scenes declaratively with Vue. Read the Motivation section to see how it relates to TroisJS and Lunchbox, which are similar Vue wrappers for Three.js.

Meta released the Immersive Web Emulator to easily test WebXR experiences on desktop (Chrome Store).

🛠 Tools & Updates

• Three.js only supports instanced skinned meshes for WebGPU, not WebGL, so Cody Bennett wrote a user-land port of the unmerged PR for InstancedSkinnedMesh in a CodeSandbox.
• Editor and code generator for MeshTransmissionMaterial by Alex Warnes. Works for R3F and Threlte.
• @threlte/gltf is an experimental fork of gltfjsx for Threlte by Grischa Erbe to transform gLTF and GLB files into declarative Threlte components (demo).
• Phy, 3TH’s game engine to add physics to Three.js, now supports NVIDIA PhysX 5.1 via physx-js-webidl JavaScript / Wasm bindings. See the other new features and live demo. 3TH also created Oimo.js and Full IK.
• PlayCanvas v1.61.0 – PlayCanvas now supports Microsoft’s Volumetric Videos. All PlayCanvas builds now include WebGPU support (it was previously only included in debug builds), adding only 9kb to the engine!
• Babylon.js v5.45.0

✍️ Content

• 🎬 React Three Fiber tutorial - Scroll Animations by Wawa Sensei
• 🎬 3D Games in JavaScript??! by Theo - t3.gg
• 🎬 Needle Engine - Quick intro to custom scripting by Marcel Wiessler
• ✍️ How to make your HTML5 Games Awesome! by Paulo Oliveira
• ✍️ Math Breakdown: Anime Homing Missiles by Max!
• ✍️ Shell Shockers’ multi-million $ web game success by Jason Kapalka and Simon Carless
• ✍️ Making PuttClub.io - Social WebXR Games in Full Body VR by Josh Field
• ✍️ WebXR Pass-Through on Quest by Timmy Kokke
• ✨ Bruno Simon’s Awwwards 3D presentation (video for Awwwards Pro members only)

✨ Games & Demos

• 🎮 A Number From the Ghost by jittercub – A one-of-a-kind musical experience. 🎵
• 🎮 Townscaper (80MB) by Oskar Stålberg – A relaxing city-builder on the ocean. 🏗
• ✨ Infinite World by Bruno Simon (source) – You’ll love the super fluffy grass. 🍃
• ✨ Some strange rainbow oil bubbles and bubble tea by Maeda Mameo. 🌈
• ✨ Portal shaders from Shadertoy by Cosmitar – Check out the 3 presets. 🌀

See more on the ✨ Games & Demos page or 🎮 WebGamer.io.

Liked this issue? 🐦 Retweet it, join our Discord, and Subscribe below!