react-three-fiber VS wasm-bindgen

That parenthetical “or anything declarative really” is doing a lot of work, given that:

React is a tool for writing 3D scenes that can handle state updates: https://github.com/pmndrs/react-three-fiber

React is a tool for writing music that can handle state updates: https://github.com/FormidableLabs/react-music

React is a tool for writing infrastructure-as-code templates that… um… could with some additional work handle state updates: https://www.linkedin.com/pulse/aws-terraform-generator-using...

Advanced Examples and Utilities Three.js React https://github.com/pmndrs/react-three-fiber : React Three Fiber is a React renderer for Three.js, making it easier to integrate Three.js with React.

this is perfect then. a large part of the threejs userbase is using https://github.com/pmndrs/react-three-fiber (roughly 1/4, and growing) and this is also where you find lots of job opportunities. fiber has a vast eco system, but if you can pair this with your knowledge of shaders you'll find a job tomorrow if you wanted.

there's 3d with threeJS you could play around with that and hooking it into react with react-three-fiber.

Have you looked at this: https://github.com/pmndrs/react-three-fiber

Only instance in recent memory where I was able to get something working with Expo but not the CLI was when trying to integrate react-three-fiber, but even that may be resolved now.

this will put you at a massive advantage: https://github.com/pmndrs/react-three-fiber it's a renderer, just like react-dom, it won't change what threejs is or how it functions.

there's a whole eco system around three in react and next. it starts with react-three-fiber, drei has tons of helpers, and then there's three-next for when you need 100% lighthouse, persisting canvas across routes etc.

I picked the stack I did to expand upon my skill set. In particular, I wanted to brush up on react-three-fiber, react-spring & drei.

I think the easiest for you would be to get into this through web development try this https://github.com/pmndrs/react-three-fiber coupled with this https://github.com/pmndrs/react-xr But don't expect super beautiful graphic from this, it's abstraction over three.js library which is abstraction over webgl standard which implements OpenGL ES 2.0 which is 7 years old graphics standard targeted to mobile devices with not much power. Or you can experiment with unity (unity XR) or unreal engine which are harder to learn but produce better graphics.

> I couldn't figure out a way to to get emscripten wasm code to play nice with wasm32-unknown-unknown

There is good news there, some people plan to work on making Emscripten and Rust work well in Wasm:

https://github.com/rustwasm/wasm-bindgen/pull/4014#issuecomm...

That said, WebAssembly’s ecosystem is still fragmented. Tools like Emscripten (C/C++), wasm-bindgen (Rust), and JSGo (Go) serve different languages, but this complicates the standardization of interactions with web APIs, limiting broader WASM integration with web development.

> Here's an example of Bevy WebGL vs Bevy WebGPU

I think a better comparison would be more representative of a real game scene, because modern graphics APIs is meant to optimize typical rendering loops and might even add more overhead to trivial test cases like bunnymark.

That said though, they're already comparable which seems great considering how little performance optimization WebGPU has received relative to WebGL (at the browser level). There are also some performance optimizations at the wasm binding level that might be noticeable for trivial benchmarks that haven't made it into Bevy yet, e.g., https://github.com/rustwasm/wasm-bindgen/issues/3468 (this applies much more to WebGPU than WebGL).

> They're 10k triangles and they're not overlapping... There are no textures per se. No passes except the main one, with a 1080p render texture. No microtriangles. And I bet the shader is less than 0.25 ALU.

I don't know your exact test case so I can't say for sure, but if there are writes happening per draw call or something then you might have problems like this. Either way your graphics driver should be receiving roughly the same commands as you would when you use Vulkan or DX12 natively or WebGL, so there might be something else going on if the performance is a lot worse than you'd expect.

There is some extra API call (draw, upload, pipeline switch, etc.) overhead because your browser execute graphics commands in a separate rendering process, so this might have a noticeable performance effect for large draw call counts. Batching would help a lot with that whether you're using WebGL or WebGPU.

I already knew that there was a good quality library unicode-segmentation in Rust, and Rust has a great WebAssembly toolchain called wasm-bindgen.

The binding of Rust (WASM) and JavaScript is done with the help of wasm-bindgen and wasm-pack -- https://github.com/rustwasm/wasm-bindgen/tree/main/examples/without-a-bundler

Another strange issue could be seen in the strict class heritage organized definition of the DOM, which can not be handled very well by rust because of a still unsolved bindgen issue (#210).

For a much simpler but less flexible approach there's wasm-pack for creating JS packages from Rust, and wasm-bindgen for easy interop. Both have very good documentation.

We encountered quite a few hurdles on our journey. For one, we had to build our own yew-webtransport and yew-websocket integration from scratch by adding WebTransport definitions to wasm-bindgen (pull request link). We also had to add WebTransport support to the h3 crate (pull request link). co-created by @ten3roberts

Go with your WebAssembly module idea. Since it sounds like your chess engine does not draw a UI, it shouldn't be too difficult. wasm-bindgen will be your best friend.