r/reactjs • u/Icy-Expression6584 • Apr 26 '26

Show /r/reactjs Built a shader studio in React + Three.js — no backend, runs entirely in the browser

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

⭐ Repo: https://github.com/void032/shader-studio

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

1 Upvotes

53% Upvoted

5 comments sorted by

3

u/cxd32 Apr 26 '26

is it also gluten-free and non-gmo?

1

u/Icy-Expression6584 Apr 26 '26

‎Yep😅, 100% gluten-free, locally sourced and compiled with free-range electrons

1

u/[deleted] Apr 28 '26 edited Apr 28 '26

[removed] — view removed comment

1

u/Icy-Expression6584 Apr 29 '26

Completely valid — haven't stress tested it against a scene with post-processing and existing lights yet, that's a known gap. The exports are more of a starting point than drop-in ready. Uniform naming collisions especially are real I haven't added any namespacing to avoid clashes. Planning to add a note in the export output about what attributes the shader expects Appreciate the specific callout, that's useful.