Newsletter – Issue 016

🔥 Headlines

In the context of Google IO (web talks (opens in a new tab)), Google presented its support of WebGPU in Chrome with the article Unlocking modern GPU access in the browser (opens in a new tab), the video Introducing WebGPU (opens in a new tab) with Corentin Wallez (opens in a new tab) and Brandon Jones (opens in a new tab), and the Your First WebGPU App (opens in a new tab) codelab.

Brandon Jones was on the Voices of VR podcast Primer on WebGPU (opens in a new tab) with Kent Bye (opens in a new tab), and mcc (opens in a new tab) wrote the excellent I want to talk about WebGPU (opens in a new tab), which is great to learn about the history of WebGPU and graphics APIs.

WebGPU already received performance improvements in Chrome 114 (opens in a new tab), and WebTransport (opens in a new tab) is now enabled by default in Firefox 114 (opens in a new tab).

🏎 Engines & Libraries

• N8AO (opens in a new tab) (repo (opens in a new tab)), an efficient implementation of Screen Space Ambient Occlusion by N8 (opens in a new tab), is out and usable with pmndrs/postprocessing (opens in a new tab) and react-three/postprocessing (opens in a new tab). (demo 1 (opens in a new tab), demo 2 (opens in a new tab), demo 3 (opens in a new tab)).
• Three.js r153 (opens in a new tab) – Includes glTF Anisotropy support (opens in a new tab) for MeshPhysicalMaterial (changelog (opens in a new tab), migration guide (opens in a new tab)).
• Drei v9.70 (opens in a new tab) – Adds SpriteAnimator (opens in a new tab) by netgfx (opens in a new tab), OrbitControls keyEvents prop.
• Ultimate Lens Flare (opens in a new tab) (demo (opens in a new tab)) – Beautiful lens flare effect for R3F by Anderson Mancini (opens in a new tab).
• Floating character controller (opens in a new tab) (repo (opens in a new tab), demo (opens in a new tab)) for R3F + Rapier by Andrew Chen (opens in a new tab).
• Triplex (opens in a new tab), the R3F editor by Douges (opens in a new tab), has new documentation (opens in a new tab), and is now open source (opens in a new tab).
• r3f-project-boilerplate (opens in a new tab) – R3F boilerplate with Typescript, Tailwind and Vite by Brian Breiholz (opens in a new tab).
• TresJS 2.1.0 (opens in a new tab) – now open source (opens in a new tab) – Better types, HMR, OrbitControls. Adds Contact Shadows, Precipitation.
• nuxt-tres-starter (opens in a new tab) (demo (opens in a new tab)) by Francesco Michelini (opens in a new tab).
• PlayCanvas Engine v1.63.0 (opens in a new tab) – Debug render mode API, faster glTF load times, WebGPU enhancements.
• PlayCanvas Editor v1.30.0+ (opens in a new tab) – Some small breaking changes, engine update, draco compression settings.
• Babylon.js v6.6.0 (opens in a new tab)
• Phaser Editor 2D v3.61.0 (opens in a new tab) – Adds Hit-Area tool, enhancements to nested prefabs, and a new variable scope.
• Needle (opens in a new tab) 3.6.x (opens in a new tab) – Adds N8AO support, progressive texture loading for custom shaders, Rapier tree-shaking, draco and meshopt mesh compression, USDZ export fixes and QuickLook on iOS, AR Image Tracking, vertical and horizontal LayoutGroups for Unity. There is also a NextJS on Vercel sample (opens in a new tab) by Marcel Wiessler (opens in a new tab).
• Orillusion (opens in a new tab) – A new JavaScript WebGPU Engine with a component system.
• Wonderland Engine 1.0.0 (opens in a new tab) - Includes a revamped JavaScript architecture (opens in a new tab).
• 🦀 Bevy 0.11 (opens in a new tab) (Rust) now supports WebGPU (video (opens in a new tab)).

🛠 Tools

• Multiplayer framework Colyseus 0.15 (opens in a new tab) by Endel (opens in a new tab) is out and is now fully independent again (opens in a new tab).
• GLSL Exercises Playground (opens in a new tab) by SimonDev (opens in a new tab).
• GDevelop (opens in a new tab), the open-source no-code platform, is going 3D (opens in a new tab) (video (opens in a new tab)).
• compute.toys (opens in a new tab) is a WebGPU shadertoy-like playground by Cornus Ammonis (opens in a new tab) and David A Roberts (opens in a new tab).
• iframed.page (opens in a new tab) – Simple tool to check how your page behaves in an iframe by Jesper the End (opens in a new tab).
• Alma (opens in a new tab), the node-based shader graph editor by Emil Widlund (opens in a new tab) is now open source (opens in a new tab).

🎬 Videos

• Three.js In-Depth Course for All Levels (opens in a new tab) (2 hours) by Chris Courses (opens in a new tab)
• 3D Portfolio with R3F - Avatar animations (opens in a new tab) by Wawa Sensei (opens in a new tab)
• Webflow + R3F + CodeSandbox tutorial (opens in a new tab) (1 hour) by Diego Toda de Oliveira (opens in a new tab)
• Threlte 6 at Svelte Summit (opens in a new tab) by Grischa Erbe (opens in a new tab)
• TresJS v2 First steps (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• Introduction to PlayCanvas (opens in a new tab) by MikeTheTech (opens in a new tab)
• Phaser Turns 10! Massive 3.60 Release (opens in a new tab) by Game From Scratch (opens in a new tab)
• Athena Crisis at Reactathon (opens in a new tab) (DOM-based game) by Christoph Nakazawa (opens in a new tab)
• Platformer Tutorial with KaboomJS (opens in a new tab) by JS Legend (opens in a new tab)
• 🎓 Recreating Counter Strike 2's Smoke Grenades (opens in a new tab) by Acerola (opens in a new tab)
• 🌎 No-Budget DIY Marketing for Indie Games (opens in a new tab) by Michelle Lega (opens in a new tab)
• 🎁 Low-Poly Character Modeling in Blender 3.5 (opens in a new tab) (2 hours) by Imphenzia (opens in a new tab)

✍️ Articles

• Debug – How It's Made (opens in a new tab) (upcoming game) by Trezy (opens in a new tab)
• Phaser Dev Log - May 2023 (opens in a new tab) by Richard Davey (opens in a new tab)
• Explanation of Deferred Rendering (opens in a new tab) by Kylin - JiangWei (opens in a new tab)
• WebXR at the Presence Platform Hackathon (opens in a new tab) by Diarmid Mackenzie (opens in a new tab)
• 🎓 Line Rendering Deep Overview (opens in a new tab) by Panthavma (opens in a new tab)
• 🤖 Modding Age of Empires II with AI (opens in a new tab) by Neilson Koerner-Safrata (opens in a new tab)
• 🎙 Three.js Monthly Talk – May (opens in a new tab) with Anderson Mancini (opens in a new tab), N8 (opens in a new tab), 0beqz (opens in a new tab), and Maxime Heckel (opens in a new tab)

🎮 Games

• The Race (opens in a new tab) by Merci Michel (opens in a new tab) – Use the Konami code to control the car with your phone! 🏎
• I Want It All (opens in a new tab) by Merci Michel (opens in a new tab) – Great-looking Breakout/Arkanoid 🏏
• Dungeon Survivors (opens in a new tab) (source (opens in a new tab)) by Vincent Douchin (opens in a new tab) – Vampire Survivors-like with 2 characters 🧙
• Golf Party (opens in a new tab) by Lucas Jones (opens in a new tab) – Multiplayer golfing game ⛳️
• Kana Game (opens in a new tab) (source (opens in a new tab), video tutorial (opens in a new tab)) by Wawa Sensei (opens in a new tab) – Brush up on your Japanese skills 🇯🇵
• Cybernetic Serenade (opens in a new tab) by Tetra Flora (opens in a new tab) – Vampire Survivors-like synced with the background music 🎵

✨ Demos

• Pixel Engine (opens in a new tab) by x1m4 (opens in a new tab)
• Dynamic heightmap (opens in a new tab) (demo (opens in a new tab)) by VoR (opens in a new tab)
• Top-down controller (opens in a new tab) (demo (opens in a new tab)) by Solar Games (opens in a new tab)
• glTF from Google Earth API (opens in a new tab) by Omar Shehata (opens in a new tab)
• 🤖 NPCs with AI-generated voiced dialogue (opens in a new tab) by jedijosh920 (opens in a new tab)

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