Welcome to lab, which is a place where you and your peers complete exercises designed to help you learn the ideas discussed in the preceding lectures. It is intended to be a time where you encounter holes in your understanding and talk out loud with your peers and instructor.
Your instructor will bounce around between breakout rooms to check in with you. However, you are encouraged to request assistance if you find your progress blocked.
Designate one of your group to be the host. This individual will be responsible for setting up a Live Share session in Visual Studio Code and submitting your work. No team member should dominate or be expected to carry the group. All members should be writing code and contributing ideas.
Host, follow these steps:
Non-hosts, join the session.
Your task in this lab is to add detail to surfaces using textures. Follow these steps to complete this lab:
Camerathat allows the user to advance and strafe along the scene and look around with the mouse. The quadrilateral should be transformed by the camera’s matrix.
const positions = [ -1, -1, 1, 1, -1, 1, -1, 1, 1, 1, 1, 1, -1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1, ]; const faces = [ 0, 1, 2, 1, 3, 2, 7, 6, 5, 6, 4, 5, 1, 5, 3, 5, 7, 3, 4, 0, 6, 0, 2, 6, 2, 3, 6, 3, 7, 6, 4, 5, 0, 5, 1, 0 ];
gl.texImage3D(gl.TEXTURE_3D, 0, gl.R8, width, height, depth, 0, gl.RED, gl.UNSIGNED_BYTE, voxels);
eyeWorld. Set the value of this
eyeVectorthat is the vector from the camera’s world space position to the vertex position. It doesn’t need to be normalized. It will be used in the fragment shader to index into the cubemap texture, and cubemap textures don’t need normalized coordinates.
uniformfor the cubemap texture. Set its value in your
uniformfor the 3D noise texture. Set its value in your
uniformfor the elapsed time. Set its value in your
rendermethod with code like this:
const rippleSpeed = 0.0001; waterProgram.setUniform1f('time', performance.now() * rippleSpeed % 2);
timevalue will span from 0 to 2 and will act as our third texture coordinate. Assemble the full 3D texture coordinates like this:
vec3 texcoords = vec3(ftexcoords, time);
ftexcoordsto whatever name you used for the quadrilateral’s 2D texture coordinates.
requestAnimationFrameto infinitely schedule calls to the
renderis continuously run,
timewill oscillate and we’ll move through the planes of the 3D texture.
float here = texture(noiseVolume, texcoords).r; float right = textureOffset(noiseVolume, texcoords, ivec3(1, 0, 0)).r; float above = textureOffset(noiseVolume, texcoords, ivec3(0, 1, 0)).r;
vec3 tangentX = vec3(1.0, right - here, 0.0); vec3 tangentZ = vec3(0.0, above - here, 1.0);
vec3 normal = normalize(cross(tangentX, tangentZ));
index.json Crowdsource. Enter the eIDs for your team members. If you need to make changes after you’ve already submitted, just reload the page and resubmit. If you haven’t finished by the end of the scheduled lab time, you are free to continue working. However, the submission must be made before the end of the day to receive credit.