Newsletter – Issue 013

🔥 Headlines

We are doing an open-source game jam! Head to 🍓 Web Game Dev Open Jam – April 2023 (opens in a new tab) to learn about the event, join the itch.io jam (opens in a new tab), spread the word (opens in a new tab), and get ready to make some cool browser games in April! 🚀

Here are some highlights from GDC 2023: Epic Games announced Fab.com (opens in a new tab), a new multi-engine marketplace for digital assets that unifies Quixel, Sketchfab, Unreal Engine Marketplace and ArtStation Marketplace, and the Unreal Editor for Fortnite (opens in a new tab), a version of Unreal that can create and publish experiences directly to Fortnite. It uses Verse (opens in a new tab), Epic's new programming language. Unity teased some AI integration (opens in a new tab), and here is a Unity Roadmap (opens in a new tab) video by Code Monkey. Sonniss released 44GB of free samples (opens in a new tab) for game audio (video explanation (opens in a new tab)).

On the web front, a live WebGL + WebGPU Meetup (opens in a new tab) (event page (opens in a new tab)) took place at GDC! It included presentations of ShaderFrog (opens in a new tab) (timestamp (opens in a new tab)) by Andy Ray (opens in a new tab), Cocos Creator (opens in a new tab) (timestamp (opens in a new tab)) by Huabin Ling (opens in a new tab), WebGL Shader Pixel Local Storage (timestamp (opens in a new tab)) by Chris Dalton (opens in a new tab), and Unity + WebGPU (timestamp (opens in a new tab)) by Mark Watson (opens in a new tab).

Safari 16.4 is out! (opens in a new tab) The most relevant features for us are:

• • Third-party web browsers Add to Home Screen for 🌐 PWAs (opens in a new tab) (called Home Screen web apps by Apple).
• • Web Push (opens in a new tab) on iOS and iPadOS – Installed PWAs can send notifications.
• • Badging API (opens in a new tab) – Set a badge on the installed PWA icon to act as a notification.
• • Offscreen Canvas (opens in a new tab) – 2D-only for now.
• • Fullscreen API (opens in a new tab) on iPadOS – Reportedly unsuitable for games because swiping down exits fullscreen.
• • Screen Orientation API (opens in a new tab) – Preliminary support, can't trigger a rotation yet.
• • Screen Wake Lock API (opens in a new tab) – Keep your game open without the screen turning off.
• • Compression Streams API (opens in a new tab) – Compress and decompress gzip directly from JavaScript.
• • Growable SharedArrayBuffer (opens in a new tab) and resizable ArrayBuffer (opens in a new tab).
• • Media Queries Level 4 Syntax Improvements (opens in a new tab) – For example: @media (400px <= width < 900px)
• • Import Maps (opens in a new tab) – Useful to map ES module URLs to names if you don't use a bundler.

📐 A mathematical breakthrough happened: the first ever aperiodic monotile called the hat (opens in a new tab) has been discovered. It is a single shape that tiles a plane, but never periodically – meaning it cannot be translated to align with itself. This pattern might have interesting applications in game development, who knows! Here is a Veritasium video (opens in a new tab) about infinite patterns covering the Penrose tiling (which is made of 2 shapes combined).

🛠 Tools & Updates

• Three.js r151 (opens in a new tab) – Includes new bounding volumes and an updated NodeEditor (opens in a new tab) (changelog (opens in a new tab), migration guide (opens in a new tab)).
• Drei v9.59 (opens in a new tab) – Adds MeshDiscardMaterial (opens in a new tab) – a material that renders nothing but can be used to show shadows and children – and a <Shape> component to create a THREE.Shape (opens in a new tab) geometry with auto UV. Drei Shapes (opens in a new tab) are helpers to create meshes with buffer geometries.
• TresJS v2.0.0-alpha (opens in a new tab) – Uses a Vue custom renderer, adds TS and Intellisense support, by Alvaro Sabu (opens in a new tab).
• Threlte v6 (opens in a new tab) – Early release with a new documentation (live playground (opens in a new tab)).
• PlayCanvas (opens in a new tab) – New WebXR AR Starter Kit (video (opens in a new tab), blog post (opens in a new tab))
• Motion.js (opens in a new tab) (video (opens in a new tab)) is a plugin for PlayCanvas to create simple animations with timelines by Cem Demir (opens in a new tab).
• Phaser v3.60.0 Beta 21 (opens in a new tab) – Adds ESM Support. Read the March 2023 Dev Log (opens in a new tab) for more details on v3.60.
• Phaser Editor 2D v3.60 Beta 2 (opens in a new tab) – Adds support for Script Nodes.
• Babylon.js v5.53.0 (opens in a new tab) – BabylonJS v6 is delayed (opens in a new tab) until April 20th.
• Needle (opens in a new tab) v2.67.0-pre (opens in a new tab) – Adds Editor Live Sync (opens in a new tab), more postprocessing effects, WebAR camera background.
• AUXL v0.2 (opens in a new tab) – A-Frame UX Library: WebXR Scenario, Object Generator and Controller System by Minty Crisp (opens in a new tab).

🎬 Videos

• Three.js Shaders (GLSL) Crash Course (opens in a new tab) (3 hours!) by Visionary 3D (opens in a new tab)
• Custom shaders with R3F and Nodetoy playlist (opens in a new tab) by Domenicobrz (opens in a new tab)
• Recreating Atmos with R3F (opens in a new tab) by Wawa Sensei (opens in a new tab)
• TresJS OrbitControls (opens in a new tab) by Alvaro Sabu (opens in a new tab)
• Pokémon Game Tutorial with Kaboom.js (opens in a new tab) by JS Legend (opens in a new tab)
• Unreal Engine 5.2 is getting too real (opens in a new tab) by Fireship (opens in a new tab)
• 📐 A new way to generate worlds (opens in a new tab) (Wave Function Collapse algorithm) by Watt Designs (opens in a new tab)

✍️ Content

• Cyberpunk inspired Three.js Scene (opens in a new tab) by Anderson Mancini (opens in a new tab)
• A thread of tips for React Three Fiber (opens in a new tab) with codesandboxes by 0xca0a (opens in a new tab)
• 📐 Resources for learning math/postprocessing (opens in a new tab) by N8 (opens in a new tab)
• Three.js March Talk (opens in a new tab) with mrdoob (opens in a new tab) and 0beqz (opens in a new tab) as special guests

🎮 Games

• 2020 Game (opens in a new tab) by Max Garkavyy (opens in a new tab) – In case you forgot what that year was like. 🦠
• CodeQuest (opens in a new tab) by Marc (opens in a new tab) – RPG that teaches you the basics of coding. 🧑‍💻
• Bubbo Bubbo (opens in a new tab) (source (opens in a new tab)) by PixiJS (opens in a new tab) – Open-source Bubble Bobble-like game. 🫧
• Puzzling Potions (opens in a new tab) (source (opens in a new tab)) by PixiJS (opens in a new tab) – Open-source tile-matching game. 🧪
• Match City (opens in a new tab) (source (opens in a new tab)) by Dennis Smuda (opens in a new tab) – Open-source tile-matching game 🔢

✨ Demos

• Rainy Window Shader (opens in a new tab) (demo (opens in a new tab)) by Dani John (opens in a new tab)
• Toon Material Color Ramp for Three.js (opens in a new tab) by Faraz (opens in a new tab)
• Editing a VR scene while being in the scene (opens in a new tab) by Steven Yau (opens in a new tab)
• XR Room (opens in a new tab) by Solar Games (opens in a new tab)

See more on the ✨ Games & Demos (opens in a new tab) page or 🎮 WebGamer.io (opens in a new tab).

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