Scribd
Upload
57 views21 pages

Webgl - Like Opengl, But Web!

WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

Uploaded by

Foobar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
57 views21 pages

Webgl - Like Opengl, But Web!

WebGL is a JavaScript API that allows for 2D and 3D graphics in the browser based on OpenGL ES. It was created by Mozilla and maintained by the Khronos Group. WebGL makes it possible to implement 3D graphics applications and games directly in web pages by providing an API similar to OpenGL. While WebGL code can be complex, libraries exist like Three.js to simplify common tasks and provide a more familiar interface.

Uploaded by

Foobar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like