mlsarecmg

8 ms·

1.
by mlsarecmg 4y ago
React acknowledges that nothing can ever be purely declarative, it allows you to declare a view while giving you an outlet for imperative computations and side-effects (hooks). There is no contradiction in that. In Fiber to animate is to us
2.
by mlsarecmg 4y ago
sounds like gpu accel is off. or extensions messing with the browser? mbp going to 1fps over a bit of webgl must have a cause.
3.
by mlsarecmg 5y ago
i have yet to encounter something that shouldn't be expressed as a graph. three, babylon, ogl, blender, gltf, cad, games, they're all scene aligned. that doesn't seem to be a conflict since you still use shaders, physics, ec
4.
by mlsarecmg 5y ago
i can't say why webgl took over, as well as threejs, but i like how close to the metal they are. i would also much rather have a lower level representation underneath instead of starting outright with a markup language. i think that&#x
5.
by mlsarecmg 5y ago
threejs has no problem rendering hundreds of thousands of objects, so react doesn't have a problem either because its baseline is threejs, it does not introduce overhead or a performance penalty. These components render in a regular RA
6.
by mlsarecmg 5y ago
Threejs already has a webgpu renderer.
7.
by mlsarecmg 5y ago
It has similar benefits as react-dom has for the dom. Less code, faster performance, less memory consumption, real interop with a growing eco system.
8.
by mlsarecmg 5y ago
React is not based on the dom, R3f merely expresses regular threejs which works as an object graph. Three is the usual choice for 3D on the web, if you use it once you'll see that it is also quite natural. There is no conflict between
9.
by mlsarecmg 5y ago
You are arguing against threejs not react. R3f reconciles threejs in the exact way it's getting used, a graph. This ofc is also how blender gltf et al work. If you make a webgl app on the web you most likely use three and all react doe
10.
by mlsarecmg 5y ago
if you have a threejs app that pushes the limits, the react counterpart will merely do the same, only with less code. threejs renders exclusively.
11.
by mlsarecmg 5y ago
there are many large scale apps built with it these days. it was initially made for complex use cases, to bring order into the scene graph, and of course to optimize raw rendering performance: https://docs.pmnd.rs/react-thre
12.
by mlsarecmg 5y ago
this is a custom renderer. "react" does not know what a "div" is, this comes from "react-dom", that is why they have split these two packages apart. but they also allow you to make your own renderer ( https:&#x
13.
by mlsarecmg 5y ago
i am sorry but there is a deep misconception here. of course you can update thousands of things, why wouldn't you. try racing game for instance: https://twitter.com/0xca0a/status/1400164834243719173 or space
14.
by mlsarecmg 5y ago
i've written them. the first pits react against zustand, it naively lets react churn through the whole graph 60 times per sec, you wouldn't do that ever, but zustand could. i initially tweeted it for people interested in that lib.
15.
by mlsarecmg 5y ago
no ref is used as an element in that code. const ref = useRef() useEffect(() => console.log(ref), []) return <div ref={ref} /> will return { current: [dom node] } const ref = useRef() useEffect(() =&
16.
by mlsarecmg 5y ago
we're running in circles unfortunately and i've explained where the test you're referring to comes from and what it meant. i've posted the real test and if you want, engage in it. async function test() { cons
17.
by mlsarecmg 5y ago
no special jsx pragma needed. this is actually just plain react, <div> <span> and so on come from react-dom, which defines these elements. other renderers define theirs. here's a mini custom renderer if this interests you:
18.
by mlsarecmg 5y ago
what you link there has more to do with react vs zustand. if it interests you, read up on react 18 concurrency, this is the bit you are missing in this discussion.
19.
by mlsarecmg 5y ago
r3f is a custom renderer, there is no difference in useRef between a div or a mesh, refs give you the underlying object. lowercase elements are native elements (div, span, mesh, view, box), they are defined by the renderer. uppercase is for
20.
by mlsarecmg 5y ago
there were multiple versions of that test, the fist had nothing to do with the subject matter, the ones that people refer to (spinning cubes) had an artificial delay that was added to simulate cpu stress.
21.
by mlsarecmg 5y ago
this is how refs work. it's the same with a div. the ref will be filled in useEffect, not before. null! is a common typescript thing, it is a semantic guarantee that the ref is static and hence will be available. this saves you the if
22.
by mlsarecmg 5y ago
you want your view to do something, to participate in the render loop, to animate, user interaction etc. look at the example on the main page: https://github.com/pmndrs/react-three-fiber#what-does-it-loo...
23.
by mlsarecmg 5y ago
it does not take a dom-equivalent tree, it just expresses the same code you would write out imperatively in a declarative way. threejs is a nested graph after all.
24.
by mlsarecmg 5y ago
hard to read through all that tbh. i mostly do not understand what you are talking about when threejs is clearly a tree that react expresses with complete ease. groups in groups with meshes, which have materials, etc. it seems to me you hav
25.
by mlsarecmg 5y ago
r3f does not introduce overhead. the readme text explains it all https://docs.pmnd.rs/react-three-fiber/advanced/scaling-perf...
26.
by mlsarecmg 5y ago
as absurd as it may seem to you, this is a react feature. the upcoming react 18 release is pretty much based on concurrency. this is the test you are referring to: https://docs.pmnd.rs/react-three-fiber/advanced/sc
27.
by mlsarecmg 5y ago
you can't express a 3d scene with markup alone, that is why VRML didn't succeed. the JSX you see just masks function calls, it is not XML or HTML, but the true power is in components and hooks (useFrame, etc). a r3f component is s
28.
by mlsarecmg 5y ago
react has little to do with html. it just calls functions, what you see in react-dom isn't html either, these are nested document.createElement(...) calls. this can be configured for any platform, web, native or otherwise, so <mesh&
29.
by mlsarecmg 5y ago
the scene is a real graph. the difference between imperative and declarative becomes more evident with examples, for instance three: https://codesandbox.io/s/basic-threejs-example-with-re-use-d... and react: https:&#x
30.
by mlsarecmg 5y ago
It is a using custom renderer indeed: https://github.com/pmndrs/react-three-fiber it doesn't wrap Threejs, just expresses it via JSX similar to how react-dom expresses the dom.

More ›