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 resizableArrayBuffer
(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!