Write shaders.See them live.Wear them.

ShaderEditor provides up to 10 simultaneous touch points through the pointers[10] array (each a vec3 with x, y in pixels, z = pressure) and pointerCount (how many are active).

The background is a smooth UV gradient animated by time. For each active pointer, the shader computes the distance() from the current pixel to the touch position, wraps it through sin() to create rings, then blends it into the background using mix() with a negative factor (-0.5). Negative mix factors extrapolate rather than interpolate, creating the characteristic dark ripple inversion.

Uniforms used: pointerCount (int), pointers[10] (vec3 array), time, resolution.

Try this: Change 8.0 to 30.0 for tighter rings. Change -0.5 to 0.5 for a bright glow instead of dark ripples. Add + time * 5.0 inside the sin() to animate the rings outward from each finger.

This shader applies a rotation matrix to UV coordinates based on distance from each touch point. Near a finger, the rotation angle is large (creating a swirl); far away, exp(20.0 * length(st)) makes the denominator huge, so the angle drops to zero — no distortion.

The mat2(c, s, -s, c) is a 2D rotation matrix. Subtracting 1 from cosine (cos(angle) - 1.0) makes the distortion additive — the identity matrix gives zero displacement. Each touch point contributes its own swirl and they accumulate.

How to use: This shader requires a texture uniform. Tap menu → “Add uniform” → pick any 2D texture or use the noise preset. Then touch the screen to create swirls.

Try this: Change 20. to 5. for wider, softer swirls. Remove sin(time * 10.) to make the swirl direction constant instead of oscillating.

The gravity uniform is a vec3 reporting the device’s gravity vector in m/s². When the phone is flat on a table, gravity ≈ (0, 0, 9.81). Tilting shifts values into the x and y components.

The expression 9.80665 / abs(gravity - 4.90332) creates a non-linear color response: when a gravity component is near 4.9 (half of Earth gravity), the division approaches infinity and the color channel saturates. This produces vivid color pops as you tilt through specific angles.

Uniforms used: gravity (vec3, m/s²) and resolution (vec2). The gravity sensor must be present on the device — most Android phones have one.

Try this: For a smoother response, replace the formula with vec3(uv, 1.0) * gravity * 0.1. To make a tilt-controlled spotlight, compute vec2 tilt = gravity.xy / 9.81 and use it as a center point for a radial gradient.

The orientation uniform is a vec3 containing azimuth, pitch, and roll in radians. This shader uses orientation.z (roll) to build a 3×3 rotation matrix that spins the UV coordinate space.

The UVs are first centered (uv * 2.0 - 1.0), then rotated using mat3(cos, sin, 0, -sin, cos, 0, 0, 0, 1) — a standard Z-axis rotation. After rotation, mod(uv, 0.2) * 5.0 tiles the space into a repeating 5×5 grid and maps tile-local coordinates to color. The result is a checkered pattern that tilts with your device.

Uniforms used: orientation (vec3, radians) and resolution. Dividing by min(resolution.x, resolution.y) ensures uniform scaling in both directions.

Try this: Use orientation.x (azimuth) instead of .z to react to compass heading. Change 0.2 to 0.1 for a finer grid. Add a time component: float a = orientation.z + time * 0.5; for auto-spin.

ShaderEditor can stream the device camera directly into your shader as a texture. The back camera appears as cameraBack (front as cameraFront). These use samplerExternalOES instead of sampler2D because Android camera frames are external GL textures.

The catch: the camera’s orientation doesn’t always match the screen. ShaderEditor provides cameraOrientation (a mat2 rotation matrix) and cameraAddent (a vec2 offset) to correct the mapping. The formula cameraAddent + uv * cameraOrientation handles portrait/landscape and front/back differences automatically.

How to use: Add the camera uniform via menu → “Add uniform” → scroll down to “cameraBack” (needs camera permission).

Try this: Convert to grayscale: vec3 c = texture2D(cameraBack, st).rgb; float g = dot(c, vec3(0.299, 0.587, 0.114));. Or edge-detect by sampling neighboring pixels and comparing differences.

This shader turns the screen into a live battery indicator. The battery uniform is a float from 0.0 (empty) to 1.0 (full), updated in real time by the system.

step(uv.x, battery) is the key: it returns 1.0 for all pixels whose x-coordinate is less than the battery level, and 0.0 for the rest. This creates a hard-edged bar whose width matches the charge percentage.

mix(vec3(1, 0.2, 0.2), vec3(0.2, 1, 0.3), battery) interpolates the bar’s color from red (low) to green (full) based on the same battery value. The bar gets greener as you charge.

Uniforms used: battery (float, 0–1) and resolution. Also available: powerConnected (bool, true when charging) and nightMode (bool, system dark mode).

Try this: Replace step() with smoothstep(battery - 0.01, battery + 0.01, uv.x) for a soft edge. Add a glow: float glow = 0.005 / abs(uv.x - battery); for a bright line at the battery edge.

The backbuffer uniform is a sampler2D that contains the previous frame’s output. This lets each frame build on the last — essential for simulations, trails, and feedback effects.

Each pixel samples its 8 neighbors from the backbuffer and sums their red channel values. Conway’s rules are encoded using step(): the oneIfZero() helper returns 1.0 only when the input equals zero (within a 0.1 tolerance). A cell is born if it has exactly 3 neighbors (has3), or survives if it has 2 and was already alive (has2 * get(0,0)).

Touch input acts as a “brush” — when any pointer is within tap distance, the neighbor sum is forced to 3.0, birthing new cells.

Uniforms used: backbuffer (sampler2D), pointerCount, pointers[10], resolution.

Try this: Map alive-time to color by storing age in the green channel. Change the 0.05 multiplier for a bigger or smaller touch brush. Add * 0.99 to the output to make cells fade and create trails.

This builds on the Game of Life by using all four RGBA channels to track cell state over time, not just alive/dead. The alpha channel stores whether the cell is alive. The blue channel stores “afterglow” — a value that jumps to 1.0 when a cell dies, then slowly decays (afterglow * 0.99 each frame).

The evaluate() function routes afterglow through red and green based on alive/dead status, creating a two-tone color trail: living cells glow one color, recently-dead cells fade through another. The 0.99 decay factor means trails persist for hundreds of frames.

vec4 channel mapping: R = afterglow × alive (living cell color), G = afterglow × dead (trail color), B = max(decay, justDied) (afterglow tracker), A = alive flag.

Try this: Change 0.99 to 0.95 for faster-fading trails, or 0.999 for very long persistence. Swap the red and green assignments in the return statement to change the color scheme.

This is a Cloudy Conway variant with one crucial difference: the backbuffer declaration includes ///p:noise — a ShaderEditor directive that pre-fills the backbuffer with a noise texture instead of starting blank.

Because the noise provides random initial alive/dead states, the simulation ignites immediately with complex patterns instead of requiring you to touch-seed cells manually. The color channel mapping is also swapped (alive → red, afterglow routing → green/alpha), producing an electric blue-to-cyan palette.

The ///p: syntax: When you declare uniform sampler2D backbuffer;///p:noise, ShaderEditor initializes the backbuffer’s first frame from the named preset texture. This is a ShaderEditor-specific extension — it won’t work in other GLSL environments.

Try this: Change ///p:noise to just backbuffer; (no preset) and compare — you’ll get a blank start that requires touch seeding. Try other presets by importing your own textures through “Add uniform”.

GLES 3.0 (OpenGL ES 3.0) is supported on most Android devices from 2013 onward. ShaderEditor detects the #version 300 es directive and automatically creates a GLES 3.0 rendering context.

Key syntax differences from GLES 2.0:

• #version 300 es must be the very first line — no comments or blank lines before it.
• gl_FragColor is removed — you declare your own output: out vec4 fragColor;
• texture2D() becomes texture().
• You gain integer textures, bitwise operators, flat interpolation, and layout qualifiers.

This example is intentionally the same Touch Ripples shader, rewritten for GLES 3.0, so you can compare the two side by side. The logic is identical — only the boilerplate changes.

Try this: Once in GLES 3.0, try integer operations: int px = int(gl_FragCoord.x); if ((px & 1) == 0) fragColor = vec4(0); creates a scanline effect impossible in GLES 2.0.