WoGL
ToolsCreate with shadersShader MakerFree online shader builderToolkitShader works ready for your siteSketcher LabPaint your landing’s hero with shaders3D StudioThe Three.js editor in your browser
GamesPlay with shadersOnomatoShaderType a word, blow it upThe WatcherAn eye that follows youAetherLiquid glass with an eye insideBloomcoreA word grows a garden of lightPyrokineThrow fire at the wallVoltaicThe pyramid throws lightningSurfSurf a shader ocean
  1. WoGL Tools
  2. Shader Maker

Shader Maker

Free online shader builder

Pick one of 37 live GLSLWhat is GLSL?The language you speak to your graphics card. Every shader you write lives in GLSL, and the GPU reads it millions of times per second to decide the color of every pixel. It looks like C, but it was born for one thing: painting light in real time. shadersWhat is a shader?A small program that runs on the GPU and decides the color of a single pixel. The GPU runs it for every pixel at once., shape it with sliders and copy its code. It runs on your GPUWhat is the GPU?The massively parallel processor in your machine. It runs the same shader on thousands of cores at once, one per fragment, which is why it paints millions of pixels sixty times a second without breaking a sweat., in the browser through WebGLWhat is WebGL?The bridge that takes your GLSL shader from the browser to the GPU. Without it your code would just be text; with it, it becomes a real-time image inside a web page.; there is nothing to install.

Open Shader Maker →How it works
37 live shaders · GLSL · WebGL 2Free

What you can do

  1. 01

    Start from a live shader

    The index holds 37 curated shaders, each running in real time.

  2. 02

    Shape it with sliders

    Each slider feeds a uniformWhat is a uniform?A value fed into the shader from outside, the same for every fragment in that frame, like time or the mouse. It changes between frames, not between pixels: that is why it animates the whole image at once., so color, speed and form change while you move it.

  3. 03

    Take the code

    Copy the GLSL fragment shader into your WebGL project, a Three.js ShaderMaterial or your website.

How it works

  1. 1

    Choose

    Open the index and pick a shader.

  2. 2

    Shape

    Move the sliders until it is yours.

  3. 3

    Copy

    Press Copy code and paste it in your project.

Questions

Is Shader Maker free?

Yes. It runs in your browser and needs no account.

Can I use the code in Three.js?

Yes. The copied code is a GLSL fragment shader; in Three.js it goes in a ShaderMaterial.

Do I need to know GLSL?

No. The sliders shape the shader; WoGL Academy teaches GLSL from zero if you want to go further.