WebGL is getting everywhere. The recent announcement from Microsoft that Internet Explorer is finally supporting WebGL is just another example of the importance that this technology is getting among web technologies. For the first time, web developers can access complex graphics features that were only available for native game development. But, what are the real advantages of WebGL over other web based games development technologies? What are the different game engines that support it? Is WebGL ready for cross-platform game development? Can only 3D games benefit from WebGL? All these questions and more will be answered in this talk full of code snippets and useful tips that will try to show that the web environment (and specially WebGL) can be great for developing successful games, and could become in a real game changer.

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

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

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

4. 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:

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

6. 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/

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

8. 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”);

9. What does WebGL look
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>

10. What does WebGL look
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>

11. What does WebGL look
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

12. What does WebGL look
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 &mdash; 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") {

13. What does WebGL look
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();
gl.bindBuffer(gl.ARRAY_BUFFER,
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();
gl.bindBuffer(gl.ARRAY_BUFFER,
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();
gl.bindBuffer(gl.ARRAY_BUFFER,
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);

14. What does WebGL look
like?
The awesome result!
</script>
</head>
<body onload="webGLStart();">
<a href="http://learningwebgl.com/blog/?p=28">&lt;&lt; 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">&lt;&lt; Back to
Lesson 1</a><br />
</body>
</html>

15. 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/

16. 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/

17. WebGL Game Engines

18. WebGL Game Engines

19. 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?

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

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

22. 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, ...

23. Ludei

24. Ludei
Let see some WebGL running
on both iOS and Android!

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

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

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