01 Fragments and data

float, int, bool: stricter than C

A float sets brightness, an int sets the stripe count, a bool flips it. Then try a C habit.

float · brightness0.80

int · stripes5

112

bool · invertOff

C habit

Runs once per pixelDrag numbers, or edit the code

void main() {
  float brightness = 0.800;
  int count = 5;
  bool invert = false;
  float stripe = step(0.5, fract(vUv.x * float(count)));
  if (invert) stripe = 1.0 - stripe;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), stripe) * brightness;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float brightness = 0.800;
  int count = 5;
  bool invert = false;
  float stripe = step(0.5, fract(vUv.x * float(count)));
  if (invert) stripe = 1.0 - stripe;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), stripe) * brightness;
  gl_FragColor = vec4(color, 1.0);
}

JS side

GLSL never converts types implicitly: a float is written 1.0, and int times float is an error.

Try it

Switch “C habit” and read the GPU’s real error message
Delete a semicolon yourself and see which line the error points to
Change int(count) to float, then fix it