IE WebGL and Babylon.js (Web3D 2014)
Upcoming SlideShare
Loading in...5

IE WebGL and Babylon.js (Web3D 2014)



This slides were presented during Web3D 2014 conference

This slides were presented during Web3D 2014 conference



Total Views
Views on SlideShare
Embed Views



3 Embeds 59 31 21 7



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 97% on our internal builds now; another update in summer <br /> Don’t worry about the version number; we’re pushing out the newest version <br />
  • Step 0 – step 4
  • Select code from Playground and copy/paste to previous page
  • Step 5 <br />
  • Engine demo <br /> Step 6 / 7 <br />
  • Exemple de cameras <br /> Step 8 – 1 <br /> Step 8 - 2
  • Step 9 <br />

IE WebGL and Babylon.js (Web3D 2014) IE WebGL and Babylon.js (Web3D 2014) Presentation Transcript

  • Shipping WebGLin Internet Explorer The hardparts& the easy parts
  • 2013 Recap • Simple goals: – Security – Interoperability – Breadth of hardware support • API support mainly limited by time • Initial implementation shipped in November
  • 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 Engine GL API Translation D3DCompiler WebGL-equivalent DX API calls GLSL Translator GLSL Shader 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: 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)
  • 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);
  • 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
  • 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
  • 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
  • Up next… • The IE team has joined the KhronosWebGLWG • Video textures • Your feedback is very helpful!
  • BABYLON.JS WebGLmade easy
  • - @deltakosh - DAVIDCATUHE Senior ProgramManager –IE/Open Web Standards Developer Experience and Evangelism
  • FIRSTCONTACT Hello worldBabylon.js
  • CREATING ASSETS Using 3dsmax
  • 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