![The Shader Chip](https://cdn.slatesource.com/f/b/5/fb526e4e-af50-44e5-9782-0136a23b49e0.webp)

# The Shader Chip

- [Made in Slatesource](https://slatesource.com/@steph/the-shader-chip)
- By [Steph](https://slatesource.com/@steph)
- Created on Jul 19, 2026

## The ShaderShader ChipChip

A fragmentfragment shadershader, compiledcompiled and runningrunning in the browserbrowser, sittingsitting insideinside a pagepage that is otherwiseotherwise plainplain texttext in a GitGit repositoryrepository. This is the chipchip that mostmost oftenoften getsgets the questionquestion: waitwait, that runsruns?

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  vec3 col = 0.5 + 0.5 \* cos(iTime + uv.xyx + vec3(0.0, 2.0, 4.0));
  fragColor = vec4(col, 1.0);
}

That is not a video or a GIF. It is a live WebGL context, compiled from the source shown beneath it, running at your screen refresh rate.

## What It Does

The chipchip takestakes rawraw GLSLGLSL fragmentfragment sourcesource and rendersrenders it on a canvascanvas. SourceSource visibilityvisibility is a toggletoggle, so a pagepage can eithereither showshow the codecode alongsidealongside the outputoutput or presentpresent the outputoutput on its ownown.

## How the SourceSource Is WrappedWrapped

You writewrite a mainImagemainImage functionfunction. The runtimeruntime suppliessupplies the boilerplateboilerplate aroundaround it: a precisionprecision headerheader, the uniformsuniforms, and a mainmain functionfunction that callscalls yours and assignsassigns the resultresult. FourFour uniformsuniforms are injectedinjected and mustmust not be redeclaredredeclared: iResolutioniResolution, iTimeiTime, iMouseiMouse and iChannel0iChannel0.

cpp

1

2

3

4

5

6

```
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  vec2 uv = fragCoord / iResolution.xy;
  vec3 col = 0.5 + 0.5 * cos(iTime + uv.xyx + vec3(0.0, 2.0, 4.0));
  fragColor = vec4(col, 1.0);
}
```

## The GuardGuard RailRail

BeforeBefore compilingcompiling, the runtimeruntime checkschecks the sourcesource for a mainImagemainImage or a mainmain functionfunction. WithoutWithout oneone it refusesrefuses and sayssays so plainlyplainly ratherrather than handinghanding backback a blankblank canvascanvas. A silentsilent blackblack rectanglerectangle is the worstworst possiblepossible failurefailure for a visualvisual chipchip, becausebecause it is indistinguishableindistinguishable from a shadershader that rendersrenders blackblack.

## Why ThereThere Are No PresetsPresets

ThereThere is no presetpreset listlist and no effecteffect dropdowndropdown anywhereanywhere in the chipchip or its builderbuilder. You pastepaste rawraw GLSLGLSL and that is the wholewhole inputinput. It is a harderharder firstfirst fivefive minutesminutes than pickingpicking from a menumenu, and it is honesthonest: what you writewrite is what compilescompiles. A presetpreset listlist wouldwould alsoalso ageage badlybadly, and it wouldwould teachteach nothingnothing about what the chipchip actuallyactually is.

Uniforms injected

4

Max source length

65,535

Compile target

WebGL fragment

Presets

none, by design

## The TextureTexture ChannelChannel That Is Not WiredWired Up

The payloadpayload carriescarries an imageUrlimageUrl for iChannel0iChannel0, so a shadershader couldcould samplesample a texturetexture. No authoringauthoring pathpath setssets it yetyet. The uniformuniform is declareddeclared and availableavailable, the plumbingplumbing to fillfill it is not builtbuilt. DocumentedDocumented herehere ratherrather than quietlyquietly omittedomitted, becausebecause a half-connectedhalf-connected featurefeature is stillstill a factfact about the systemsystem.

> The chip that proves a page is not a document.

[Every chip type, side by side](https://slatesource.com/chips?utm_source=slatesource)