WebGL – Like

opengl, but web!

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

Anything native can do, web can do too

• Native “feel”

• Real time communication

• Sane languages

• And today: 3D graphics

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

• JavaScript API for 2D and 3D graphics

• Started at Mozilla, 1.0 released in 2011

• Maintained by the Khronos Group

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

• Based on OpenGL ES

• Easier implementation

• Easier to port existing apps

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

Demo time!
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

<!-- Get your canvas ready -->

<canvas id="the_canvas" width="700“ height="600" />
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Initialize WebGL context

var canvas = document.getElementById("the_canvas");
var gl = canvas.getContext("webgl");
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Compile shaders
var vertexShaderSource =
document.getElementById("vertex-shader").textContent;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

varying vec4 vColor;

void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Link shaders
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, fragmentShader);
gl.attachShader(shaderProgram, vertexShader);
gl.linkProgram(shaderProgram);

gl.useProgram(shaderProgram);
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Let us pass data to shaders

shaderProgram.vertexPositionAttribute =
gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

shaderProgram.vertexColorAttribute =
gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Vertex positions
var vertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
var vertices = [
0.0, 0.9, 0.0,
-0.9, -0.9, 0.0,
0.9, -0.9, 0.0
];
gl.bufferData(
gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW
);
vertexPositionBuffer.itemSize = 3;
vertexPositionBuffer.numItems = 3;
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Vertex colors
var vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
gl.bufferData(
gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW
);
vertexColorBuffer.itemSize = 4;
vertexColorBuffer.numItems = 3;
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

// Set viewport size, clear canvas, pass in buffers, ACTUALLY DRAW SOMETHING??!?!
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexPositionBuffer);
gl.vertexAttribPointer(
shaderProgram.vertexPositionAttribute,
vertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0
);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,
vertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

gl.drawArrays(gl.TRIANGLES, 0, vertexPositionBuffer.numItems);
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

So what does it look like?

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

• ~100 lines of code

• Awkward API

• Models, textures, projection etc. all manual

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

Libraries to the rescue!

The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

three.js
• Familiar vocabulary (“camera”, not “mat4”)

• Loaders for models, textures...

• Animation

• etcetcetc...
The Web Chapter
A SCIENCE AREA IN KNOWIT OBJECTNET

Still not enough?

• Game engines!

• Babylon.js (free)

• Unity, Unreal Engine (via Emscripten)

Thanks
Imre Kerr
The Web Summit, 2016-10-28