CSCI 461: Computer Graphics

Middlebury College, Fall 2023

Lecture 09: Textures

Things we know how to do right now.


Recap on how we have been painting our models.

$$I = c_a k_m + c_l k_m \max\left(0, \vec{n}\cdot\vec{l}\right) + c_l k_s \max(0, \vec{v}\cdot\vec{r})^p$$

Other places we have seen this? Think about week 3.

$$I = c_a k_m + c_l k_m \max\left(0, \vec{n}\cdot\vec{l}\right) + c_l k_s \max(0, \vec{v}\cdot\vec{r})^p$$

But what if we want to do this?

Two things we want: (1) color detail, (2) geometric detail.

By the end of today's lecture, you will be able to:

  • set up a texture to use in our rendering pipeline,
  • analytically calculate texture coordinates on a sphere,
  • write texture coordinates from a model to the GPU,
  • sample texels in a texture image to color or "bump" a surface.

Warmup: can we use a Uint8Array instead? (event # 9000136)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(mesh.triangles), gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, mesh.triangles.length, gl.UNSIGNED_SHORT, 0);

The main idea of texturing: sample an image to determine surface properties.

Ingredients #1 and #3: which texel to sample?

Ingredient #2: we need texture coordinates.


A special case: texture coordinates on a sphere.

Why? approximate lots of things like spheres!

Doing it with WebGL.

In JavaScript:
In shader:

Again, the best way to learn this is to write code!

Open up repl: https://replit.com/team/csci461f23/Week-09-Textures
  1. Create texture using previous steps.
  2. Calculate $(s, t)$ in fragment shader and sample texture (stop here, then we will experiment).
  3. Then we'll use actual texture coordinates (mesh.textures).

Texturing artifacts influenced by texture image resolution and distance to surface.

  • Magnification: many screen pixels map to single texel: looks blocky. Average of a few texels?
  • Minification single screen pixel covers many texels: shimmering effect. Which one to pick?

And how to make lookup efficient? mipmaps

Other properties to modify with textures?

$$I = c_a k_m + c_l k_m \max\left(0, \vec{n}\cdot\vec{l}\right) + c_l k_s \max(0, \vec{v}\cdot\vec{r})^p$$