• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5DevConf 2013 (October): WebGL is a game changer!

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



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

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.



Total Views
Views on SlideShare
Embed Views



3 Embeds 58

http://html5devconf.com 55
http://localhost 2
http://dev.liranuna.com 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • 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”);
    • 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>
    • 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>
    • 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
    • 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") {
    • 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);
    • 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>
    • 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/
    • WebGL Game Engines
    • WebGL Game Engines
    • 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
    • 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.