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 Games
  2. OnomatoShader

OnomatoShader

Type a word, blow it up as a comic

Type a word and it pops out of a comic impact star: Ben-Day dots, speed lines, a shake and a split of color. Your word becomes a textureWhat is texture?The visual surface you feel on screen: rough, liquid, metallic, veined. It is not a photo stuck on top, it is born from how you combine noise, layers and warps. It is math you feel with your eyes. that a 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. bends 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..

Play OnomatoShader →How it works
WebGL 2 · texture · keyboardFree

What you can do

  1. 01

    Write your sound

    Any word up to 16 letters: BOOM, ZAP or your name.

  2. 02

    Pop it again

    Every tap pops the word again, with a new shake.

  3. 03

    See a shader at work

    The halftone dots, the speed lines and the color split are computed for every pixel, every frame.

How it works

  1. 1

    Type

    Write a word with your keyboard.

  2. 2

    Watch

    It pops out of a comic impact star.

  3. 3

    Tap

    Tap the screen to pop it again.

Questions

Is it free?

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

Does it work on a phone?

Yes. Your phone’s keyboard types the word and a tap pops it.

What draws it?

A fragment 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. in WebGL 2: the word is drawn once into a textureWhat is texture?The visual surface you feel on screen: rough, liquid, metallic, veined. It is not a photo stuck on top, it is born from how you combine noise, layers and warps. It is math you feel with your eyes., and the shader scales, shakes and splits it every frame.