Mini tutorial on making WebGL look ✨ good ✨. One of the hardest—easiest tasks. These are often ignored:

🔑 SRGB, Gamma & tonemapping
🔐 Env maps and good lighting

Deployed:
Sandbox: https://t.co/eBT6fNMFUg
GH Sponsors: https://t.co/MLfpuZTFfJ

↓ https://t.co/z4IHkIV4lMcsb-lwo219-oegdjlwa3-drcmda.vercel.app
codesandbox.io/s/building-liv…
github.com/sponsors/drcmda
🔑 Color space, the culprit

Vanilla Threejs often looks bad, think 90s era CGI, blown colors, low dynamic range. It is gamma incorrect ootb and needs fixing!

React users don't need to do anything, Fiber handles it. Vanilla users run this code.

Ref: https://t.co/TtxOdCF4Ypthreejs.org/docs/index.htm…

wrapping up —

<Environment>

✅ displays any hdri
✅ has presets
✅ render envs dynamically
✅ mix dynamic & hdri
✅ can be "live"

<Lightformer>

✅ mimics studio lights
✅ emits light & has power settings

fullscreen: lwo219.csb.app
sandbox: codesandbox.io/s/building-liv… allows you to create inexpensive studio conditions (in terms of performance & visuals). as many lights as you want. to get something look good as opposed to typical webgl plastic CGI fare is so easy it's almost unfair. beginners, this is your entry into pro looking portfolios.

being able to create envmaps on the fly in react is such a game changer, moving a couple of planes and circles here and there radically transforms the scene. rarely you see something that simple have that kind of an impact. the general idea is 1. pick a model, 2. set up a declarative environment, 3. fill it with plain threejs planes, circles, donuts — keylights, strips, fills. if you have a photography background all the better. when you're done you have a extremely performant good looking scene.

Since React 18 is coming i'm compiling some tweets exploring suspense, a groundbreaking new feature.

Suspense allows components to handle async tasks, while the parent control loading, errors and fallbacks. It essentially solves async in front end.

Here are some use cases → Example #1 — You load an async asset (fetch, wasm, parsing, workers, ...). When it's finished you want to execute a specific action, for instance zoom in.

https://twitter.com/0xca0a/status/1301249675371196417

we are releasing JŌTAI today github.com/react-spring/j… 🎉 this is @dai_shi 's take of the atomic state model. quite similar to recoil but focusses on a small api surface w/ simpler albeit equally powerful atoms and derived state. jōtai is 100% ready for concurrent mode and suspense in its simplest form think of it as a global replacement for useState. in scale you can create complex transforms and relations between state atoms. see it in action here: jotai.surge.sh or try it out on codesandbox: codesandbox.io/s/1w52w