The Rendering Pipeline
Goals
Render one triangle on the screen using WebGL.
Assignment
Use the repository from last time and follow the instructions in the slides:
means that the code is already in the repository and you just need to look at it.
means you can copy-paste the code and it should work.
means that you need to create a new file
indicates that you need to do more than just copy-paste the code.
In any case you need to understand what you are doing.
Material
- Slides:
- Utils for WebGL: utils.zip
Tasks (for the “Hello WebGL” demo)
In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.
Simple
(small and easy code changes)
- Change the size of the triangle
- Change the color of the triangle
- Change the color of the background
Complex
(needs new functions)
- Render the triangles as points (check webgl-points-lines-triangles for help)
- Render the triangles as lines (check webgl-points-lines-triangles for help)
- Draw one thousand triangles instead of one.
Tasks (for the “Hello 3D” demo)
In the following, some tasks are listed that need to be implemented in order to better understand the implemented code.
Simple
(small and easy code changes)
- Change the size of the triangles
- Change the color of the triangles
- Change the color of the background
Complex
(needs new functions)
- Render the triangles as points (check webgl-points-lines-triangles for help)
- Render the triangles as lines (check webgl-points-lines-triangles for help)
- Change the perspective of the camera (check webgl-camera for help)
- Change the second parameter in the
gl.uniformMatrix4fv(modelMatrixLocation, false, modelViewMatrix);function call totrueand check the result. - Draw one thousand triangles instead of two.
Insights
- It took 90 minutes to implement the first demo
- Also the second demo took about 90 minutes to implement and before that the theory was explained along the Following the Rendering Pipeline slides.