u/Icy-Expression6584

Been using React Three Fiber a lot lately and wanted a fast way to test GLSL shaders without spinning up a full R3F project every time. So I built this.

Universal Shader Studio:

• Procedural terrain + GLB model support as shader targets
• Live GLSL editor — vertex + fragment, hit Compile to apply
• Exports directly as an R3F component you can paste into your project
• Also exports Three.js ShaderMaterial, raw GLSL, vanilla WebGL

Stack: React 18 · Three.js · Vite 7 · Tailwind · shadcn/ui

🔗 https://shader-studio-teal.vercel.app

Feedback welcome — especially on the R3F export format, curious if the output is actually usable as-is.

Hey r/threejs — been working on this for a while and finally deployed it.

Universal Shader Studio — write vertex + fragment shaders directly in the browser, see them applied live on terrain, primitives, or your own GLB models.

What it does:

- Procedural terrain generation (Perlin + Island noise)

- Drag & drop GLB support — auto-centered, auto-scaled

- Live GLSL editor with syntax highlighting and shader presets

- Export as Three.js ShaderMaterial, R3F component, raw GLSL, or vanilla WebGL

- Runs 100% client-side, no backend, no install

Built with React + Three.js + Vite. The GLB loader handles InstancedMesh flattening, skinning data cleanup, and auto vertex color injection so shaders just work on whatever you drop in.

🔗 Live: https://shader-studio-teal.vercel.app

Would love feedback — especially on the shader preset selection and export formats. What formats do you actually use in your projects?

https://preview.redd.it/vgj7f9uqtixg1.png?width=1839&format=png&auto=webp&s=3975d704e875ccf2663c0a629e45276b01adc088

Here's what I've already done for my current scene:

- Built a custom procedural grass using a shader-based approach (crossed quad strips with wind animation via onBeforeCompile)

- Used MeshSurfaceSampler with vertex painting to control where grass spawns instead of random scattering

- Throttled wind updates to ~30fps since slow sway doesn't need per-frame updates

- My current grass sits at around 2000 instances and runs fine

But what I actually want is a full field — think wide open area, dense coverage, still performant on mid-range hardware.

I have a rough idea involving instanced geometry + aggressive frustum/distance culling but I haven't gone deep on it yet.

Curious what approaches people have used:

- Is geometry shader-style instancing (pure GPU) feasible in R3F/Three.js without writing a full custom shader?

- Any good patterns for chunk-based LOD on grass specifically?

- Is there a point where you just have to accept a draw call budget and tile smaller patches?

Open to any ideas, papers, or even just "here's what worked for me." Running on Ryzen 5 / 8GB RAM so I need it to actually be usable on lower-end hardware.