Share this page!

Enter URL or ID to Unroll

You can paste full URL like: https://x.com/threadreaderapp/status/1644127596119195649
or just the ID like: 1644127596119195649

How to get URL link on X (Twitter) App

  1. On the Twitter thread, click on or icon on the bottom
  2. Click again on or Share Via icon
  3. Click on Copy Link to Tweet
  4. Paste it above and click "Unroll Thread"!
  5. More info at Twitter Help
☄︎ Profile picture
@0xca0a
Sep 8, 2020 • 4 tweets • 2 min read • Read on X
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
you might be wondering why so many libs come from "react-spring". started with an anim lib, turned into a gh-org, and it's been more like a collective recently (say hello discord.gg/ZZjjNvJ), there are 25 devs working for it atm. full rebrand and exciting news coming soon.
all complaints regarding jotais github markdown to @u29dc please 😬

• • •

Missing some Tweet in this thread? You can try to force a refresh
　

Keep Current with ☄︎

☄︎ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @0xca0a

☄︎ Profile picture
Feb 13, 2023
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…


🔐 Environment

Lighting is everything, and the best way to set lights is the environment map. You are mistaken if you think a pre-made env will do it, for instance HDRIHaven. *

Top/right — harsh Threejs lighting 🤢
Bottom/right — HDRIHaven env 😐
Left — custom env 👈



Read 10 tweets
☄︎ Profile picture
Mar 6, 2022
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.
api for both components here: github.com/pmndrs/drei#en…
Read 4 tweets
☄︎ Profile picture
Mar 5, 2022
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.
so turns out envmaps can be live, at little to no cost. things can animate and move in there. 🙃
Read 4 tweets
☄︎ Profile picture
Jun 9, 2021
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.

Since <Model /> is async and <ZoomIn />, which is not, share the same suspense boundary, <ZoomIn /> will not execute before <Model /> is ready.

This is literally all you have to do, drop a component in. ✨
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

Send Email!

:(