r3f-perf
what-code-is-faster
r3f-perf | what-code-is-faster | |
---|---|---|
2 | 1 | |
559 | 24 | |
2.7% | - | |
4.7 | 6.4 | |
about 1 month ago | about 2 months ago | |
TypeScript | TypeScript | |
MIT License | - |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
r3f-perf
-
Three.js Journey is going React! ⚛️🎉
it's been three years and poimandres has released so many demos, libraries, tools, agencies and real world projects using it, kinda hard to overlook at this point. i get why people were sceptical, it sounded crazy. bruno said it was a tool that he liked in particular that got him to try it https://github.com/utsuboco/r3f-perf of all things 😅 awesome debug tool though.
-
Plain ThreeJS (Inside a React app ) vs react-three-fiber, this is a basic comparison in performance where I added 1000 cubes using the same material and lights in both projects, I know there is a lot of room for improvement like using instancing, but I just wanted it to be very basic and fair.
and instead of stats I used R3f-perf https://github.com/utsuboco/r3f-perf
what-code-is-faster
-
15x Faster TypedArrays: Vector Addition in WebAssembly 154GB/S
Yeah, properly benchmarking JS code is hard because of how complex is the V8's optimizing compiler infrastructure. I once made an online tool for measuring run times of JS code, with [hopefully, lol] proper warmup and protection against possible dead code elimination optimization.
There are a few clickable benchmark examples in the readme: https://github.com/xpl/what-code-is-faster#what-code-is-fast...
What are some alternatives?
react-three-fiber - 🇨🇭 A React renderer for Three.js
best - :trophy: Delightful Benchmarking & Performance Testing
react-intersection-observer - React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.
bridge. - Minecraft Add-on Editor | We strive to provide the best development experience possible
tinybench - 🔎 A simple, tiny and lightweight benchmarking library!
ThreeReact
action - Github Actions for running CodSpeed in your CI
react-three-flex - 💪📦 Flexbox for react-three-fiber
superdiff - Superdiff compares two arrays or objects and returns a full diff of their differences in a readable format.
triplex - ▵ The React Three Fiber visual IDE.
gl-bench - ⏱ WebGL performance monitor with CPU/GPU load.