Back from BUILD -  WebGL
Upcoming SlideShare
Loading in...5
×
 

Back from BUILD - WebGL

on

  • 142 views

 

Statistics

Views

Total Views
142
Views on SlideShare
138
Embed Views
4

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 4

http://www.slideee.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Back from BUILD -  WebGL Back from BUILD - WebGL Presentation Transcript

    • 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 D3DCompiler WebGL-equivalent DX API calls GLSL Translator GLSL Shader source Safe verified HLSL WebGL context API calls
    •           
    • 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 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;
    • gl.getExtension('WEBGL_compressed_texture_s3tc') gl.compressedTexImage2D(gl.TEXTURE_2D, i, internalFormat, width, height, 0, byteArray);
    • EaselJS
    • 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);
    • Offline support with IndexedDB Network optimizations Incremental loading Blender exporter Design & render + Sandbox babylonjs.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