David CatuheProgram Manager, Open Web Standards @deltakosh

Cutting edge graphics in HTMLNew features & best practices

Ben ConstableDeveloper, Internet Explorer

Frank Olivier Program Manager, Internet Explorer @frankolivier

3-558

Images, SVG, <canvas>, WebGL… 

More options than ever

// 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);

<canvas> 2d context

<canvas> image smoothingcanvas 2d context, level 2

attribute boolean imageSmoothingEnabled;

<canvas> fill rulecanvas 2d context, level 2

fill(optional fillRule); // “evenodd” or “nonzero”

clip(optional fillRule);

isPointInPath(x, y, optional fillRule);

<canvas> fill rulecanvas 2d context, level 2

Non-zero winding rule Even odd rule

2 lines crossed 2 lines crossed

1 line crossed

fill("nonzero"); fill(“evenodd");

<canvas> Dashed Linescanvas 2d context, level 2

setLineDash(sequence<unrestricted double> segments); sequence<unrestricted double> getLineDash();attribute unrestricted double lineDashOffset;

JPEG Format in <img>Most Commonly Used Image Format

48%

27%

23%2%

JPEGPNGGIFOther

How to:

Load JPG images up to 45% fasterUse up to 40% less memory

…with two clicks.

JPEG 4:2:0 Chroma Subsampling

RGB / YCbCr

Red Green Blue

Luma (Y) Chroma (Cb)

Chroma (Cr)

RGB

YCbCr

= + +

= + +

Chroma Subsampling

Original Luma (Y) Chroma (Cb)

Chroma (Cr)

= + +

Original Luma (Y) Chroma (Cb)

Chroma (Cr)

= + +

Original Luma (Y) Chroma (Cb)

Chroma (Cr)

= + +

4:4:4

4:2:0

4:2:2

62.5% less memory than RGB

(no subsampling)

Internet Explorer 10 on Windows 8

Internet Explorer 11 on Windows 8.1

Photoshop Save As:Quality 0 to 6

How to save JPGs with 4:2:0

Photoshop Save for Web

Quality 0 to 50

How to save JPGs with 4:2:0

luci.criosweb.ro/riotHow to save JPGs with 4:2:0

WebGL in Internet Explorer 11

Khronos Test Suite Pass Rate

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Version 0.90June 2013

IE11 Developer Preview

Version 0.91October

2013

IE11 Release Preview

Version 0.92November

2013

IE11 Release

Version 0.93April 2014

IE11 Update

attrib

s

buffers

canva

s

contex

t

exten

sions gls

llim

its miscmore og

les

progra

ms

readin

g

rende

rbuffers

rende

ring

state

textur

es

typed

array

s

unifo

rms

0%10%20%30%40%50%60%70%80%90%

100%

Conformance Test Groups

WebGL will be on all IE11 devices

WebGL in Internet Explorer 11

DirectX 11 Runtime

GPU Driver or Software Rendering

GLSL Parser

GLSL Verifier

Scripting Engine

GL API Translation

D3DCompilerWebGL-equivalent DX API calls

GLSL Translator

GLSLShader source

Safe verified HLSL

WebGL context API calls

v0.93 WebGL renderer   More GLSL conformance (structs, inout, constructors) GLSL Point-size support (DX10+ only) GLSL Frontfacing support 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

WebGL Spring14 Update

GLSL without structs supportmat3 (…) computeLighting {

…

result[0] = ndl * diffuseColor;result[1] = specComp * specularColor;result[2] = vec3(0.);

return result;}

GLSL with structs supportlightingInfo computeLighting(…) {

…

result.diffuse = ndl * diffuseColor;result.specular = specComp * specularColor;

return result;}

Anti-aliasing

var ctx = canvas.getContext('webgl', { antialias: true} );

No antialiasing on DX9 devices

Standard derivatives#extension GL_OES_standard_derivatives : enable… mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv){

// get edge vectors of the pixel trianglevec3 dp1 = dFdx(p);vec3 dp2 = dFdy(p);vec2 duv1 = dFdx(uv);vec2 duv2 = dFdy(uv);

// solve the linear systemvec3 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);

}

Compressed texturesgl.getExtension('WEBGL_compressed_texture_s3tc')

gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);

Stencil bufferExtra 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

Remember: The user might be on a less powerful DX9 GPU, or in software modeTest on a variety of machines

Use requestAnimationFrame()Don’t render in backgroundDon’t render if the scene isn’t changing

WebGL Best Practices

Construct 2

EaselJS

Babylon.js – 3D engine made easy

Open source project (Available on Github)http://www.babylonjs.com

https://github.com/babylonjs/babylon.jsHow 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);

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(); });

How to use Babylon.js

Hello World with Babylon.js

Offline supportwith IndexedDB

Network optimizationsIncremental loading

Blender exporterDesign & render + Sandboxbabylonjs.com/sandbox

Complete collisions and physics engine

Advanced features

Smart shaders engine and postprocesses

Device Orientation API and Oculus Rift support

Advanced texture support (Bump, DDS)

Touch and virtual joysticks

Advanced features

Unleash babylon.js

Your Feedback is ImportantFill 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!