04 Textures and noise

Textures: look up a colour by address

Give a UV, get a colour from the texture.

UV scale1.00

0.55

UV offset0.00

-11

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 uv = vUv * 1.000 + vec2(0.000, 0.0);
  vec3 color = texture2D(uTexture, uv).rgb;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 uv = vUv * 1.000 + vec2(0.000, 0.0);
  vec3 color = texture2D(uTexture, uv).rgb;
  gl_FragColor = vec4(color, 1.0);
}

JS side

gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT)
gl.uniform1i(uTextureLocation, 0) // texture unit 0

A sampler2D points to an image; texture2D(tex, uv) looks up a colour at a UV. What happens outside 0–1 is set from JS.

Try it

Set the scale to 3: the pattern repeats
In the code, replace uv with uv * uv and watch the pattern bend