Newsletter – Issue 018

🔥 Headlines

You may have heard that Unity is trying to introduce a Runtime Fee (opens in a new tab) based on installs for games that earned more than $200,000 in the past 12 months and have at least 200,000 lifetime installs. This also affects games that have already been released. To the surprise of no one except the genius executives who came up with this idea, the community is not happy. Unity received a ton of backlash and has already backpedaled on some of the new rules. Web games, for instance, are now exempt from this fee. They will soon announce their revised pricing.

This fiasco has led to a surge of interest in Godot (opens in a new tab), but if you have Unity refugee friends looking for new engines, send them over to 🌐 Web Game Engines & Libraries (opens in a new tab)! In particular, PlayCanvas (opens in a new tab), Rogue Engine (opens in a new tab) (editor for Three.js), Babylon.js (opens in a new tab), Needle Engine (opens in a new tab), and Cocos (opens in a new tab) may fulfill their needs.

In other news, WebGameDev.com (yes, this website) is now open source (opens in a new tab)! It is built with Nextra (opens in a new tab), so it's a mix of Markdown and React. Let me know on Discord (opens in a new tab) (@verekia) or Twitter (opens in a new tab) if you would like to contribute!

💼 Jobs (sponsored)

• Novablocks (opens in a new tab) is a browser-native gaming platform that enables teenagers to create and play user-generated games instantly. Having recently closed funding, they’re looking to recruit a world-class team to join them:
• Gameplay Engineer (Three.js/JS) (opens in a new tab) - As a gameplay engineer, you will design and build engaging game mechanics that will be used by creators and players.
• Game Engine Developer (JS) (opens in a new tab) - As a game engine developer, you will build and optimise engine systems that will be used by other developers and creators in our platform.

🏎 Engines & Libraries

• Three.js r156 (opens in a new tab) – See the changelog (opens in a new tab) and migration guide (opens in a new tab).
• R3F v8.14 (opens in a new tab) – Fixes and React Native experiments.
• Drei v9.84 (opens in a new tab) – MotionPathControls (opens in a new tab), Outlines (opens in a new tab), plane support for SpriteAnimator (opens in a new tab).
• TresJS 3.1.0 (opens in a new tab) – Vue Devtools are back, re-instancing of Three objects.
• TresJS Cientos 3.2.0 (opens in a new tab) – Adds MeshGlassMaterial (opens in a new tab), useVideoTexture (opens in a new tab), CameraControls (opens in a new tab).
• Threlte 6 is out! (opens in a new tab) And they are organizing a hackathon (opens in a new tab) starting on October 15th.
• Phaser 3.61.0 Beta 2 (opens in a new tab) – See the changelog (opens in a new tab) and announcement (opens in a new tab).
• PixiJS 7.3.0 (opens in a new tab) – See the changelog (opens in a new tab). There was also a 🎙 Pixi AMA (opens in a new tab) that covers Pixi v8, among other things.
• Babylon.js v6.21.1 (opens in a new tab) – See the changelog (opens in a new tab).
• Excalibur.js v0.28.0 (opens in a new tab) (video (opens in a new tab)) by Erik Onarheim (opens in a new tab) – Arbitrary raycasting, text wrapping, custom shaders per actor, post-processing improvements, Aseprite (opens in a new tab) plugin native file support, input mapping, and more.

🛠 Tools

• MeshParallaxMaterial (opens in a new tab) (demo (opens in a new tab), source (opens in a new tab)) by Marcin J (opens in a new tab). Here is a BabylonJS equivalent (opens in a new tab) by Mirkowo (opens in a new tab).
• Natuerlich (opens in a new tab) (repo (opens in a new tab)) by coconut-xr (opens in a new tab) – WebXR interactions library with React Three Fiber bindings.
• Triplex 0.57.0 (opens in a new tab) – Edit any child element, filter components, elements, and props, custom provider support.
• R3F + Rapier Character Controller (opens in a new tab) updates by Andrew Chen (opens in a new tab).
• use-spritesheet (opens in a new tab) by Ben Follington (opens in a new tab) – 2D sprite animation helpers with Aseprite (opens in a new tab) support.
• Confetti (opens in a new tab) (demo (opens in a new tab), source (opens in a new tab)) by Anderson Mancini (opens in a new tab) – Easily add confetti explosions to your scene.
• TresLeches (opens in a new tab) – GUI control panel for Vue (and TresJS) by Alvaro Sabu (opens in a new tab).
• vue-tres-starter (opens in a new tab) (repo (opens in a new tab), demo (opens in a new tab)) – TresJS starter kit by Francesco Michelini (opens in a new tab).
• Shaderfrog 2.0 (opens in a new tab) by Andrew Ray (opens in a new tab) – A hybrid GLSL shader graph/code editor with support (opens in a new tab) for Three.js, Babylon.js, and PlayCanvas. A JavaScript API (opens in a new tab) is being worked on.
• glTF-Compressor (opens in a new tab) (article (opens in a new tab)) by Khronos (opens in a new tab) – Optimize performance and the memory used by your models.
• 🤖 recast-navigation-js (opens in a new tab) by Isaac Mason (opens in a new tab) was rewritten to expose more of the underlying Recast and Detour (opens in a new tab) libraries while still offering a high-level API. Check out the online navmesh generator (opens in a new tab).
• 🏃 Ready Player Me Animation Library (opens in a new tab) (repo (opens in a new tab)) – Use only allowed with Ready Player Me (opens in a new tab) avatars.

🎬 Videos

• WebGPU - Rendering the future in Real-Time (opens in a new tab) by Visionary 3D (opens in a new tab)
• A proper look at WebGPU for native games (opens in a new tab) by Madrigal (opens in a new tab)
• A Closer Look at 3D Rendering (opens in a new tab) talk at CityJS Belgrade (opens in a new tab) (slides (opens in a new tab)) by Maya Nedeljković Batić (opens in a new tab)
• WebGL Tutorial - Hello, Triangle! (opens in a new tab) by Indigo Code (opens in a new tab)
• glTF: Transforming 3D Asset Delivery (opens in a new tab) at SIGGRAPH 2023 (opens in a new tab) by Khronos (opens in a new tab)
• Water Reflection using Three.js (opens in a new tab) (tutorial series) by Robin Payot (opens in a new tab)
• How to Create a Multiplayer Game with Three.js and Blender (opens in a new tab) by Pandawoan (opens in a new tab)
• Sims-like Multiplayer Game with R3F and Socket.io (opens in a new tab) (tutorial series) by Wawa Sensei (opens in a new tab)
• Build an Airplane Flying Game with R3F (opens in a new tab) by Irradiance (opens in a new tab)
• TresJS Materials (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• How to add 3D to Astro using TresJS (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• Make A 3D GitHub Skyline With Threlte (opens in a new tab) by Joy of Code (opens in a new tab)
• Creating Casual Game with PlayCanvas (opens in a new tab) by Cem Demir (opens in a new tab)
• Babylon Chronicles podcast (opens in a new tab) by BabylonJS (opens in a new tab)
• Introducing Node Geometry (opens in a new tab) by Deltakosh (opens in a new tab)
• Babylon Journey: A Series On Babylon.js (opens in a new tab) by Gabriel Baker (opens in a new tab)
• From a new Unity project to Live Sync with Three.js (opens in a new tab) by Needle Engine (opens in a new tab)
• Online Multiplayer JavaScript Game Tutorial (opens in a new tab) (6 hours, uses socket.io (opens in a new tab), no engine) by Chris Courses (opens in a new tab)
• JavaScript Platformer Tutorial with Kaboom.js (opens in a new tab) (7 hours) by JS Legend (opens in a new tab)
• 🗺 Athena Crisis Map and Campaign Editor (opens in a new tab) by Christoph Nakazawa (opens in a new tab)
• 📐 I Tried Simulating The Entire Ocean (opens in a new tab) by Acerola (opens in a new tab) (congrats on 100K subs!)
• 🎁 Get Good at Blender – Practical challenges (opens in a new tab) by Grant Abbitt (opens in a new tab)

✍️ Articles

• What's New in WebGPU (Chrome 117) (opens in a new tab) and Chrome 116 (opens in a new tab)
• Painting with Math: A Gentle Study of Raymarching (opens in a new tab) by Maxime Heckel (opens in a new tab)
• R3F: The Ultimate Guide to 3D Web Development (opens in a new tab) (paid course) by Wawa Sensei (opens in a new tab)
• Normalized 3D cursor and focal-point depth of field (opens in a new tab) by 0xca0a (opens in a new tab)
• WebXR is the future of VR (opens in a new tab) by kayh (opens in a new tab)
• Drawing points with Babylon.js... (opens in a new tab) by Popov (opens in a new tab)
• Babylon.js: A Cross-Platform Web-First Game Engine (opens in a new tab) by Jason Carter (opens in a new tab)
• Backward Compatibility in Babylon.js (opens in a new tab) by Raanan Weber (opens in a new tab)
• 📈 BLUMGI: Reaching 100M players in 2 years as an indie dev (opens in a new tab) by Loïc (opens in a new tab)
• 🤖 Using a RNN for 2D Tile Map Synthesis (opens in a new tab) by John "Lin" (opens in a new tab)
• 🎙 Experience of creating JavaScript Games (opens in a new tab) podcast by JS GameDev Summit (opens in a new tab)

🎮 Games

• Atomize (opens in a new tab) by Peter Adams (opens in a new tab) – New musical experience from A Number From the Ghost (opens in a new tab) 🎵
• Slash Saber (opens in a new tab) (source (opens in a new tab)) (video (opens in a new tab)) by Jan Pánek (opens in a new tab) – Slash bamboos to progress! (aim far ahead) 🥷
• The Aviator (opens in a new tab) (source (opens in a new tab)) by enpitsulin (opens in a new tab) – The first TresJS (opens in a new tab) game based on Karim Maaloul (opens in a new tab)'s tutorial (opens in a new tab) 🛫
• Arcane Archer (opens in a new tab) by OnRush Studio (opens in a new tab) – Action-RPG with very polished gameplay and graphics 🏹
• Village Craft (opens in a new tab) by Alex So (opens in a new tab) – Collect resources and build your village 🪓
• WipEout (opens in a new tab) by Dominic Szablewski (opens in a new tab) (article (opens in a new tab)) – Complete rewrite from leaked PSX code 🚀
• Elysian (opens in a new tab) (video (opens in a new tab)) by Felix Z (opens in a new tab) – Multiplayer VR shooting game 🔫

The games that won React Jam (opens in a new tab) (best game category) are:

• Keep the hype UP! (opens in a new tab) by console_buche (opens in a new tab) and Neolectron (opens in a new tab) 🎉
• Disco Warrior (opens in a new tab) by Brian Breiholz (opens in a new tab) 🪩
• Chop Chop (opens in a new tab) by Jason McLeod (opens in a new tab) and Gustavo Vituri (opens in a new tab) 🍽

Also, check out the Multiplayer Madness winners (opens in a new tab) and js13k entries (opens in a new tab) (voting is open (opens in a new tab)).

✨ Demos

• Elysium (opens in a new tab) (announcement and video (opens in a new tab)) by The Ebenezer (opens in a new tab)
• Sveltroid (opens in a new tab) (source (opens in a new tab)) by Tyler Johnson (opens in a new tab)
• Upstreet (opens in a new tab) metaverse by Upstreet (opens in a new tab)
• Romp Island (opens in a new tab) by Tim Jones (opens in a new tab)
• Diggable Volumetric Terrain (opens in a new tab) (tech post (opens in a new tab)) by Ethan Hermsey (opens in a new tab)
• Lusion website (opens in a new tab) by Lusion (opens in a new tab)
• Text geometry (opens in a new tab) (demo (opens in a new tab)) by vis_prime (opens in a new tab)
• Magnifying glass reveal effect (opens in a new tab) by 0xca0a (opens in a new tab)
• 3D Gameboy Emulator (opens in a new tab) (source (opens in a new tab)) by Bruno Marques (opens in a new tab)
• The Predator Cloak Material (opens in a new tab) (source (opens in a new tab)) by Anderson Mancini (opens in a new tab)
• Stylized Water Shader (opens in a new tab) by Faraz (opens in a new tab), inspired by Alex Ameye (opens in a new tab)'s article (opens in a new tab).
• Threlte FPS controller (opens in a new tab) (demo (opens in a new tab)) by Marcin J (opens in a new tab)
• HDR Corrupted Fireball (opens in a new tab) (demo (opens in a new tab)) by Benjamin Guignabert (opens in a new tab)

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