Les nouveautés autour de WebGLPour Windows 8.1 et Windows Phone 8.1

David RoussetHTML5 & Gaming Technical Evangelist @davrous

Evolutions & nouveautés

WebGL dans Internet Explorer 11

Khronos Test Suite Pass Rate

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Version 0.90

June 2013

IE11 Developer Preview

Version 0.91October

2013

IE11 Release Preview

Version 0.92November

2013

IE11 Release

Version 0.93

April 2014

IE11 Update

attrib

s

buffer

s

canv

as

cont

ext

exte

nsio

ns glsl

limits

misc

mor

e

ogle

s

prog

ram

s

read

ing

rend

erbu

ffers

rend

erin

gst

ate

text

ures

type

darra

ys

unifo

rms

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

100%

Conformance Test Groups

WebGL sera disponible sur toutes les machines supportant IE11

WebGL dans 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

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 textures

gl.getExtension('WEBGL_compressed_texture_s3tc')

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

Construct 2

EaselJS

Babylon.js – 3D engine made easy

Open source project (Available on Github)

http://www.babylonjs.comhttps://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);

How to use 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

Démos babylon.js