Hello WebGL

Goals

• Understand the basic concept of rendering graphics using WebGL.
• Get the development environment set up and running.
• Render one triangle on the screen using WebGL.

Introduction

Material

Slides

Assignment 00

• Install code editor e.g. Visual Studio Code
• Install Add-Ons
  • For VS Code:
    • JavaScript: ESLint
    • GLSL: WebGL-GLSL-Editor
• Get the sample code running: GitHub Classroom WebGL Hello World

Insights

• A quite recent discussion on Bluesky about downgrading from D3D12 to 11 due to the complexity of the API and the need for a more straightforward approach to graphics programming.
• You can add the code line /** @type {WebGLRenderingContext} */ over the gl variable declaration in your JavaScript file to get better code completion and error checking for WebGL in your code editor.

Assignment 01

Use the repository from above 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:

  • Slides to implement the “Hello World” demo

• 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.

Questions

• TBD