This slides were presented during Web3D 2014 conference

1. Shipping WebGLin Internet
Explorer
The hardparts& the easy parts

2. 2013 Recap
• Simple goals:
– Security
– Interoperability
– Breadth of hardware support
• API support mainly limited by time
• Initial implementation shipped in November

3. IE11WebGL: KhronosTest Suite Pass Rate
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

4. WebGL is on all IE11 devices
(We’d love to see more mobileWebGL content)

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. 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. 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. 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. 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. 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

12. 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

13. 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

14. Up next…
• The IE team has joined the KhronosWebGLWG
• Video textures
• Your feedback is very helpful!

15. BABYLON.JS
WebGLmade easy

16. davca@microsoft.com - @deltakosh - http://aka.ms/davca
DAVIDCATUHE
Senior ProgramManager –IE/Open Web Standards
Developer Experience and Evangelism

17. FIRSTCONTACT
Hello worldBabylon.js

18. LEARN AND EXPERIMENT
Playground

19. CREATE YOUROWN SHADER
CYOS

20. CREATING ASSETS
Using 3dsmax

21. 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

22. COLLISIONS & PHYSICS

23. 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

24. THANK
YOU!