HTML5DevConf 2013 (October): WebGL is a game changer!

WebGL
Is it a game changer for web
based game development?
Iker Jamardo
HTML5 Developers Conference
2013/10/23

About Ludei...
• San Francisco based company.
• Started developing native iOS and
Android games.
• More than 18M users have
downloaded a game by Ludei.
• Developers of CocoonJS platform to
push HTML5 game and app
development.
• 10K+ developers, 500+ games

About me...
Iker Jamardo Zugaza
@judax
• I run engineering @ Ludei.
• Passionate about software architecture. A C/C++ and
Java lover (refurbished to JavaScript).
• Former University Professor and Researcher.
• Designed and implemented the core of Ludei’s crossplatform technology.

What is WebGL?
• Stands for Web Graphics Library.
• Maintained by the non-profit Khronos Group
http://www.khronos.org
• A Web Standard JavaScript API for accessing the
underlying graphics hardware without the need of
plugins.
• WebGL 1.0 is based on OpenGL ES 2.0
• Available in the major desktop browsers:

Advantages of WebGL
• Allows low level access to the graphics hardware
while still being in a web based environment, with all
it’s advantages:
» Cross-platform
» Rapid prototyping: JavaScript.
» Execute and update anytime and anywhere.
» Integration with document level content.
» There are ways to access native features without
leaving the JavaScript + HTML space.
» Great communication environment.

Let’s see WebGL in action!
• For commercial purposes:
» http://carvisualizer.plus360degrees.com/threejs/
• For Games:
» http://www.webgl.com/category/webgl-games/
» http://playtankworld.com/
» https://triggerrally.com/
» http://www.goodboydigital.com/runpixierun/
» https://turbulenz.com/games/save-the-day/

Is WebGL just for 3D
content?
• WebGL is not for 3D visualization only. 2D
apps/games can benefit from access to the graphics
hardware.
• Canvas 2D Vs WebGL contexts APIs:
» The 2D context provides a high level graphics API:
» Primitives, complex paths, gradients, ...
» The WebGL context is a low level graphics
hardware management API similar to OpenGL.
» Some program level code + GPU shader code.

What does WebGL look
like?
• Accessing the WebGL context in the application code:
// WebGL is bound to an HTML5 canvas.
// Either get it from the document or create a new one.
var canvas = document.createElement(“canvas”);

// Get the WebGL context from the canvas.
// Depending on the browser, there are different context
// names:
// “experimental-webgl”: Chrome, Opera, IE11

// “moz-webgl”: Mozilla Firefox
// “webkit-3d”: Safari
var gl = canvas.getContext(“experimental-webgl”);

like?
• The simplest vertex shader:
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix *
vec4(aVertexPosition, 1.0);
}
</script>

like?
• The simplest fragment shader:

<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}

</script>

like?
• Basic steps to setup a WebGL application:
» Initialization phase:
» Retrieve the WebGL context.
» Setup WebGL data: array buffers, textures, lights, ...
» Load shader programs and get the connections to the
shader code variables (attributes and uniforms).

» Update and render loop phase:
» Update your app/game logic.

» Render you app/game.
» Pass information to the shaders.
» Execute the shaders: vertex -> fragment

like?
gl = canvas.getContext("experimental-webgl");

<html>

gl.viewportWidth = canvas.width;

<head>

shader = gl.createShader(gl.VERTEX_SHADER);

} catch (e) {

<meta http-equiv="content-type" content="text/html; charset=ISO-88591">

} else {

}

return null;

if (!gl) {

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

}

alert("Could not initialise WebGL, sorry :-(");

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

gl.shaderSource(shader, str);

}

precision mediump float;

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

} else if (shaderScript.type == "x-shader/x-vertex") {

gl.viewportHeight = canvas.height;

<title>Learning WebGL — lesson 1</title>

void main(void) {

shader = gl.createShader(gl.FRAGMENT_SHADER);

gl.compileShader(shader);

}

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

function getShader(gl, id) {

alert(gl.getShaderInfoLog(shader));

var shaderScript = document.getElementById(id);

}

</script>

return null;

if (!shaderScript) {

}

return null;

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

return shader;

}

}

var str = "";

var shaderProgram;

uniform mat4 uPMatrix;

var k = shaderScript.firstChild;

function initShaders() {

void main(void) {

while (k) {

attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;

if (k.nodeType == 3) {

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

str += k.textContent;

}
}

<script type="text/javascript">

shaderProgram = gl.createProgram();

k = k.nextSibling;

</script>

gl.attachShader(shaderProgram, vertexShader);

var gl;

}

gl.attachShader(shaderProgram, fragmentShader);

function initGL(canvas) {

var shader;

gl.linkProgram(shaderProgram);

try {

if (shaderScript.type == "x-shader/x-fragment") {

like?

if (!gl.getProgramParameter(shaderProgram,
gl.LINK_STATUS)) {

1.0, -1.0, 0.0

];
alert("Could not initialise shaders");
}

gl.bufferData(gl.ARRAY_BUFFER, new
Float32Array(vertices), gl.STATIC_DRAW);

gl.useProgram(shaderProgram);

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

triangleVertexPositionBuffer.itemSize = 3;

mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

gl.bindBuffer(gl.ARRAY_BUFFER,
triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

triangleVertexPositionBuffer.numItems = 3;
setMatrixUniforms();
squareVertexPositionBuffer = gl.createBuffer();
squareVertexPositionBuffer);

gl.drawArrays(gl.TRIANGLES, 0,
triangleVertexPositionBuffer.numItems);
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);

vertices = [

shaderProgram.mvMatrixUniform =
gl.getUniformLocation(shaderProgram, "uMVMatrix");

1.0, 1.0, 0.0,

}

-1.0, 1.0, 0.0,

var mvMatrix = mat4.create();

1.0, -1.0, 0.0,

var pMatrix = mat4.create();

squareVertexPositionBuffer);

-1.0, -1.0, 0.0
];

function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false,
pMatrix);

gl.bufferData(gl.ARRAY_BUFFER, new
Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;

gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false,
mvMatrix);
}

squareVertexPositionBuffer.numItems = 4;

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0,
squareVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");

}

var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
triangleVertexPositionBuffer);
var vertices = [

initGL(canvas);

function drawScene() {

initShaders();

gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);

initBuffers();

gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight,
0.1, 100.0, pMatrix);

gl.enable(gl.DEPTH_TEST);

like?
The awesome result!
</script>
</head>
<body onload="webGLStart();">
<a href="http://learningwebgl.com/blog/?p=28"><< Back to
Lesson 1</a><br />
<canvas id="lesson01-canvas" style="border: none;"
width="500" height="500"></canvas>

<br/>
<a href="http://learningwebgl.com/blog/?p=28"><< Back to
Lesson 1</a><br />
</body>
</html>

Learn WebGL!
• Some resources to start playing around with WebGL:
» http://learningwebgl.com/
» http://www.khronos.org/webgl/ and it‘s wiki.
» https://developer.mozilla.org/enUS/docs/Web/WebGL/Getting_started_with_WebGL
» http://www.html5rocks.com/en/tutorials/webgl/webgl_funda
mentals/

WebGL Game Engines
• Working in WebGL from scratch in a professional
project is challenging.
• This is when Game Engines come handy:
» High level APIs and tools that speed up and
simplify the app/game development process.
» http://html5gameengine.com/
» ThreeJS: http://threejs.org/
» Goo: http://www.gooengine.com/

» PlayCanvas: http://playcanvas.com/
» Construct2: https://www.scirra.com/construct2
» PixiJS: http://www.pixijs.com/

Tips to select the best
Game Engine
• The project must guide the selection (not all the way
around).
• 2D or 3D (or both)? Fallback to canvas 2D?
• Does it have an editor (or tools)?
• Is it open source (or easily extensible)?
• What games/apps have been developed using it?
• Does it have a pipeline defined? From design to code.
• Does it have the option to export cross-platform
(specially mobile) apps?

Cross-platform WebGL
(specially mobile)
• In order to say that WebGL is truly cross-platform, it
must be supported on mobile:

4.0
+

Options for WebGL on
mobile
• No one wants to play on a browser on mobile.
» Users: We want apps!
» Developers: We want to monetize!
• Options to deploy a native app that runs WebGL.
» EjectaGL: Only iOS support.
» Ludei: Both iOS and Android support.

Ludei
• An optimized JSVM for canvas 2D and WebGL.
» Same environment across all devices/OS-s.
» Hardware accelerated: No bounds as a browser.
• An easy to use environment:
» The CocoonJS Launcher App for testing
(debugging/profiling).
» The Ludei cloud to configure and compile the
bundles for different platforms.
• Extensions to access native features/services.
» IAPs, Ads, Push Notifications, Social Networks, ...

Ludei

Let see some WebGL running
on both iOS and Android!

Tips for WebGL on mobile
• Understand that mobile is not a desktop system:
» Limited processing power.
» Limited memory.
» Different resolutions.
» Different input.
• Pack your textures: Less fottprint and more
performance.
• Do not load what is not necessary.
• Keep calls to the GPU as low as possible for better
performance.

Conclusions
• HTML5 + WebGL is an amazing technology for
developing Rich Internet Applications with no plugins.
• There are options (engines/tools) to simplify the
process of building these apps and games.
• There are options to run your apps and games on
mobile.

THANK YOU!
ANY QUESTIONS?
Visit our booth at the conference expo for demo showcase and more info.

HTML5DevConf 2013 (October): WebGL is a game changer!

More Related Content

What's hot

Similar to HTML5DevConf 2013 (October): WebGL is a game changer!

Recently uploaded

HTML5DevConf 2013 (October): WebGL is a game changer!