I was asked by many people last week about how to use the new ThreeJS WebGPU inspector and control panel in React-Three-Fiber. Here is how I personally use it: Code: Demo: #threejs #r3f #creativecoding

@threejs

very nice. debug visibility is one of the missing pieces for making WebGPU feel approachable. nice job!

Props to the @threejs team for building the Inspector as a first class feature. And the @pmndrs team for building R3F to be so flexible that integration is so easily possible. We stand on the shoulders of giants.

This looks so cool, gonna try it out later

这个面板比翻文档省事多了

Have you tried ? Would love to know what you think!

webgpu debugging is a nightmare, definitely saving this before i lose my mind 😮‍💨

Thanks for sharing! Threejs is 🤌

Great stuff man!

Thank you!!

Great demo. I need to play with this.

that looks like actual 🔥

need a way to import .obj or .blend in ThreeJS...or is it just me? geometry nodes doesn't get imported in gilt/glb to ThreeJS from blender

You need to apply the Geometry Nodes modifier before export. You can check the “apply modifiers” box on the GLTF Exporter settings to do this automatically on export.

thank you so much...you have no idea how much time this has saved me

Really, really cool.

Awesome! 🔥

It’s just amazing

Already added into our gallery @mesh3d_gallery

the honest answer is that threejs and r3f are just the surface. the real game is in the underlying math and physics libraries that make all this interactive 3d possible.

debug visibility is why I kept putting WebGPU off. staring at a black canvas guessing which bind group I broke isn't a workflow. also: apply Geometry Nodes before GLTF export. half my blender exports arrived empty for exactly that.

Check our website: