Newsletter – Issue 022

🔥 Headlines

Discord shared their plan for the future and launched their Embedded App SDK for Activities (NPM package). Multiplayer web games can now be played directly within Discord via iframes, with users connected via voice chat. The SDK lets you authenticate players and manage how your game interacts with Discord. Check out the official starter, Hugo Duprez’s starter, and Colyseus’ starter (article).

🍏 Safari 18 beta was announced at Apple’s WWDC developer event. WebXR is no longer behind a feature flag, and immersive-vr sessions and hand tracking are available by default. Even though WebGPU has been available in the Technology Preview since last December, it is unfortunately not part of this release. So, you will have to support WebGL for a while if you support Safari. On the Web Apps (PWAs) front, if a user has your web app installed and clicks a link pointing to your domain from outside their browser (like a link shared on Discord or Slack), it will open in the web app. Unfortunately, there are still no Install Prompts on Safari, so you will have to keep explaining to your users how to install your web app manually.

The Meta Quest Browser now supports WebGPU since version 32.0!

Babylon.js 7.0 is out! Check out the release video. This major version includes a procedural Node Geometry (live editor), Global Illumination, Gaussian Splats, Ragdoll Physics and better WebXR support.

The winners of Gamedev.js Jam 2024 have been announced. The theme was Power.

Athena Crisis by Christoph Nakazawa is now open source and funding contributions! Check out the repo.

🥭 Jamango! web game raises $2.5M – Co-founded by Adam Dalton, Richie Whelan, and Jeremy Klarenbeek, Jamango! is a browser-based multiplayer user-generated content platform. It is currently in closed alpha, but you can check out the homepage to get an idea of what’s coming. I have been working for Jamango! for several months, and this project is truly promising. Remember this name, and keep an eye out for the public release!

⭐️ Sponsor

🏎 Engines

• Three.js r165, r164, and r163 (changelog, migration guide).
• Three.js Shading Language – First draft of the TSL spec, which allows you to write shaders in JavaScript. Check out Bruno Simon’s tweets for examples (portal shader).
• Drei Vanilla v1.16.0 – Cloud, adds screenspace to Outlines.
• Drei v9.106.0 – HLS in useVideoTexture, gainmap, envmap rotation and intensity, ScrollControls prepend.
• @threlte/extras 8.11.0 – Outlines, Text3DGeometry, InstancedSprite, Stars, Mask, ImageMaterial.
• Threlte Studio is the upcoming editor of Threlte. Here is a sneak peek.
• TresJS v4 - On-demand rendering, new useLoop, pointer events with event bubbling, primitives reactive obj and conditional rendering, Better disposal of resources.
• cientos v3.9.0 – Local canvas option for MouseParallax, Fit component, positional audio, LightFormer in Environment, Holographic Material, Ocean component, RoundedBox, mouse/touch props for camera-controls.
• PlayCanvas v1.71.0, 1.70.0, 1.69.0 - Gaussian Splats, WebGPU Compute Shaders, convex hull collisions, dispersion extension support, temporal anti-aliasing (TAA). WebGPU is now supported in the editor.
• Phaser – A ton of ecosystem updates, including an upcoming new renderer, Phaser Compressor, Phaser Editor v4.0.2, Phaser Sandbox v3, Playable Ads Plugin, Discord Multiplayer Tutorial, Phaser Explorer, Create Game CLI.
• A-Frame v1.6.0 – Bug fixes, memory management and performance improvements. Execution order API.
• Wonderland Engine 1.2.0 (and 1.2.1) – Includes post-processing like Bloom and Tonemapping, HDR environment support, improvements to image-based lighting, animation blending, morph targets, and a JavaScript/TypeScript based editor API to write custom tools.
• Needle 3.40.0-exp – Includes automatic LOD generation to improve performance and loading times.
• PixiJS 8.1.0
• 🤺 Rapier 0.20.0
• Defold 1.8.0
• Construct R388 & R395 beta
• Excalibur 0.29.2
• Cocos 3.8.3 – See changelog (scroll down)
• WarmeY2K Engine by Julien Rongiere – PSX-style 3D engine.

🛠 Tools

• glTF progressive – Automatic loading of mesh and texture LODs, by Needle Engine.
• Tree.js procedural tree generator (repo) by Dan Greenheck.
• three-pinata by Dan Greenheck.
• Wiggle Bones by Xavier (Jack).
• 🕹️ Mana Potion (demo) by me – Now with Vue, Svelte, and vanilla JS support.
• HTML23 (demo) live editor for pmndrs/uikit by Bela Bohlender.
• three-fiber-webxr-toolbox (video) by sawa-zen.
• Triplex 67.4 and an upcoming VS Code extension. Get in touch with Douges to try it.
• tres-fps-controls by Jaime Torrealba.
• 🎾 Jolt Physics v5.0.0 by Jorrit Rouwe – See the list of new features.
• glTF-Transform v4 by Don McCurdy – Performance improvements, new APIs for moving resources (materials, meshes, animations) between models, KHR_materials_dispersion and KHR_materials_diffuse_transmission.
• GLB UV Inspector by Simon Harris – Quickly look at the UV’s of a GLB.
• Model Viewer 4.10.0 by PlayCanvas – New camera controls. See changelog.
• 🎨 Khronos PBR Neutral Tone Mapper – True-to-Life Color Rendering with Three.js and Babylon.js support.
• Arwes Futuristic Sci-Fi UI Web Framework by Romel Pérez.
• 🎁 Crocotile 3D by Alex HW – Tile-based 3D modeling tool for low-poly pixel art.
• 🎁 Smooth Voxels 2.3.0 – Three.js and A-Frame support, save animations from the Playground, new shapes.
• Colyseus 0.15.17 – Improves how stale rooms are cleared when using multiple processes.
• 📡 PartyKit by Sunil Pai is joining Cloudflare.
• 📡 LootLocker – Game backend platform.
• 📡 Open Game Backend by Rivet.
• 📡 Edgegap – Game server hosting.
• 📡 SpacetimeDB (repo) – Database with custom logic support for multiplayer games.
• 💰 1D3 – Merchant of record and monetization.
• 💰 Sanlo – Merchant of record and monetization.

🎬 Videos

• WebGL + WebGPU Meetup - March 2024 by Khronos Group
• 🎓 Lerp smoothing is broken by Freya Holmér
• 🎓 How do Video Game Graphics Work? by Branch Education
• Zelda Wind Waker in the browser by RobinPayot
• Three.js Raycasting Tutorial for Beginners by Dan Greenheck
• Make Any 3D Model Explode, with R3F and Next 14 by developedbyed
• Make a Fall Guys Clone for Discord Activity by Wawa Sensei
• Coastal World Aesthetics by Wawa Sensei
• Loading 3D Models with Threlte by Zoetrope Studios
• Revolutionizing Game Development (transcript) with Will Eastcott from PlayCanvas
• Blender, Unity, WebXR in Blender, WebXR in Unity mini tutorials for Needle Engine
• Community Reel 2023 by Wonderland Engine
• Build a Virtual World Filled with Self-Driving Cars (with no libraries!) by Radu Mariescu-Istodor
• JavaScript Adventure Platformer Game Tutorial by JS Legend
• How to Make a Video Game - Godot Beginner Tutorial by Brackeys
• 🎙️ 3D web game dev jam! with Brian Breiholz on the JS Party podcast

✍️ Articles

• What’s New in WebGPU (Chrome 126) by François Beaufort
• 🎓 Choosing texture formats for WebGL and WebGPU applications by Don McCurdy
• 🎓 Morphing and Vertex Animation Techniques by Luiz Otavio Vasconcelos
• 🎓 Voxel Displacement Renderer (video) by Daniel Schroeder
• Moebius-style post-processing by Maxime Heckel
• Rendering User Interfaces on the GPU by Bela Bohlender
• Building Your First Browser Game with Three.js and React by Romain Herault
• Transparently supporting both WebGL and WebGPU by Deltakosh
• Introduction to Babylon.js by Jan Kaiser
• Prefab Instancing in Wonderland Engine 1.2.0 by David Peicho
• Combining Pixi-React and HTML with Tunnels by Jallen
• Wave Function Collapse, Pathfinding, and NPC AI planning with GOAP by Justin Young
• Choosing your web game engine by Poki
• Optimizing Javascript for fun and for profit by Rom Grk
• Garbage Collection in V8 by Roman Maksimov
• 🎾 2D Rigid Body Collision Resolution by Kai Sassnowski
• 📡 Matchmaking Series: Ping (in Call of Duty) by Activision
• Unity sees WebGPU as a growing market by Bryant Francis

🎮 Games

• Simply Prop Hunt by Elanra Studios – Hide-and-seek game in which you play as a Hunter or a Prop.
• Under the Red Sky by Federico Calchera & Dedra Games – First-person 3D parkour game.
• Blumgi Soccer by Blumgi – Shoot the soccer ball into the goal across various worlds.
• Stunt Car Extreme by Hyperkani – Time trial driving game with stunts and jumps.
• Ragdoll Hit by Ericetto – Control a ragdoll stickman to defeat all kinds of enemies.
• CaptainForever.io by Farbs – Multiplayer game in which you build and fly a wireframe ship in space.
• Chroma by Logix Indie – Link 4 or more shapes of the same color.
• Shift by Logix Indie – Recreate a pattern by moving the rows of a hexagonal grid.
• Eggsolotl by Axol Studio – Retro match-3 puzzle game in which you kick, lift, and throw eggs.
• Monster Match by Axol Studio – Retro match-3 game in which you play as a lich defending its realm.

• Food for Fish (source) by Kris Temmerman – Great-looking point-and-click adventure about underpants.

• Equinox by Little Workshop – An impressive 1st-person adventure in a spaceship. You’ve got to try this one!

• Fabled Recipes (repo) – by Vincent Douchin

• Marble Run Simulator by Tiaratum Games – A marble machine construction game with great physics.

• Pixaland by Giorgi Nadiradze – A multiplayer sandbox game with a pixel art style.

• Eternya Tactics by Kainage Productions – Turb-based fantasy tactical RPG.

✨ Demos

• Stylized Castle WebGL demo (article, repo) by Oleksandr Popov
• Sunday Afternoon (repo) by Faraz
• BatchedMesh Instancing (demo) by Garrett Johnson
• Depth peeling transparency (demo) by Garrett Johnson
• R3F Camera animated along a curved path (source) by Michael Dobekidis
• Car Physics mini-game (source) by Kryštof Toman

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