Newsletter โ Issue 007
๐ฅ Headlines
The Khronos WebGL + WebGPU
meetup (opens in a new tab) is today, January 31st,
at 5pm PST (8pm EST, 2am Central Europe) and will include presentations by Ken
Russell (opens in a new tab) (Khronos,
Google),
mrdoob (opens in a new tab), Kelsey Gilbert (Mozilla) and John
Anderson (Google Earth). Omar Shehata (opens in a new tab) writes
recaps (opens in a new tab) of
those recurring meetups.
Chrome Canary on Android now supports
WebGPU (opens in a new tab) if you toggle the
#enable-unsafe-webgpu
flag.
Automerge 2.0 (opens in a new tab) got released. It's a Conflict-free Replicated Data Type (opens in a new tab) (CRDT) library for Rust and JavaScript to facilitate state synchronization between Peer-to-Peer clients or client and server. Here is an introduction (opens in a new tab) to the concept. It's like Git for objects, with automatic conflict resolution (opens in a new tab). CRDTs are used for real-time collaborative applications (like Google Docs or Figma), offline-first apps, and P2P decentralized apps and games. Not something you'll need for most games, but it's good to know that it exists if you someday run into concurrency issues when multiple players try to mutate a game state simultaneously. Yjs (opens in a new tab) is a popular alternative.
I listed the download sizes of all games on the โจ Games & Demos (opens in a new tab) page and ๐ฎ WebGamer.io (opens in a new tab), which you can see on game thumbnails on both pages. That's the total transferred size from hard refresh to actual gameplay. The smallest games boot with as little as 3MB and go up to 87MB. With a fast CDN, parallelized downloads, and a background download strategy, games under 20MB or even 30MB can load quickly or almost instantly. On mobile, 53% of users (opens in a new tab) leave a web page if it takes more than 3 seconds to load, so try to show the main menu as fast as possible and keep downloading well-compressed and optimized resources in the background.
โฌ๏ธ Updates
Three.js r149 (opens in a new tab) โ Includes a new
three-bvh-csg
(opens in a new tab) example (opens in a new tab) by Garrett Johnson (opens in a new tab) (changelog (opens in a new tab), migration guide (opens in a new tab)).Drei v9.55 and v9.56 (opens in a new tab) โ Adds <Bvh> (opens in a new tab) by 0xca0a (opens in a new tab) to very conveniently improve raycasting performance via three-mesh-bvh (opens in a new tab).
OrbitControls
andCameraControls
performance improvements (opens in a new tab) by Faraz (opens in a new tab).R3F-Perf (opens in a new tab) v7.0.0 (opens in a new tab) by Renaud Rohlinger (opens in a new tab) โ Headless mode, tree shaking, new CPU metric and report system.
PlayCanvas (opens in a new tab) โ Improves glTF Editor imports (opens in a new tab) with camera, light, and Draco-compressed mesh support.
Babylon.js v5.44.0 (opens in a new tab)
Needle (opens in a new tab) 2.61.0-pre (opens in a new tab)
โ๏ธ Content
- ๐ฌ
Needle Engine โ Getting Started. Unity โ Three.js (opens in a new tab) by Felix Herbst (opens in a new tab).
- โ๏ธ
Stylish material switch effect (opens in a new tab) with ThreeJS and GLSL (video (opens in a new tab), demo (opens in a new tab)) by Francesco Michelini (opens in a new tab).
- โ๏ธ
Refraction, dispersion, and other shader light effects (opens in a new tab) by Maxime Heckel (opens in a new tab).
- โ๏ธ
Floating Islands article (opens in a new tab) (demo (opens in a new tab)) by Oleksandr Popov (opens in a new tab) (custom WebGL engine).
- ๐
Three.js January talk (opens in a new tab) with Anderson Mancini (opens in a new tab), Yuri Artiukh (opens in a new tab), N8 (opens in a new tab), and Nicolas Carvajal (opens in a new tab).
โจ Games & Demos
- ๐ฎ
Hockey Pockey (opens in a new tab) by krazybubbler (opens in a new tab) โ Uses React Three Fiber (opens in a new tab) and use-cannon (opens in a new tab). ๐
- โจ
BugBall (opens in a new tab) by John Cotterell (opens in a new tab) (source (opens in a new tab)). Go, cute red robots team! โฝ๏ธ
- โจ
Hand tracking experiment (opens in a new tab) (video (opens in a new tab)) by Xavier (Jack) (opens in a new tab). ๐
- โจ
WebXR Portals (opens in a new tab) by Noeri Huisman (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).
On WebGamer.io (opens in a new tab), you can now โญ๏ธ save games to your Favorites, โฌ๏ธ install the portal as a PWA (opens in a new tab), and hover thumbnails to see ๐ผ gameplay preview pictures and download sizes.
Liked this issue? ๐ฆ Retweet it, join our Discord, and Subscribe below!