Embed Size (px)
DESCRIPTION
This slides were presented during Web3D 2014 conference
Citation preview
Shipping WebGL in Internet ExplorerThe hard parts & the easy parts
2013 Recap• Simple goals:– Security– Interoperability– Breadth of hardware support
• API support mainly limited by time• Initial implementation shipped in
November
IE11 WebGL: Khronos Test Suite Pass Rate
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
Version 0.90June 2013
IE11 Developer Preview
Version 0.91October 2013
IE11 Release Pre-view
Version 0.92November
2013
IE11 Release
Version 0.93
April 2014
IE11 Update
WebGL is on all IE11 devices
(We’d love to see more mobile WebGL content)
WebGL in Internet Explorer 11
DirectX 11 Runtime
GPU Driver or Software Rendering
GLSL Parser
GLSL Verifier
Scripting Engine
GL API Translation
D3DCompilerWebGL-equivalent DX API calls
GLSL Translator
GLSLShader source
Safe verified HLSL
WebGL context API calls
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
Selection Operator: ProblemX = 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)
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
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);
Buffer Validation• All validation crucially important with WebGL 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
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 alpha WebGLContextAttribute • Non-float vertices • Support for LUMINANCE, LUMINANCE_ALPHA, ALPHA textures• vertexAttrib{1,2,3,4}f[v] methods
IE11 v0.93 WebGL renderer
IE11 v0.94 WebGL rendereraka ‘Summer 14 Update’, ships on Tuesday
• Instancing extension (DX10+ only)• failIfMajorPerformanceCaveat context attribute• Triangle fans and line loops (emulated)• 16-bit textures support (emulated)• UNSIGNED_BYTE element arrays (emulated)
• Moving more Windows 7 machines to hardware rendering
Up next…• The IE team has joined the Khronos
WebGL WG
• Video textures• Your feedback is very helpful!
BABYLON.JSWebGL made easy
[email protected] - @deltakosh - http://aka.ms/davca
DAVIDCATUHESenior Program Manager – IE / Open Web StandardsDeveloper Experience and Evangelism
FIRST CONTACTHello world Babylon.js
LEARN AND EXPERIMENTPlayground
CREATE YOUR OWN SHADERCYOS
CREATING ASSETSUsing 3dsmax
PLAYING WITH INPUT
Touch
Camera based on pointer events
Device Orientati
onCamera based on Device
Orientation API
Virtual Joystick
sUsing 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
COLLISIONS & PHYSICS
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
THANK
YOU!
