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. Toolkit

Toolkit

Shader effects ready for your website

198 live shaderWhat 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. works in 6 families, each with its 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. code, plus 14 3D models drawn with raymarchingWhat is raymarching?Stepping a ray forward through space until it hits a surface. Each step uses an SDF to know how far to move without overshooting. That is how whole 3D worlds are drawn inside a 2D shader.. Open one, read its code and copy it into your site.

Open Toolkit →How it works
198 works · 6 families · 14 3D modelsFree

What you can do

  1. 01

    Browse by family

    Beings, nature, cosmos, objects, abstract and matter: 33 works each, all running live.

  2. 02

    Read and copy the code

    Every work shows its GLSL; Copy shader puts it on your clipboard.

  3. 03

    Add 3D without polygons

    14 models in 4 families, built from SDFWhat is an SDF?Signed Distance Function: a function that tells you how far you are from a shape, with a sign. Positive outside, negative inside, zero at the edge. With that number you draw crisp shapes without a single polygon. shapes and drawn in real time.

How it works

  1. 1

    Choose a family

    Filter the library by family or search it.

  2. 2

    Open a work

    It plays full screen with its name and tags.

  3. 3

    Copy

    View the GLSL code and copy the shader into your project.

Questions

Is Toolkit free?

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

What do I copy?

The work’s GLSL shader, the same code that draws it on screen.

Do the 3D models use meshes?

No. Each one is an SDFWhat is an SDF?Signed Distance Function: a function that tells you how far you are from a shape, with a sign. Positive outside, negative inside, zero at the edge. With that number you draw crisp shapes without a single polygon. drawn with raymarchingWhat is raymarching?Stepping a ray forward through space until it hits a surface. Each step uses an SDF to know how far to move without overshooting. That is how whole 3D worlds are drawn inside a 2D shader. inside a fragment shader.