CodeSandbox using react-three-fiber with shader-park

[moonraker22]

I made a quick sandbox using r3f with shader-park. Not sure of the performance of using it like this but it works. If anyone knows any better ways please reply. Thanks 🙏🏼

Code Sandbox

[torinmb]

Hey this is great! Thanks for sharing this. To speed up the performance in the shader park code you'll want to use setStepSize() and try and get it as close to .999 without changing the look of your piece. You'll also want to use setMaxIterations() and try to set it as close to 1 as possible. This will dramatically improve the performance. https://codesandbox.io/s/shader-park-r3f-forked-wpxn7f

I worked on making a DRI plugin, but it's not finished yet. My approach was to extend the ShaderMaterial, and make a ShaderParkMaterial, so you can just wrap any geometry around it in the HTML like this:

    <Sphere args={[1, 34, 34]} >
      <shaderParkMaterial ref={ref} />
    </Sphere>

Still not sure how to easily handle uniforms in this approach.
Here's my scrappy example: https://codesandbox.io/s/shader-park-r3f-u4r5hs?file=/shader-park-material.tsx:2332-2417
I like that in your approach you can still take advantage of createSculpture and the simplified uniform updates.

Also @CodinSegal has been working on a typescript r3f example as well w/ Next.js that might be helpful.