Shader Learn

05 Data becomes vertices

Several outputs on one grid of points

Start from small grey dots. Turn the switches on one by one and see what position, size, data and colour each change.

(0.50, 0.50)
Explanation

Drag the underlined numbers left and right

gl_Position · position
gl_Position = vec4(aPosition * , 1.0);

aPosition is each point’s input coordinate.

gl_PointSize · size
gl_PointSize = uPixelRatio * ;

uPixelRatio adapts to the screen’s pixel density.

vTone · vertex → fragment
vTone = 0.7;

aUv.x is the horizontal coordinate.

gl_FragColor · colour
gl_FragColor = vec4(vec3(vTone), 1.0);

coral / mint: two RGB colours.

Two mains: the vertex computes position, the fragment computes colour. A varying carries values between them.

Two mains: the vertex main outputs position and size, the fragment main outputs colour, and varyings carry data between them.

Try it

  • Turn on the four switches one by one
  • Turn on colour but not the varying: what happens?