Your SlideShare is downloading. ×
IE WebGL and Babylon.js (Web3D 2014)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

IE WebGL and Babylon.js (Web3D 2014)

833

Published on

This slides were presented during Web3D 2014 conference

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
833
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 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
    • 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. 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. Up next… • The IE team has joined the KhronosWebGLWG • Video textures • Your feedback is very helpful!
    • 14. BABYLON.JS WebGLmade easy
    • 15. davca@microsoft.com - @deltakosh - http://aka.ms/davca DAVIDCATUHE Senior ProgramManager –IE/Open Web Standards Developer Experience and Evangelism
    • 16. FIRSTCONTACT Hello worldBabylon.js
    • 17. LEARN AND EXPERIMENT Playground
    • 18. CREATE YOUROWN SHADER CYOS
    • 19. CREATING ASSETS Using 3dsmax
    • 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. COLLISIONS & PHYSICS
    • 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. THANK YOU!

    ×