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 Evangelist @davrous © 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.

WebGL dans Internet Explorer 11 Evolutions & nouveautés

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.

Conformance Test Groups

WebGL sera disponible sur toutes les machines supportant IE11

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

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.

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

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.

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

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.

Construct 2 EaselJS

Babylon.js – 3D engine made easy

How to use Babylon.js http://www.babylonjs.com 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);

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

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

Démos babylon.js