Les nouveautés autour de WebGL
David Rousset
HTML5 & Gaming Technical Evangelist @davrous
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
DirectX 11 Runtime
GPU Driver or Software Rendering
GLSL Parser
GLSL Verifier
Scripting Engine
GL API Translation
D3DCompi...











var ctx = canvas.getContext('webgl', { antialias: true} );
No antialiasing on DX9 devices
#extension GL_OES_standard_derivatives : enable
…
mat3 cotangent_frame(vec3 normal, vec3 p, vec2 uv)
{
// get edge vectors...
gl.getExtension('WEBGL_compressed_texture_s3tc')
gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, ...
EaselJS
Open source project (Available on Github)
http://www.babylonjs.com
https://github.com/babylonjs/babylon.js
How to use it? ...
Offline support
with IndexedDB
Network optimizations
Incremental loading
Blender exporter
Design & render + Sandbox
babylo...
Smart shaders engine and
postprocesses
Device Orientation API and
Oculus Rift support
Advanced texture support
(Bump, DDS)...
Back from BUILD -  WebGL
Back from BUILD -  WebGL
Back from BUILD -  WebGL
Back from BUILD -  WebGL
Back from BUILD -  WebGL
Upcoming SlideShare
Loading in...5
×

Back from BUILD - WebGL

230

Published on

Published in: Software, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
230
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Back from BUILD - WebGL

  1. 1. Les nouveautés autour de WebGL David Rousset HTML5 & Gaming Technical Evangelist @davrous
  2. 2. 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
  3. 3. 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
  4. 4. 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
  5. 5.           
  6. 6. var ctx = canvas.getContext('webgl', { antialias: true} ); No antialiasing on DX9 devices
  7. 7. #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;
  8. 8. gl.getExtension('WEBGL_compressed_texture_s3tc') gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);
  9. 9. EaselJS
  10. 10. 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);
  11. 11. Offline support with IndexedDB Network optimizations Incremental loading Blender exporter Design & render + Sandbox babylonjs.com/sandbox Complete collisions and physics engine Advanced features
  12. 12. Smart shaders engine and postprocesses Device Orientation API and Oculus Rift support Advanced texture support (Bump, DDS) Touch and virtual joysticks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×