Lecture 08

CSCI 461: Computer Graphics

Middlebury College, Fall 2023

Lecture 08: Buffers, Varyings, Attributes & Uniforms

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

compile shader programs,
write data to the GPU using buffers,
bind data in a buffer to an attribute in a shader program,
declare and assign varyings passed from the vertex processing stage to the fragment processing stage,
set and use global variables (uniforms) in your shader program,
respond to events such as mouse clicks, motion & key presses,
write a complete WebGL application from start to finish.

Last week we introduced rasterization - recall our rendering pipeline.

Warmup question (event # 9000135): in last week's lab we used
`gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT)`

See WebGL constants: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants

Hint: Open a console and retrieve a WebGL context:

const gl =
              document.createElement("canvas").getContext("webgl");

WebGL is a state machine.

How to develop a `WebGL` application is best learned by writing code.

https://replit.com/team/csci461f23/Week-08-WebGL

Can we use this instead? (event # 9000135)

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new
              Uint8Array(mesh.triangles), gl.STATIC_DRAW);

## Summary

1. Create a `WebGLShaderProgram` from a vertex shader and fragment shader (each a `WebGLShader`).
            2. Write data to the GPU using `WebGLBuffer` (`createBuffer`, `bindBuffer`, `bufferData`).
            3. Enable the  attributes you need in your program (`getAttribLocation`, `enableVertexAttribArray`).
            4. Draw:
               - Associate attributes with the buffers you want to use in the pipeline (`bindBuffer`, `vertexAttribPointer`).
               - Set the global state (`viewport`, `enable`, `clear`).
               - Set uniform variables (`getUniformLocation`, `uniform[1234][fi][v]` and `uniformMatrix[234][fi]v`).
               - Invoke the pipeline (`bindBuffer` for the element indices, then `drawElements`).
            5. Go to Step 4 whenever a user interacts with the application, or if animating.
            
            <div align=center class="fragment">
              <img src="../images/lab7-final-mike.png" width="600"/>
            </div>

## `WebGL` debugging checklist.
- [ ] Do your shaders compile without errors?
- [ ] Did you declare vertex shader inputs with `attribute`? Did you enable them on the `JavaScript` side? Did you use the correct string name and location when enabling the attribute?
- [ ] Did you declare `varying` variables in both shaders? Did you set the value of the `varying` in your vertex shader?
- [ ] Did you upload the right data when uploading data to the GPU (check which variable you passed to `bufferData`)? Are you using the correct buffer type? Are you using the correct typed array?
- [ ] Did you bind to the intended buffer? Check for instances of accidentally typing `gl.ARRAY_BUFFER` when you intended `gl.ELEMENT_ARRAY_BUFFER` and vice versa.
- [ ] Did you specify the right type and stride when associating a buffer with an attribute?
- [ ] Check the order of the arguments in `vertexAttribPointer`, `bufferData` and `drawElements`.
- [ ] Check again for instances of accidentally writing `gl.ARRAY_BUFFER` when you intended `gl.ELEMENT_ARRAY_BUFFER`.
- [ ] Check again for spelling of all variables in `JavaScript` and `GLSL` code.