2. Ben Constable Developer, Internet Explorer Frank Olivier Program Manager, Internet Explorer @frankolivier

3. More options than ever

4. 2d context

5. image smoothing canvas 2d context, level 2 attribute boolean imageSmoothingEnabled;

6. fill rule canvas 2d context, level 2 fill(optional fillRule); // “evenodd” or “nonzero” clip(optional fillRule); isPointInPath(x, y, optional fillRule);

7. fill rule canvas 2d context, level 2 Non-zero winding rule Even odd rule 2 lines crossed 1 line crossed fill("nonzero");fill(“evenodd");

8. Dashed Lines canvas 2d context, level 2 setLineDash(sequence segments); sequence getLineDash(); attribute unrestricted double lineDashOffset;

9. JPEG Format in Most Commonly Used Image Format

10. JPEG 4:2:0 Chroma Subsampling

11. RGB / YCbCr Red Green Blue Luma (Y) Chroma (Cb) Chroma (Cr) RG B YCbC r = + + = + +

12. Chroma Subsampling Original Luma (Y) Chroma (Cb) Chroma (Cr) = + + Original Luma (Y) Chroma (Cb) Chroma (Cr) = + + OriginalLuma (Y) Chroma (Cb) Chroma (Cr) = + + 4:4:4 4:2:0 4:2:2 62.5% less memory than RGB (no subsampling)

13. Internet Explorer 10 on Windows 8

14. Internet Explorer 11 on Windows 8.1

17. luci.criosweb.ro/riot

22. DirectX 11 Runtime GPU Driver or Software Rendering GLSL Parser GLSL Verifier Scripting Engine GL API Translation D3DCompiler WebGL-equivalent DX API calls GLSL Translator GLSL Shader source Safe verified HLSL WebGL context API calls

25. mat3 (…) computeLighting { … result[0] = ndl * diffuseColor; result[1] = specComp * specularColor; result[2] = vec3(0.); return result; }

26. lightingInfo computeLighting(…) { … result.diffuse = ndl * diffuseColor; result.specular = specComp * specularColor; return result; }

27. var ctx = canvas.getContext('webgl', { antialias: true} ); No antialiasing on DX9 devices

28. #extension GL_OES_standard_derivatives : enable … mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv) { // get edge vectors of the pixel triangle vec3 dp1 = dFdx(p); vec3 dp2 = dFdy(p); vec2 duv1 = dFdx(uv); vec2 duv2 = dFdy(uv); // solve the linear system vec3 dp2perp = cross(dp2, normal); vec3 dp1perp = cross(normal, dp1); vec3 tangent = dp2perp * duv1.x + dp1perp * duv2.x; vec3 binormal = dp2perp * duv1.y + dp1perp * duv2.y; // construct a scale-invariant frame float invmax = inversesqrt(max(dot(tangent, tangent), dot(binormal, binormal))); return mat3(tangent * invmax, binormal * invmax, normal); }

29. gl.getExtension('WEBGL_compressed_texture_s3tc') gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);

30. Extra buffer of one byte per pixel (in addition to color buffer and depth buffer) Increment/decrement can be done based on depth tests Used for shadows, outline drawing or highlighting specific areas

32. EaselJS

34. Open source project (Available on Github) http://www.babylonjs.com https://github.com/babylonjs/babylon.js How to use it? Include one file and you’re ready to go! To start Babylon.js, you’ve just need to create an engine object: var engine = new BABYLON.Engine(canvas, true);

35. Babylon.js is a scene graph: All complex features are abstracted for YOU! Handling rendering can be done in one line: var scene = new BABYLON.Scene(engine); var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene); var light0 = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene); var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 3, scene); engine.runRenderLoop(function() { scene.render(); });

36. Hello World with Babylon.js

37. Offline support with IndexedDB Network optimizations Incremental loading Blender exporter Design & render + Sandbox babylonjs.com/sandbox Complete collisions and physics engine Advanced features

38. Smart shaders engine and postprocesses Device Orientation API and Oculus Rift support Advanced texture support (Bump, DDS) Touch and virtual joysticks

39. Unleash babylon.js