WebGL texturing examples

by Eftychios Sifakis on October 20, 2015

A few examples on texturing from the Tuesday Oct 20th lecture:

Starting point … a pyramid drawn as explicit triangles [JSBin]
Same pyramid drawn using indexed vertex lists [JSBin]
Cube with flat-shaded faces, drawn using indexed vertex lists [JSBin]
Cube with procedural texture [JSBin]
Cube with checkerboard texture, mipmap [JSBin]
A different texture, combined with face colors, mipmap [JSBin]
Options for handling texture coordinates outside [0,1] interval [JSBin]
Using Yusef’s Base64 encoding, mipmap off [JSBin]

From Oct 22nd:

Two textures used at the same time [JSBin]
Texture and lighting [JSBin]

From Oct 27th:

A simple bump mapping example [JSBin] (NOTE: This is intentionally hacky and actually incorrect! Just serves to show you the kind of look that you might obtain)

From Oct 29th:

Starting point for render-to-texture – same effect as previous examples, but avoiding Z-buffer test [JSBin]
Extremely simplified render-to-texture demo (uses previous example as a texture for each cube face [JSBin]

Late update:

Yet another way to read in local images, using the FileReader API [JSBin]

Print Friendly, PDF & Email

Previous post:

Next post: