1. Les nouveautés autour de WebGL Pour Windows 8.1 et Windows Phone 8.1
Build 2014
9/16/2018
Les nouveautés autour de WebGL Pour Windows 8.1 et Windows Phone 8.1
David Rousset
HTML5 & Gaming Technical
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. WebGL dans Internet Explorer 11
Evolutions & nouveautés

3. Khronos Test Suite Pass Rate
Build 2014
9/16/2018
Khronos Test Suite Pass Rate
Version 0.93
April 2014
IE11 Update
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

4. Conformance Test Groups

5. WebGL sera disponible sur toutes les machines supportant IE11

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

7. Build 2014
9/16/2018
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

8. WebGL Spring14 Update 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

9. Anti-aliasing No antialiasing on DX9 devices
Build 2014
9/16/2018
Anti-aliasing
var ctx = canvas.getContext('webgl', { antialias: true} );
No antialiasing on DX9 devices
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

10. 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
float invmax = inversesqrt(max(dot(tangent, tangent), dot(binormal, binormal)));
return mat3(tangent * invmax, binormal * invmax, normal); }

11. Compressed textures gl.getExtension('WEBGL_compressed_texture_s3tc')
Build 2014
9/16/2018
Compressed textures
gl.getExtension('WEBGL_compressed_texture_s3tc')
gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);
© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. Construct 2
EaselJS

13. Babylon.js – 3D engine made easy

14. How to use Babylon.js http://www.babylonjs.com
Open source project (Available on Github)
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);

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

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

17. Démos babylon.js