0
Shipping WebGLin Internet
Explorer
The hardparts& the easy parts
2013 Recap
• Simple goals:
– Security
– Interoperability
– Breadth of hardware support
• API support mainly limited by tim...
IE11WebGL: KhronosTest Suite Pass Rate
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
WebGL is on all IE11 devices
(We’d love to see more mobileWebGL content)
WebGL in Internet Explorer 11
DirectX 11 Runtime
GPU Driver or Software Rendering
GLSL Parser
GLSL Verifier
Scripting Engi...
Shader Compilation Pipeline
GLSL
preprocessor
•Token length
•Program length
•Character validation
GLSL parse to
AST
•Ident...
Selection Operator: Problem
X = A ? B : C
GLSL only evaluates a single result expression and the first expression cannot b...
Selection Operator:Vectors
{ true, false } ? { 1, 2 } : { 3, 4} = { 1, 4 }
• Both second and third expressions required fo...
Selection Operator: Solution
• HLSL selection operator cannot be used, even if the expressions are restricted
• Transforma...
BufferValidation
• All validation crucially important withWebGL to provide robust security
• D3D10+ specification has a cl...
aka ‘Spring 14 Update’
• Compressed textures
• Stencil buffers
• Standard derivatives extension
• Anti-aliasing
• More GLS...
IE11 v0.94WebGL renderer
aka ‘Summer 14 Update’, ships onTuesday
• Instancing extension (DX10+ only)
• failIfMajorPerforma...
Up next…
• The IE team has joined the KhronosWebGLWG
• Video textures
• Your feedback is very helpful!
BABYLON.JS
WebGLmade easy
davca@microsoft.com - @deltakosh - http://aka.ms/davca
DAVIDCATUHE
Senior ProgramManager –IE/Open Web Standards
Developer ...
FIRSTCONTACT
Hello worldBabylon.js
LEARN AND EXPERIMENT
Playground
CREATE YOUROWN SHADER
CYOS
CREATING ASSETS
Using 3dsmax
PLAYING WITH INPUT
Touch
Camera based on
pointer events
Device
Orientation
Camera based on
Device
Orientation API
Virtual
...
COLLISIONS & PHYSICS
USEFUL LINKS
http://www.babylonjs.com
http://www.babylonjs.com/playground
http://www.babylonjs.com/cyos
https://github.com...
THANK
YOU!
IE WebGL and Babylon.js (Web3D 2014)
Upcoming SlideShare
Loading in...5
×

IE WebGL and Babylon.js (Web3D 2014)

898

Published on

This slides were presented during Web3D 2014 conference

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

No Downloads
Views
Total Views
898
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 97% on our internal builds now; another update in summer
    Don’t worry about the version number; we’re pushing out the newest version
  • Step 0 – step 4
  • Select code from Playground and copy/paste to previous page
  • Step 5
  • Engine demo
    Step 6 / 7
  • Exemple de cameras
    Step 8 – 1
    Step 8 - 2
  • Step 9
    http://www.babylonjs.com/playground/?9
  • Transcript of "IE WebGL and Babylon.js (Web3D 2014)"

    1. 1. Shipping WebGLin Internet Explorer The hardparts& the easy parts
    2. 2. 2013 Recap • Simple goals: – Security – Interoperability – Breadth of hardware support • API support mainly limited by time • Initial implementation shipped in November
    3. 3. IE11WebGL: KhronosTest Suite Pass Rate 0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
    4. 4. WebGL is on all IE11 devices (We’d love to see more mobileWebGL content)
    5. 5. WebGL in Internet Explorer 11 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
    6. 6. Shader Compilation Pipeline GLSL preprocessor •Token length •Program length •Character validation GLSL parse to AST •Identifiers replaced •Syntax validation Tree verification •Language verification •Complexity validation Language transform •Selection operators •Other GLSL -> HLSL HLSL output •Input to HLSL compiler
    7. 7. Selection Operator: Problem X = A ? B : C GLSL only evaluates a single result expression and the first expression cannot be a vector – A must evaluate to a Boolean scalar – Only B or C is evaluated HLSL evaluates all expressions and can take a vector expression as input – A can be a Boolean vector – Both B and C are evaluated (since values from both may be needed)
    8. 8. Selection Operator:Vectors { true, false } ? { 1, 2 } : { 3, 4} = { 1, 4 } • Both second and third expressions required for answer • Therefore both expressions always evaluated • GLSL does not allow vectors so does not need both evaluations
    9. 9. Selection Operator: Solution • HLSL selection operator cannot be used, even if the expressions are restricted • Transformation into if statements is the path we took • Simple concept, but taking to completion is nontrivial • Function parameters and global initializers are the long tail X = Foo(A ? B : C);
    10. 10. BufferValidation • All validation crucially important withWebGL to provide robust security • D3D10+ specification has a clear way to deal with out of bounds indices with no memory access issues • Taking advantage of this is a huge performance boost when dealing with these buffers
    11. 11. aka ‘Spring 14 Update’ • Compressed textures • Stencil buffers • Standard derivatives extension • Anti-aliasing • More GLSL conformance (structs, inout, constructors) • GLSL Point-size support (DX10+ only) • GLSL Frontfacing support • Support for alphaWebGLContextAttribute • Non-float vertices • Support for LUMINANCE, LUMINANCE_ALPHA,ALPHA textures • vertexAttrib{1,2,3,4}f[v] methods IE11 v0.93WebGL renderer
    12. 12. IE11 v0.94WebGL renderer aka ‘Summer 14 Update’, ships onTuesday • Instancing extension (DX10+ only) • failIfMajorPerformanceCaveat context attribute • Triangle fans and line loops (emulated) • 16-bit textures support (emulated) • UNSIGNED_BYTE element arrays (emulated) • Moving moreWindows 7 machines to hardware rendering
    13. 13. Up next… • The IE team has joined the KhronosWebGLWG • Video textures • Your feedback is very helpful!
    14. 14. BABYLON.JS WebGLmade easy
    15. 15. davca@microsoft.com - @deltakosh - http://aka.ms/davca DAVIDCATUHE Senior ProgramManager –IE/Open Web Standards Developer Experience and Evangelism
    16. 16. FIRSTCONTACT Hello worldBabylon.js
    17. 17. LEARN AND EXPERIMENT Playground
    18. 18. CREATE YOUROWN SHADER CYOS
    19. 19. CREATING ASSETS Using 3dsmax
    20. 20. PLAYING WITH INPUT Touch Camera based on pointer events Device Orientation Camera based on Device Orientation API Virtual Joysticks Using pointer events, this camera generates two joysticks on top of the scene Anaglyph Use this camera with Red/Green glasses Oculus Control camera orientation with Oculus Rift device Gamepad Use your gamepad to control your camera
    21. 21. COLLISIONS & PHYSICS
    22. 22. USEFUL LINKS http://www.babylonjs.com http://www.babylonjs.com/playground http://www.babylonjs.com/cyos https://github.com/BabylonJS/Babylon.js/wiki http://www.html5gamedevs.com/forum/16-babylonjs
    23. 23. THANK YOU!
    1. A particular slide catching your eye?

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

    ×