Back from BUILD - WebGL

690 views

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
690
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
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

×