Free • No install • Runs in your browser

GLSL Shader Editor & Playground

Edit vertex and fragment GLSL shaders and see the result on a 3D mesh in real time. WebGL / GLSL ES 1.0. Uniforms u_time, u_resolution, and u_mouse are available.

Tip: Tab = 2 spaces, Shift+Tab = outdent. Enter = new line with same indent. Wireframe = compile error; check console (F12).

Drag to rotate. Mouse position is passed as u_mouse (0–1).

About GLSL shaders

Vertex shaders run per vertex and set gl_Position and pass data via varying. Fragment shaders run per pixel and set gl_FragColor. This tool uses sphere, plane, or cube geometry; you can use uv and position in the vertex shader. Use u_time, u_resolution, and u_mouse for effects. More developer tools: 3D Tools and 3D Screenshot Generator.

Frequently Asked Questions

What GLSL version is used?

The preview uses WebGL 1 / GLSL ES 1.0 (Three.js default). Use varying for vertex-to-fragment data. Uniforms u_time, u_resolution, and u_mouse are provided.

Why is the preview black or not updating?

Check your GLSL syntax and the browser console (F12) for compile or runtime errors. Ensure the fragment shader sets gl_FragColor and the vertex shader sets gl_Position. If the mesh stays wireframe, a compile error occurred—check the console for details.

Can I use time, resolution, or mouse in my shader?

Yes. The tool provides u_time (float, seconds), u_resolution (vec2, pixel size), and u_mouse (vec2, normalized 0–1). Use them in your fragment shader for animations and interactivity.