Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A step by-step tutorial to start developing for the HoloLens using
JavaScript
Presentation by
HoloLens Development Tutoria...
Presentation Roadmap
Chapter 1:
Introduction
The basics
Chapter 2:
User Interaction
Gaze, Gestures,
and Speech
Chapter 3:
...
What is the HoloLens?
Microsoft Hololens is a holographic computer that you wear
on your head and enables your digital wor...
Development Tools
Buildwagon online editor & emulator
(a HoloLens device is optional)
Holobuild Library
Buildwagon Editor & Emulator:
Runs inside your browser and allows you to type your HoloLens code and see
the results immed...
HoloBuild Library:
Main library used when
developing using Buildwagon.
The Library helps us create
dynamic holograms and
p...
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...
Let’s Start Coding
Set the Space:
| var holospace = new HoloBuild.HoloSpace();
Set the Camera, which is the HoloLens,
and ...
Holograms
The concept of Hologram is core to our work.
A hologram is made up of “a specific shape”, also called a “geometr...
The geometry should be covered with a material
Once a geometry is covered by a specific material, we call it a hologram [=...
Now that we have our landscape set,
let’s start adding shapes.
Whenever you want to add a new shape, follow the following ...
Let’s add a box
Whenever you want to add a new shape, follow the following process. The process is similar
regardless of t...
Holobuild Library
From the Holobuild library you can get the code of
adding shapes. In our case to add a box, the code is
...
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 o...
Rotate
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
t...
for chapter 2!
In the meantime, check Buildwagon at www.buildwagon.com
Explore the HoloBuild library at: https://www.build...
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

HoloLens Development Tutorial Using the Buildwagon Platform

Download to read offline

Chapter one of a step by step course to guide you through the development of holograms on the Hololens device using JavaScript language. The course is based on the Buildwagon development platform which makes the process simpler, faster, and easier. For more information, check the hololens development tutorial at https://buildwagon.com/guide.html

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

HoloLens Development Tutorial Using the Buildwagon Platform

  1. 1. A step by-step tutorial to start developing for the HoloLens using JavaScript Presentation by HoloLens Development Tutorial Using the platform
  2. 2. Presentation Roadmap Chapter 1: Introduction The basics Chapter 2: User Interaction Gaze, Gestures, and Speech Chapter 3: User Components Label, Button, Toolbar, Dialog… Chapter 4: Models Models & Animation Chapter 5: Sound Spatial Sound Chapter 6: World Interaction Spatial Mapping Spatial Anchoring
  3. 3. 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
  4. 4. Development Tools Buildwagon online editor & emulator (a HoloLens device is optional) Holobuild Library
  5. 5. 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. https://buildwagon.com Development Tools (cont’d)
  6. 6. 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. https://Buildwagon.com/documenation Development Tools (cont’d)
  7. 7. 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.
  8. 8. Let’s Start Coding Set the Space: | var holospace = new HoloBuild.HoloSpace(); Set the Camera, which is the HoloLens, and where it is looking. | var holocamera = new HoloBuild.HoloCamera(); 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 HoloBuild.HoloRenderer(); | holorenderer.render( holospace, holocamera);
  9. 9. 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...
  10. 10. 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. Holograms (cont’d)
  11. 11. 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?
  12. 12. 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 HoloBuild.HoloBoxGeometry( 0.1, 0.2, 0.3 ); Define the new material that you want to use to cover the shape: | var boxmaterial = new HoloBuild.HoloMeshBasicMaterial( { color: 'red' } ); Dress the geometric shape with the cover to create a hologram variable that we will call a HoloMesh: |var boxmesh= new HoloBuild.HoloMesh( boxgeometry, boxmaterial ); Add the new shape to the space: | holospace.add(boxmesh); Where am I getting those codes from?
  13. 13. 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
  14. 14. 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!!
  15. 15. Rotate 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. 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. | boxmesh.position.set (0.05, 0.15, 0);
  16. 16. for chapter 2! In the meantime, check Buildwagon at www.buildwagon.com Explore the HoloBuild library at: https://www.buildwagon.com/documentation Buildwagon is a product by BinariesLid: www.binarieslid.com info@buildwagon.com

Chapter one of a step by step course to guide you through the development of holograms on the Hololens device using JavaScript language. The course is based on the Buildwagon development platform which makes the process simpler, faster, and easier. For more information, check the hololens development tutorial at https://buildwagon.com/guide.html

Views

Total views

83

On Slideshare

0

From embeds

0

Number of embeds

1

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×