Cutting edge graphics in HTML New features & best practices

2. David Catuhe Program Manager, Open Web Standards @deltakosh Cutting edge graphics in HTMLNew features & best practices 3-558 Frank Olivier Program Manager, Internet Explorer @frankolivier Ben Constable Developer, Internet Explorer

3. More options than ever Images, SVG, <canvas>, WebGL… 

4. <canvas> 2d context // Draw black rect ctx.fillRect(50, 20, 145, 145); // Draw blue rect ctx.fillStyle = "rgb(0, 162, 232)"; ctx.fillRect(135, 85, 125, 125); // Increase line width ctx.lineWidth = 5; // Draw black rect outline ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.strokeRect(50, 335, 145, 145); // Draw blue rect outline ctx.strokeStyle = "rgb(0, 162, 232)"; ctx.strokeRect(135, 275, 125, 125); // Draw transparent yellow rect ctx.fillStyle = "rgba(255, 255, 0, 0.75)"; ctx.fillRect(210, 180, 125, 125);

5. <canvas> image smoothingcanvas 2d context, level 2 attribute booleanimageSmoothingEnabled;

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

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

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

9. JPEG Format in <img>Most Commonly Used Image Format

10. JPEG 4:2:0 Chroma Subsampling How to: Load JPG images up to 45% faster Use up to 40% less memory …with two clicks.

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

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

13. Internet Explorer 10 on Windows 8

14. Internet Explorer 11 on Windows 8.1

15. How to save JPGs with 4:2:0 Photoshop Save As: Quality 0 to 6

16. How to save JPGs with 4:2:0 Photoshop Save for Web Quality 0 to 50

17. How to save JPGs with 4:2:0 luci.criosweb.ro/riot

18. WebGL in Internet Explorer 11

19. Khronos Test Suite Pass Rate Version 0.93 April 2014 IE11 Update

20. Conformance Test Groups

21. WebGL will be on all IE11 devices

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

24. WebGL Spring14 Update v0.93 WebGL renderer • More GLSL conformance (structs, inout, constructors) • GLSL Point-size support (DX10+ only) • GLSL Frontfacingsupport • Support for alpha WebGLContextAttribute • Non-float vertices • Support for LUMINANCE, LUMINANCE_ALPHA, ALPHA textures • vertexAttrib{1,2,3,4}f[v] methods • Compressed textures • Stencil buffers • Standard derivatives extension  • Anti-aliasing

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

26. GLSL with structs support lightingInfocomputeLighting(…) { … result.diffuse = ndl * diffuseColor; result.specular = specComp * specularColor; return result; }

27. Anti-aliasing varctx = canvas.getContext('webgl', { antialias: true} ); No antialiasing on DX9 devices

28. Standard derivatives • #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 • floatinvmax = inversesqrt(max(dot(tangent, tangent), dot(binormal, binormal))); • return mat3(tangent * invmax, binormal * invmax, normal); • }

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

30. Stencil buffer 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

31. WebGL Best Practices Remember: The user might be on a less powerful DX9 GPU, or in software mode Test on a variety of machines Use requestAnimationFrame() Don’t render in background Don’t render if the scene isn’t changing

32. Construct 2 EaselJS

33. Babylon.js – 3D engine made easy

34. How to use Babylon.js 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: <script src="babylon.js"></script> var engine = new BABYLON.Engine(canvas, true);

35. How to use Babylon.js 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 withBabylon.js

37. Advanced features Blenderexporter Design & render + Sandbox babylonjs.com/sandbox Offline supportwithIndexedDB Network optimizationsIncrementalloading Complete collisions and physicsengine

38. Advanced features Advanced texturesupport (Bump, DDS) Smartshadersengine and postprocesses Device Orientation API and OculusRift support Touch and virtual joysticks

39. Unleash babylon.js

40. Your Feedback is Important Fill out an evaluation of this session and help shape future events. Scan the QR code to evaluate this session on your mobile device. You’ll also be entered into a daily prize drawing!