SlideShare a Scribd company logo
1 of 16
Download to read offline
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:
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
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
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
Development Tools (cont’d)
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...
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)
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
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);
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

More Related Content

Recently uploaded

Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfkalichargn70th171
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsJean Silva
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfDrew Moseley
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxAndreas Kunz
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...OnePlan Solutions
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Anthony Dahanne
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtimeandrehoraa
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Angel Borroy López
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identityteam-WIBU
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slidesvaideheekore1
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...Technogeeks
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...Akihiro Suda
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonApplitools
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceBrainSell Technologies
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxRTS corp
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shardsChristopher Curtin
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 

Recently uploaded (20)

Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdfExploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
Exploring Selenium_Appium Frameworks for Seamless Integration with HeadSpin.pdf
 
Strategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero resultsStrategies for using alternative queries to mitigate zero results
Strategies for using alternative queries to mitigate zero results
 
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
 
Comparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdfComparing Linux OS Image Update Models - EOSS 2024.pdf
Comparing Linux OS Image Update Models - EOSS 2024.pdf
 
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptxUI5ers live - Custom Controls wrapping 3rd-party libs.pptx
UI5ers live - Custom Controls wrapping 3rd-party libs.pptx
 
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
Revolutionizing the Digital Transformation Office - Leveraging OnePlan’s AI a...
 
Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024Not a Kubernetes fan? The state of PaaS in 2024
Not a Kubernetes fan? The state of PaaS in 2024
 
SpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at RuntimeSpotFlow: Tracking Method Calls and States at Runtime
SpotFlow: Tracking Method Calls and States at Runtime
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
 
Post Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on IdentityPost Quantum Cryptography – The Impact on Identity
Post Quantum Cryptography – The Impact on Identity
 
Introduction to Firebase Workshop Slides
Introduction to Firebase Workshop SlidesIntroduction to Firebase Workshop Slides
Introduction to Firebase Workshop Slides
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...
 
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
20240415 [Container Plumbing Days] Usernetes Gen2 - Kubernetes in Rootless Do...
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + KobitonLeveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
Leveraging AI for Mobile App Testing on Real Devices | Applitools + Kobiton
 
CRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. SalesforceCRM Contender Series: HubSpot vs. Salesforce
CRM Contender Series: HubSpot vs. Salesforce
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptxThe Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
The Role of IoT and Sensor Technology in Cargo Cloud Solutions.pptx
 
2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards2024 DevNexus Patterns for Resiliency: Shuffle shards
2024 DevNexus Patterns for Resiliency: Shuffle shards
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 

Featured

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationErica Santiago
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming LanguageSimplilearn
 

Featured (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

HoloLens Development Tutorial Using the Buildwagon Platform

  • 1. A step by-step tutorial to start developing for the HoloLens using JavaScript Presentation by HoloLens Development Tutorial Using the platform
  • 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. 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. Development Tools Buildwagon online editor & emulator (a HoloLens device is optional) Holobuild Library
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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