A step by-step tutorial to start developing for the HoloLens using
JavaScript
Presentation by
HoloLens Development Tutorial
Using the platform
Presentation Roadmap
Chapter 1: Chapter 2:
Introduction User Interaction
The basics Gaze, Gestures,
and Speech
Chapter 3: Chapter 4:
User Components Models
Label, Button, Models &
Toolbar, Dialog… Animation
Chapter 6:
Chapter 5:
World Interaction
Sound
Spatial Mapping
Spatial Sound
Spatial Anchoring
What is the HoloLens?
Microsoft Hololens is a holographic computer that you wear
on your head and enables your digital world to interact with
your real world.
Holographic Lens
Intel Atom CPU
Sensors
Holographic Processing Unit
Development Tools
Buildwagon online editor & emulator
(a HoloLens device is optional)
Holobuild Library
Development Tools (cont’d)
Buildwagon Editor & Emulator:
Runs inside your browser and allows you to type your HoloLens code and see
the results immediately.
You can choose to see the
results either on your
HoloLens or on the online
emulator directly.
[Link]
Development Tools (cont’d)
HoloBuild Library:
Main library used when
developing using Buildwagon.
The Library helps us create
dynamic holograms and
provides a collection of
components intended to
accelerate the development
of HoloLens applications.
[Link]
Let’s Get Started
The three main concepts that you need to get started is:
1. A Space
2. A Camera
3. A Renderer
A Space is where your hologram can live & where any action happens.
A Camera represents the HoloLens device and where it is looking at in relation to your space.
The person wearing the HoloLens decides where the camera is looking.
A Renderer is what draw (or render) the space content onto the camera.
Let’s Start Coding
Set the Space:
| var holospace = new [Link]();
Set the Camera, which is the HoloLens,
and where it is looking.
| var holocamera = new [Link]();
With the space and the camera in place,
we need to define a renderer to draw
(or render) the space on that camera:
| var holorenderer = new [Link]();
| [Link]( holospace, holocamera);
Holograms
The concept of Hologram is core to our work.
A hologram is made up of “a specific shape”, also called a “geometry”.
A cube is an example of a geometry. Other examples of geometry are spheres, prisms...
Holograms (cont’d)
The geometry should be covered with a material
Once a geometry is covered by a specific material, we call it a hologram [= geometry (shape)
+ material (cover) ]
In our context, a hologram, a 3D object, or a holomesh can be used interchangeably & they
mean the same thing.
Now that we have our landscape set,
let’s start adding shapes.
Whenever you want to add a new shape, follow the following process.
The process is similar regardless of the shape's details. It involves the following steps:
Define the new geometric shape.
Define the new material that you want to use to cover the shape
Dress the geometric shape with the cover to create a hologram (connect them together as a
mesh)
Add the new shape to the space
How does this look in code?
Let’s add a box
Whenever you want to add a new shape, follow the following process. The process is similar
regardless of the shape's details. It involves the following steps:
Define the new geometric shape:
| var boxgeometry = new [Link]( 0.1, 0.2, 0.3 );
Define the new material that you want to use to cover the shape:
| var boxmaterial = new [Link]( { color: 'red' } );
Dress the geometric shape with the cover to create a hologram variable that we will call a
HoloMesh:
|var boxmesh= new [Link]( boxgeometry, boxmaterial );
Add the new shape to the space:
| [Link](boxmesh);
Where am I getting those codes from?
Holobuild Library
From the Holobuild library you can get the code of
adding shapes. In our case to add a box, the code is
HoloBoxGeometry.
The HoloBoxGeometry is the component of a
3 dimensional box. It involves defining the
3 parameters of a box: Width, Height, and Depth.
The dimensions of our box is reflected by the
3 parameters accordingly.
To cover the HoloBoxGeometry with a material, you can use one of the materials available in
the Holobuild library such as HoloMeshBasicMaterial. The material describes the geometry
appearance such as its ‘color’ (one parameter of the material element).
In this example, we have chosen ‘red’ for the material color.
Let’s look at the code again
Now it all makes sense:
I can see the box, but it looks 2 dimensional
This is because we are looking at it from one side only; to see more than one side,
we either need to move camera or rotate it. Let’s rotate it!!
Rotate
If you put the below code, the mesh will rotate 0.05 meters on the x-axis and 0.15 meters on
the y-axis respectively. This will make it visible in a 3D setting.
| [Link] (0.05, 0.15, 0);
0.5, 0.15, 0 are the
3D coordinates (x,y,z).
This is what we are going
to explain in our next
chapter in addition
to textures, animation loops,
and user interaction.
for chapter 2!
In the meantime, check Buildwagon at [Link]
Explore the HoloBuild library at: [Link]
Buildwagon is a product by BinariesLid: [Link]
info@[Link]
