01 Fragments and data

Components: pick, reorder, repeat

The same three numbers, in a different order, make a different colour.

Order

ExerciseEdit code0%

Write a new order: swap green and red

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec3 original = vec3(vUv.x, vUv.y, 0.2);
  vec3 color = original.rgb;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec3 original = vec3(vUv.x, vUv.y, 0.2);
  vec3 color = original.rgb;
  gl_FragColor = vec4(color, 1.0);
}

JS side

color.r takes the first number; .bgr reorders; .rrr repeats a component. rgb and xyz are two names for the same components.

Try it