In class we went over more advanced features of WebGL.
But for this coming Wednesday we are going to keep things simple.
Starting from the example I posted last week,
for your homework due Wednesday Nov 18
I would like you to
create non-trivial 3D shapes using triangle strips.
You should make at least the following three shapes:
sphere, cylindrical tube and torus (donut).
If you want to get more ambitious and create more interesting
shapes (eg: see whether you can make use of splines), feel free to do so.
Those more advanced shapes will come in handy in the weeks to come.
Also, if you are feeling ambitious, you can start to add normals to your vertices,
passing in vertices as groups of six values rather than three.
To make that work (as we described in class), you will need to replace the lines:
var attr = gl.getAttribLocation(prog, 'aPos');
gl.enableVertexAttribArray(attr);
gl.vertexAttribPointer(attr, 3, gl.FLOAT, false, 0, 0);
by something like:
var posAttr = gl.getAttribLocation(prog, 'aPos');
var normalAttr = gl.getAttribLocation(prog, 'aNormal');
gl.enableVertexAttribArray(posAttr);
gl.enableVertexAttribArray(normalAttr);
var bpe = Float32Array.BYTES_PER_ELEMENT;
gl.vertexAttribPointer(posAttr , 3, gl.FLOAT, false, 6 * bpe, 0);
gl.vertexAttribPointer(normalAttr, 3, gl.FLOAT, false, 6 * bpe, 3 * bpe);
and also add a declaration for vec3 aNormal into your vertex shader.
If you are feeling really ambitious,
you can try passing those normal values down to your fragment shader,
and use them to shade your 3D shapes:
// in vertex shader
attribute vec3 aNormal;
varying vec3 vNormal;
main() {
vNormal = aNormal;
...
}
...
// in fragment shader
vec3 vNormal;
main() {
vec3 normal = normalize(vNormal);
...
}