Newsletter – Issue 017

🔥 Headlines

A few game jams are coming up soon:

The first React Jam (opens in a new tab) (organized by Rune (opens in a new tab)) is starting tomorrow. It's a 10-day event, with $2500 of cash prizes, and I will be judging submissions! You can make DOM-based games with divs and CSS, 2D canvas games with libraries like Pixi React (opens in a new tab), or 3D games with React Three Fiber (opens in a new tab), for example.

Multiplayer Madness (opens in a new tab) (organized by Hathora (opens in a new tab)) is a 10-day game jam starting on August 11th with $2500+ in prizes and focused on online multiplayer games. Use any engine, web or native. Steven Yau (opens in a new tab) is part of the jury!

js13kGames (opens in a new tab), the competition with a file size limit of 13kb running yearly since 2012, will start on August 13th. You might want to look into Kontra.js (opens in a new tab) for that one.

🏎 Engines & Libraries

• Three.js r154 (opens in a new tab) – alphaHash (opens in a new tab), WebGPU clearcoat (opens in a new tab), and sheen (opens in a new tab) support. (changelog (opens in a new tab), migration guide (opens in a new tab)).
• THREE-CustomShaderMaterial (opens in a new tab) by Faraz (opens in a new tab) – Extend Three.js materials with custom shaders.
• Threed Studio (opens in a new tab) by lifercode (opens in a new tab) – An open-source Three.js editor.
• three-perf (opens in a new tab) by Bohdan Horpynchuk (opens in a new tab) – Vanilla Three.js port of r3f-perf (opens in a new tab).
• Drei v9.79 (opens in a new tab) – stats-gl (opens in a new tab) integration, MeshPortalMaterial (opens in a new tab), FaceControls (opens in a new tab), radial variation for GradientTexture (opens in a new tab).
• r3f-effekseer (opens in a new tab) by Brian Breiholz (opens in a new tab) – R3F wrapper for Effekseer (opens in a new tab), a particle effects library and editor.
• TresJS 2.3.0 (opens in a new tab) – Nuxt Module (opens in a new tab) (video (opens in a new tab)), ScrollControls (opens in a new tab), KeyboardControls (opens in a new tab), useProgress (opens in a new tab).
• PlayCanvas Engine v1.64.0 (opens in a new tab) – MRT, PCSS shadows, AO Detail Map, PCF1 for directional/spot lights.
• PlayCanvas Editor (opens in a new tab) – Sketchfab Integration (opens in a new tab)
• Earthatile (opens in a new tab) (repo (opens in a new tab)) – Google Maps 3D tiles for PlayCanvas by Will Eastcott (opens in a new tab).
• Phaser Editor 2D v3.62.0 (opens in a new tab) – New Event and KeyCode user property types, user components overhaul.
• spine-phaser (opens in a new tab) (docs (opens in a new tab)) was released. Spine (opens in a new tab) is an animation tool for 2D games.
• PixiJS v8.0.0-alpha (opens in a new tab) (highly experimental) – WebGPU Renderer and overhaul of WebGL renderer (up to 2.5x faster), reactive renderer, Advanced Blend Modes.
• Babylon.js v6.12.0 (opens in a new tab)

🛠 Tools

• 3e VS Code Extension (opens in a new tab) by De-Great (opens in a new tab) – Visualize 3D models inside VS Code, with R3F export support.
• stats-gl (opens in a new tab) (repo (opens in a new tab)) by Renaud Rohlinger (opens in a new tab) – WebGL performance monitoring tool.
• 👾 Miniplex (opens in a new tab), the developer-friendly ECS library with React bindings by Hendrik Mans (opens in a new tab), just hit 2.0.0 (opens in a new tab) 🎉.
• aimless.js (opens in a new tab), a randomness library by Christopher Cavalea (opens in a new tab).
• 🎾 The Jolt (opens in a new tab) physics engine by Jorrit Rouwe (opens in a new tab) now has 2D physics support (opens in a new tab).
• 🍎 SVOX 2.0.0 (opens in a new tab) (playground (opens in a new tab)) – Transform groups, lights, Three.js materials, MagicaVoxel, WebXR, glTF support.
• 🤖 FRVR Forge (opens in a new tab) (video (opens in a new tab)) – Editor to create AI-generated games.
• 💰 AdLad (opens in a new tab) by Pelican Party (opens in a new tab) – An Ads SDK manager for people who actually release games.
• 📐 Graphtoy (opens in a new tab), a function graph visualizer by Inigo Quilez (opens in a new tab).

🎬 Videos

• The Making of Vampire Survivors - Documentary (opens in a new tab) by Noclip (opens in a new tab)
• Image of particles in 3D using Three.js (opens in a new tab) (video demo (opens in a new tab)) by Robin Payot (opens in a new tab)
• Mesh Portal Material Tutorial (opens in a new tab) by Wawa Sensei (opens in a new tab)
• Dissolve Effect Tutorial (opens in a new tab) by Wawa Sensei (opens in a new tab)
• Blender Baking (opens in a new tab) by Wawa Sensei (opens in a new tab)
• TresJS V2 - Geometries with Vue (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• TresJS v2 - Animate your 3D Objects with Vue (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• WebGL + WebGPU Meetup - July 2023 (opens in a new tab) – WebGPU + PlayCanvas talk (opens in a new tab) by Martin Valigursky (opens in a new tab)
• An introduction to Shader Art Coding (opens in a new tab) by kishimisu (opens in a new tab)
• Height-Field Water Simulator with 100 lines of code (opens in a new tab) by Ten Minutes Physics (opens in a new tab)
• Throw away your Xbox – The future of games is written in React (opens in a new tab) (Talk at ReactNext '23) by Opher Vishnia (opens in a new tab)
• Is the COST of JavaScript’s GC REALLY that high? (opens in a new tab) by SimonDev (opens in a new tab)
• Pokémon JavaScript Game Tutorial with HTML Canvas (opens in a new tab) (7 hours 🤯) by Chris Courses (opens in a new tab)
• Best performance on casual games? (opens in a new tab) by Cem Demir (opens in a new tab) (Venge.io (opens in a new tab), Tribals.io (opens in a new tab))
• Babylon.js Tutorial For Absolute Beginners (opens in a new tab) by Wael Yasmina (opens in a new tab)
• Defold Game Engine and Web Games (opens in a new tab) (slides (opens in a new tab)) at W3C by Björn Ritzl (opens in a new tab)
• Let's build Mega Man in JavaScript (opens in a new tab) by Drew Conley (opens in a new tab) (Excalibur.js)
• I Built a Zelda Game... With Multiplayer! (opens in a new tab) by Drew Conley (opens in a new tab) (Excalibur.js)

✍️ Articles

• Using WebGPU Compute Shaders with Vertex Data (opens in a new tab) by Brandon Jones (opens in a new tab)
• What's New in WebGPU (Chrome 115) (opens in a new tab) by François Beaufort (opens in a new tab)
• Better full screen mode with the Keyboard Lock API (opens in a new tab) by Thomas Steiner (opens in a new tab)
• 🏹 Spilling our trade secrets! Narrow one updates (opens in a new tab) by Pelican Party (opens in a new tab)
• 🐙 Gamedev.js Jam 2023 results (opens in a new tab) by Andrzej Mazur (opens in a new tab)
• Building Babylon Native for the Apple Vision Pro (opens in a new tab) by Cedric Guillemet (opens in a new tab)
• TresJS v2 First steps with 3D on Vue (opens in a new tab) by Alvaro Sabu (opens in a new tab)

🎮 Games

I am launching a new game, MiniMana.io (opens in a new tab)! It's an Action-RPG in early access, single-player for now. Built with React Three Fiber and Miniplex. Fight the Demons invading your world to earn experience and unlock new abilities! Happy to discuss the game and tech used on the Web Game Dev (opens in a new tab) or Mini Mana (opens in a new tab) Discord servers.

• The Race: Montblanc Explorer (opens in a new tab) by Merci Michel (opens in a new tab) – Promotional racing game for Montblanc 🏎
• Coastal World Season 2 (opens in a new tab) by Merci Michel (opens in a new tab) – Promotional adventure game for Coastal Community Bank 🏝
• Death Star Trench Run (opens in a new tab) (repo (opens in a new tab)) by Lunakepio (opens in a new tab) – Blast your way through like Luke Skywalker! 🚀
• Izowave (opens in a new tab) by Nikita Galadiy (opens in a new tab) – Isometric open-world Tower Defense. 🗼

✨ Demos

• Viola the Bird (opens in a new tab) by David Li (opens in a new tab) for Google Arts & Culture
• Skateboard configurator (opens in a new tab) by Thomas Saint-Martin (opens in a new tab)
• Impossible box with MeshPortalMaterial (opens in a new tab) by 0xca0a (opens in a new tab)
• Unity dissolve effect in R3F (opens in a new tab) by 0xca0a (opens in a new tab)
• 3D liquid shader (opens in a new tab) by Matias (opens in a new tab)

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