Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
204 views

HoloLens Development Tutorial Using The Buildwagon Platform

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. Chapter 1 is an introduction, chapter 2 will vover user interaction, chapter 3 will explore user components, chapter 4 will take us through models, chapter 5 will focus on sound, and the last chapter (6) will introduce world interaction.

Uploaded by

Johnny El Hage
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
204 views

HoloLens Development Tutorial Using The Buildwagon Platform

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. Chapter 1 is an introduction, chapter 2 will vover user interaction, chapter 3 will explore user components, chapter 4 will take us through models, chapter 5 will focus on sound, and the last chapter (6) will introduce world interaction.

Uploaded by

Johnny El Hage
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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.

https://buildwagon.com
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.

https://Buildwagon.com/documenation
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 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);
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 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?


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.

| boxmesh.position.set (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 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

You might also like