Les nouveautés autour de WebGL Pour Windows 8.1 et Windows Phone 8.1 David Rousset HTML5 & Gaming Technical Evangelist @davrous
Jan 15, 2015
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