Newsletter – Issue 018

📆 2023-09-21

🔥 Headlines

You may have heard that Unity is trying to introduce a Runtime Fee 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, but if you have Unity refugee friends looking for new engines, send them over to 🌐 Web Game Engines & Libraries! In particular, PlayCanvas, Rogue Engine (editor for Three.js), Babylon.js, Needle Engine, and Cocos may fulfill their needs.

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

💼 Jobs (sponsored)

Novablocks 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) - As a gameplay engineer, you will design and build engaging game mechanics that will be used by creators and players.
Game Engine Developer (JS) - 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 – See the changelog and migration guide.
R3F v8.14 – Fixes and React Native experiments.
Drei v9.84 – MotionPathControls, Outlines, plane support for SpriteAnimator.
TresJS 3.1.0 – Vue Devtools are back, re-instancing of Three objects.
TresJS Cientos 3.2.0 – Adds MeshGlassMaterial, useVideoTexture, CameraControls.
Threlte 6 is out! And they are organizing a hackathon starting on October 15th.
Phaser 3.61.0 Beta 2 – See the changelog and announcement.
PixiJS 7.3.0 – See the changelog. There was also a 🎙 Pixi AMA that covers Pixi v8, among other things.
Babylon.js v6.21.1 – See the changelog.
Excalibur.js v0.28.0 (video) by Erik Onarheim – Arbitrary raycasting, text wrapping, custom shaders per actor, post-processing improvements, Aseprite plugin native file support, input mapping, and more.

🛠 Tools

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

🎬 Videos

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

✍️ Articles

🎮 Games

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

The games that won React Jam (best game category) are:

Keep the hype UP! by console_buche and Neolectron 🎉
Disco Warrior by Brian Breiholz 🪩
Chop Chop by Jason McLeod and Gustavo Vituri 🍽

Also, check out the Multiplayer Madness winners and js13k entries (voting is open).

✨ Demos

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

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

Issue 019 Issue 017