1. Les nouveautés autour de WebGL
David Rousset
HTML5 & Gaming Technical Evangelist @davrous

3. 0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

4. 0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

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

8. 











9. var ctx = canvas.getContext('webgl', { antialias: true} );
No antialiasing on DX9 devices

10. #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;

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

12. EaselJS

14. 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);

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

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