Newsletter โ Issue 007
๐ฅ Headlines
The Khronos WebGL + WebGPU meetup is today, January 31st, at 5pm PST (8pm EST, 2am Central Europe) and will include presentations by Ken Russell (Khronos, Google), mrdoob, Kelsey Gilbert (Mozilla) and John Anderson (Google Earth). Omar Shehata writes recaps of those recurring meetups.
Chrome Canary on Android now supports
WebGPU if you toggle the #enable-unsafe-webgpu
flag.
Automerge 2.0 got released. Itโs a Conflict-free Replicated Data Type (CRDT) library for Rust and JavaScript to facilitate state synchronization between Peer-to-Peer clients or client and server. Here is an introduction to the concept. Itโs like Git for objects, with automatic conflict resolution. 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 is a popular alternative.
I listed the download sizes of all games on the โจ Games & Demos page and ๐ฎ WebGamer.io, 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 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 โ Includes a
new
three-bvh-csg
example by Garrett Johnson (changelog, migration guide). - Drei v9.55 and v9.56 โ Adds
<Bvh> by 0xca0a to very
conveniently improve raycasting performance via
three-mesh-bvh.
OrbitControls
andCameraControls
performance improvements by Faraz. - R3F-Perf v7.0.0 by Renaud Rohlinger โ Headless mode, tree shaking, new CPU metric and report system.
- PlayCanvas โ Improves glTF Editor imports with camera, light, and Draco-compressed mesh support.
- Babylon.js v5.44.0
- Needle 2.61.0-pre
โ๏ธ Content
- ๐ฌ Needle Engine โ Getting Started. Unity โ Three.js by Felix Herbst.
- โ๏ธ Stylish material switch effect with ThreeJS and GLSL (video, demo) by Francesco Michelini.
- โ๏ธ Refraction, dispersion, and other shader light effects by Maxime Heckel.
- โ๏ธ Floating Islands article (demo) by Oleksandr Popov (custom WebGL engine).
- ๐ Three.js January talk with Anderson Mancini, Yuri Artiukh, N8, and Nicolas Carvajal.
โจ Games & Demos
- ๐ฎ Hockey Pockey by krazybubbler โ Uses React Three Fiber and use-cannon. ๐
- โจ BugBall by John Cotterell (source). Go, cute red robots team! โฝ๏ธ
- โจ Hand tracking experiment (video) by Xavier (Jack). ๐
- โจ WebXR Portals by Noeri Huisman. ๐ ๐๐ต
See more on the โจ Games & Demos page or ๐ฎ WebGamer.io.
On WebGamer.io, you can now โญ๏ธ save games to your Favorites, โฌ๏ธ install the portal as a PWA, and hover thumbnails to see ๐ผ gameplay preview pictures and download sizes.
Liked this issue? ๐ฆ Retweet it, join our Discord, and Subscribe below!