Introduction to WebGL

Wolfgang Ost

Foundations of Computer Graphics, WS 2018/19

March 26, 2019

1 / 22

Contents

1. WebGL

2. Rendering Pipeline

3. General WebGL Hints

2 / 22

WebGL

I JavaScript API for 3D Graphics

I based on OpenGL ES (subset of OpenGL)

I Uses an HTML canvas element for drawing

I Useful links:www.khronos.org/webgl/

developer.mozilla.org/de/docs/Web/API/WebGL_API

https://webglfundamentals.org

3 / 22

Rendering Pipeline

I Generates images from geometric data

I Split into multiple stages

I Executed concurrently

I For details:www.khronos.org/opengl/wiki/Rendering_Pipeline_Overview

4 / 22

Rendering Pipeline

Stages of the rendering pipeline:

1. Vertex Processing

2. Vertex Post-Processing

3. Primitive Assembly

4. Rasterization and Fragment Processing

5. Per-Sample Operations (Depth test, blending etc.)

5 / 22

Vertex Processing

I Input: vertices and their attributes

I Calls the vertex shader for each vertex

I Produces the final position of the vertex

I Not in WebGL: executes tessellation and geometry shaders

6 / 22

Vertex Post-Processing

I Remove anything outside the screen (clipping)

I Transform vertices to window space

7 / 22

Primitive Assembly

I Turn sets of vertices into a sequence of primitives

I Output: sequence of points, lines or triangles

8 / 22

Rasterization and Fragment Processing

I Find fragments belonging to a primitiveI Fragments contain:

I Position in screen spaceI Data from the vertex shader (interpolated between vertices)

I Executes fragment shader for each fragment

I Output: final pixel data

9 / 22

Shaders

Small programs running on the GPU.Vertex shaders: Executed for every vertex

output: gl Position

Fragment shaders: Executed for every fragmentoutput: gl FragColor

Other types (not available in WebGL):Tessellation, geometry and compute shaders

10 / 22

GLSL Qualifiers

uniform: values that are constant for the whole pipelinee.g. transformation matrices

attribute: used to specify an attribute of a vertexe.g. position, color

varying: a value interpolated between verticese.g. color

11 / 22

Render/Game Loop

I Repeatedly draw the scene

I Each iteration is one frameI During each iteration

1. Handle user input2. Update the scene3. Draw the new scene

I To make motion independent of the framerate:

1. Calculate the time per frame ∆t2. Scale all motion by ∆t

12 / 22

Render/Game Loop

Example:

var then = 0;

var delta = 0;

loop = function(now) {

// Calculate time per frame

now *= 0.001;

delta = now - then;

then = now;

handleIput ();

update(delta);

render ();

requestAnimationFrame(loop);

}

// Start the loop

requestAnimationFrame(loop);

13 / 22

update(delta)

Purpose:

I react to input

I update transformations

I handle game logic

How to get smooth, framerate-independent animations?

I delta provides time per frame

I Example: motion along x with ∆x pixels per second:x(t + ∆t) = x(t) + ∆t∆x

14 / 22

render()

How does drawing a scene work?

I Meshes are stored in buffersI To draw a mesh, we need to:

1. Set the shader program to be used:gl.useProgram()

2. Set the values of uniforms:gl.uniform[...]()

gl.uniformMatrix[...]fv()

3. Bind buffers to vertex attributes:gl.vertexAttribPointer()

4. Draw the mesh:gl.drawArrays()

gl.drawElements()

15 / 22

render()

I Buffers are created once when the model is loaded.

I Don’t call gl.bufferData() every frame.

I Same goes for gl.createBuffer()

I The same buffer can be used multiple timesThis saves memory when models become large

16 / 22

Element Array Buffers

I No need to repeat vertices shared among triangles

I In a buffer store an index for each vertex in a triangle

I Instead of gl.drawArrays() use gl.drawElements()

Image from https://vulkan-tutorial.com/Vertex_buffers/Index_buffer (October 17, 2018)

17 / 22

Debugging Tools

Firefox only: canvas debugger and shader editorenable in the Web-Developer settings

External plug-in for Firefox and Chrome: spector.jsgithub.com/BabylonJS/Spector.js

To use spector.js start an HTTP server in your source directory.E.g., using Python 3:

python -m http.server

Then open

localhost :8000/ yourhtmlfile.html

18 / 22

Loading files from disk

How can we load files from disk?

I Start an HTTP server using, e.g., Python, Node.js

I In your JavaScript code use anXMLHttpRequest or the Fetch API

Use this for loading .obj files, or even shaders

19 / 22

Order of Transformations

Apply transformations in the order

1. Scale

2. Rotate

3. Translate

To transform a vector ~v : ~v ′ = M · ~v = T · R · S · v

20 / 22

Order of Transformations

I Keep matrices for translation, rotation and scaling separatelyI When updating the transformations, apply

1. translation to the translation matrix2. rotation to the rotation matrix3. scaling to the scaling matrix

I Build the total transformation M = T · R · S every frame

21 / 22

Submission

Write a readme and include:

I how to run your example

I if you need an http server

I what extra credit you did

Make a zip file with:

I your code

I any external libraries you used

I any other resources needed to run your example

I your readme

You don’t need to submit IDE or VCS related files.Submit to moodle until March 31, 23:55.

22 / 22