HoloJS at a Glance

Microsoft HoloLens, introduced in 2015, is the world’s first untethered holographic computer. Apps are written in DirectX/C++ or with the help of Unity. Almost two years later, Microsoft released HoloJS, a framework for creating holographic applications in JavaScript and WebGL. Let’s have a quick look at HoloJS: is it ready for production?

Transcript

1. HoloJS at a Glance KarlsruheJS Christian Liebel @chris_liebel christian.liebel@thinktecture.com
2. Follow me: @chris_liebel Email: christian.liebel @thinktecture.com Blogs: christianliebel.com liebel.io/ueberX Cross- Platform & Cloud KarlsruheJS HoloJS at a Glance
3. What to Expect? KarlsruheJS HoloJS at a Glance I tried HoloJS for evaluation purposes Migration of a small existing THREE.js sample “Cross-platform in a new dimension” Does it work? Is it ready for production?
4. Microsoft HoloLens https://www.microsoft.com/de-de/hololens KarlsruheJS HoloJS at a Glance
5. Inertial Measurement Unit Windows Mixed Reality Holographic Processing Unit Untethered Head Mounted Device KarlsruheJS HoloJS at a Glance
6. Reality–Virtuality Continuum (Milgram et al. 1994) Reality Virtuality Augmented Reality Augmented Virtuality.. HoloLens HTC Vive Mixed Reality ARKit KarlsruheJS HoloJS at a Glance
7. Application Model Universal Windows Platform Windows 10 Windows 10 Windows 10 Mobile Xbox One HoloLens Windows 10 UWP App KarlsruheJS HoloJS at a Glance
8. C++ DirectX HoloJS Unity C# SharpDX KarlsruheJS HoloJS at a Glance
9. HoloJS JavaScript WebGL Open-source Cross-platform Unity C# Multiple renderers Commercial Cross-platform KarlsruheJS HoloJS at a Glance
10. HoloJS KarlsruheJS HoloJS at a Glance Runs WebGL content as an immersive app Transpiles WebGL to DirectX via ANGLE Contains Microsoft’s JS engine ChakraCore Supports native WebGL and THREE.js Updates the camera position (head tracking) Open-source: liebel.io/holojs
11. WebGL Web Graphics Library KarlsruheJS HoloJS at a Glance Canvas Context Hardware-accelerated 3D graphics Based on OpenGL for Embedded Systems WebGL 1.0 = OpenGL ES 2.0 (86.7%*) WebGL 2.0 = OpenGL ES 3.0 (55.3%*) * Browser support data for Germany as of September 6, 2017 https://caniuse.com/#search=webgl
12. ANGLE Almost Native Graphics Layer Engine KarlsruheJS HoloJS at a Glance HoloLens is a DirectX device OpenGL calls have to be transpiled Open-source project by Google Used by Chrome and Firefox on Windows
13. THREE.js KarlsruheJS HoloJS at a Glance Native WebGL is complex Open-source JavaScript library High-level API abstracting WebGL Concepts: Scene, Camera, Geography, Material
14. HoloJS Architecture KarlsruheJS HoloJS at a Glance HoloJS HoloLens Polyfills ANGLE JS File Chakra Core
15. HoloJS KarlsruheJS HoloJS at a Glance Provides artificial Canvas3D element Provides viewMatrix on window object (inside-out head tracking) Keeps holograms stable in the environment Provided as HolographicCamera for THREE.js
16. KarlsruheJS HoloJS at a Glance Cross-Platform Gamepad Holographic? THREE.js liebel.io/2d3dgp
17. KarlsruheJS HoloJS at a Glance container = document.getElementsByTagName('canvas')[0]; camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500); camera.position.set(0, 0, 30); scene = new THREE.Scene(); // Sphere var textureLoader = new THREE.TextureLoader(); textureLoader.load('assets/earth.jpg', function (texture) { var geometry = new THREE.SphereGeometry(5, 32, 32); var material = new THREE.MeshLambertMaterial({map: texture}); var sphere = new THREE.Mesh(geometry, material); sphere.rotation.y = 250 * Math.PI / 180; scene.add(sphere); }); // Stars var starsCount = 2500;
18. KarlsruheJS HoloJS at a Glance
19. Is it cool? YES KarlsruheJS HoloJS at a Glance
20. Is it ready for production? NO KarlsruheJS HoloJS at a Glance
21. Drawbacks KarlsruheJS HoloJS at a Glance Bundles the entire ANGLE/Chakra libraries Troublesome debugging (console.log) Device deployment takes a long time Incompatible to some THREE.js features Mixed Reality Capture is buggy Unstable (AddressViolationException) Lacks a lot of features known from Unity
22. Summary KarlsruheJS HoloJS at a Glance HoloJS is a cool (side) project Runs (suitable) existing THREE.js apps Cross-platform on the next level Microsoft’s recommendation: Unity Light years away from Unity’s feature set and development comfort
23. Thank you for listening! Christian Liebel @chris_liebel christian.liebel@thinktecture.com