Even though HoloBuilder is being developed with a strong focus on usability and intuitiveness, as an absolute beginner you might feel a little overwhelmed by its large variety of features and functions.
This is why we have created an easy to understand beginner tutorial that enables you to create amazing 3D presentations from scratch, without any previous knowledge, in a few simple steps.
Have quick look at this introduction and try it yourself with a short interactive tutorial at the end of this entry.
We think the guide provides everything you need to enjoy the usage of HoloBuilder, but if there should be anything that you are missing or if there are any questions left open, we would love to hear them. So please do not hesitate to contact us, whatever your concern might be.
The Definitive Guide to HoloBuilder
3D content is the future of the World Wide Web. Technologies to create 360° photospheres and similar content become widely available through smartphones. Also, devices such as Google’s Cardboard facilitate the consumption of augmented reality (AR) and virtual reality (VR) content in cheap and simple ways. Yet, there is still a lack of convenient means for end-users to also create and distribute AR and VR content.
HoloBuilder.com is a web platform that lets users create a set of 3D slides, or simply scenes, which can be thought of as equivalents to PowerPoint’s slides. This set of scenes— forming a HoloBuilder project — are thus a 3D presentation. A HoloBuilder project is commonly also called a Holo.
HoloBuilder supports 360° photospheres as well as custom 3D models and provides a wide variety of predefined 2D and 3D objects to insert in your 3D slides or scenes. Thus, it is incredibly easy for end-users to create great 360° and 3D content with HoloBuilder— there are absolutely no programming skills required!
Find below a list of the in this guide presented features – click on the according heading to jump directly to the information you are looking for, or browse through the complete guide to get an initial overview of the full potential of HoloBuilder.
Creating your first Holo
HoloBuilder from A to Z – The short Version
Add further scenes
Change photosphere/ AR marker
Add 2D Text/ 3D text
Add 2D/ 3D objects
Manipulate 2D/3D objects
Animate your 2D/ 3D objects
Add an action to your 2D/ 3D objects
Embedding & sharing your Holo
Upgrade your account
Creating your First Holo
When first launching HoloBuilder, you are presented with a menu that lets you select the type of the initial scene format of your new Holo.
By default, the initial view of the menu shows the two available scene types:
- Virtual reality scenes: Add a “360° Photo Sphere” to encompass the slide in terms of a sphere (click here for a tutorial on how to take great 360° photos with your smartphone);
- Augmented reality scenes:
- ‘Without Marker‘ creates an empty 3D room;
- ‘Image Tracking‘ lets you add a two-dimensional image as marker that will be placed as a plain object at the center of the room (all additional 3D objects are then placed in relation to this image); and
- ‘Object Tracking‘ lets you add a three-dimensional model (in terms of a .cloudfile). A 3D object scan can be obtained through, e.g. the HoloBuilder Scanner App (Soon to be released!).
In particular, it’s possible to simply drag and drop multiple 360° photos directly onto the user interface, which will automatically add several photosphere scenes at once to your VR project.
HoloBuilder from A to Z – The short Version
Find below a list of HoloBuilder’s most important features and learn more about your possibilities with HoloBuilder!
Find the right comprehensive tutorial answering your every question in detail, or learn more about the latest news and updates on HoloBuilder.
In the left-hand sidebar, you can manage your Holos scenes. Rename and rearrange each scene individually in the scene overview.
- Rename: Each added scene will automatically be named with either the date/time of the sphere when it was shot or the number of the added scene. Click on the name to open the scene settings and add/change the name and description of the selected scene.
- Rearrange: Rearrange the linear order of your added scenes by dragging and dropping each scene accordingly to its’ place. Click on the symbol in the left upper corner of any scene preview and hold while dragging the preview up and down in the preview list.
Use the icons at the right border of the scene preview to delete a scene. Clone it, add or change the scene type (2D, 3D or 360° photosphere) and take a snapshot to set as the scenes’ preview thumbnail as illustrated above (features listed from the top down).
Hide () and expand () the scene overview at the upper right corner of the panel.
Adding further Scenes
To add a new scene to your Holo, you need to click on the plus button in the scene overview panel on the left-hand side. You can select any scene type to add to your current Holo.
Remove a single scene completely from your Holo by clicking on the trash bin on the right of the scene preview in the scene overview.
When creating a scene, you can set a fixed orientation of the scene for when it is being opened. This helps to set a focus of an individual scene or a direction when building a tour.
Open the scene overview in the left-hand sidebar. Rotate your scene to the right perspective, zoom in or out and click the camera icon at the right border of the scene preview to set the orientation of the scene.
Change photosphere/ AR marker
To exchange the sphere of an existing scene but keep the inserted 2D/3D objects, you have to delete the attached photosphere by clicking on the cloud symbol (‘remove sphere’) right at the scene preview in the left-hand sidebar. Add another photosphere to the selected scene in automatically opened dialog box. Your 2D/3D objects will not be removed and stay at the given position in the scene.
If you have an empty slide with no marker, e.g. photosphere, 3D model etc., you can set, e.g., a new photosphere by clicking on the marker symbol (‘add sphere/marker’). The marker symbol appears instead of the cloud icon if the photosphere or AR marker got removed or no marker was set to begin with (see Augmented Reality Scenes ’empty marker’ above).
Note: You can duplicate a scene to clone the inserted objects and add a new photosphere. This helps you, for example, to get an exact comparison of changes in your photospheres over a period of time (‘time-lapse’), while your scene specific 2D/3D objects stay preserved.
Note: To easily jump in between the time-lapse photospheres, add the ‘navigation panel’ in your advanced sharing options to your HoloPlayer design. Learn how to customize your sharing settings in HoloBuilder in our comprehensive tutorial.
Adjust the orientation of your added photosphere and straighten out tilted images. Click the rotation icon located in the working area to change to the ‘Rotate Sphere’ mode. Rotate your sphere in three dimensions to get the right perspective.
2D/ 3D Text
Add plain 2D text by clicking the “2D Text” button in the right-hand sidebar ( tab). In HoloBuilder rooms, the two-dimensional text always faces the camera. It can be arbitrarily styled in the provided rich text editor.
Three-dimensional text can be styled and added by clicking the “3D Text” button — as well in the right-hand sidebar ( tab). It is treated like any other 3D object. It is currently not possible to edit text (2D and 3D) after it has been inserted. Yet, this is a feature we are working on.
Learn more about 2D & 3D Text in HoloBuilder with the complete tutorial on “How to add 2D and 3D Text to your HoloBuilder Creations”.
2D/ 3D Models
By clicking the “Add Content” button in the right-hand sidebar ( tab) you can upload arbitrary two- and three-dimensional models. Click to add a 2D model or for 3D model upload. 2D models are simply images that are inserted into the slide and always face the camera (in analogy to 2D text). 2D models can be added as .jpg, .jpeg or .png file. 3D models need to be available as .dae or .obj file. In case your models are not available in one of these formats, you can convert them using the Open Asset Import Library.
If you have no 3D models present on your computer you can use our predefined models (“Arrows”, “Shapes”, “Textured Shapes”, “Tools” and “Icons”) that are provided in the right-hand sidebar ( tab) as well. Click on the according model category and drag & drop or simply click on the model you want to add to your scene.
Alternatively, you can make use of our integrated search box to find 3D models on the web. Since you have to first download these from external sites, they are not automatically added to your HoloBuilder project. However, you can directly drag & drop them from your browser’s download bar onto HoloBuilder’s “Add Object or Image” dialog box and they will be instantly added to your project. The correct file formats are preselected in our meta-search.
Learn more about adding 3D models to your HoloBuilder project with this comprehensive tutorial on ‘How to Add Custom 3D Models to Your Holos’.
Why not use this functionality to add some virtual furniture to a photo of your apartment?
Manipulate 2D/3D objects
Move, rotate and scale your added 2D and 3D objects to fit the AR or VR surroundings. Learn more about positioning, rotating and scaling your objects with this complete tutorial on ‘How to correctly Position, Rotate & Scale objects in HoloBuilder’.
Select an object you have added to your slide and set it in motion. Switch to the animations menu in the right-hand sidebar ( tab). Choose either one of the predefined animations or create your own custom animation, which you can compose with the basic motion options “rotate”, “scale” and “position”.
Bind objects in your slide to certain actions also called commands. Add a command to an object by clicking the rightmost icon at the top of the right-hand sidebar (tab). Select the object that shall perform the action as soon as it’s clicked and choose a command from the list in the menu – e.g. opening a website or opening slides for building interactive tours.
One of the most important functionalities of HoloBuilder is the ability to interlink slides. This way it is possible to, e.g., create a virtual tour of your house or apartment by displaying the appropriate HoloBuilder slide when a virtual “door” is clicked. To realize this, add an appropriate object that should be clicked to change to the next slide in your tour, then select the “Commands” tab as described in the previous paragraph. To interlink your slides, choose the command “Open slide” and enter the number of the slide that will be opened next when clicking the chosen object. You can find this number in the slide list of the left-hand sidebar (see image below).
After having edited your 3D presentation (or while you’re still at it), you can watch your project in player mode and have a preview of how it will look to the viewers. To change mode click the “play” icon in the right part of the top menu bar (the one above the actual editor).
While in player mode, you can switch back to editor mode by clicking the “edit” icon in the menu at the bottom of the player. Moreover, you can enable sensor usage if watching the 3D presentation on your mobile device (i.e., you move the orientation of the current slide by moving your device), fullscreen mode and stereo mode, which is intended for use with Google Cardboard. Share your project on social networks or embed it on your homepage.
Embedding & Sharing Your 3D Presentation
To share your 3D presentation, simply click the share icon in the top menu bar and copy/paste the URL from there or directly select the social network you want to share it on. Alternatively, HoloBuilder projects can be embedded on arbitrary web pages. For this, change to the “Advanced” sharing options and copy/paste the provided “Embed Code” into the HTML source code of the embedding website (e.g., your personal website or blog). Click here for an example of an embedded HoloBuilder project. Adjust the settings of the player when embedding it to your personal preferences. Learn more about ‘How to Customize the HoloPlayer Layout for Sharing your Holo’ in a complete tutorial.
Upgrade your account
Go to HoloBuilder.com/premium and choose your personal premium plan to profit from more individuality and privacy according to your needs.
Upgrade your account from Starter to Pro, Business or Business+. Take a look at the current additional advantages of each package:
- Pro: Brand your Holos with your company name, protect them from being copied and share unlisted Holos with only selected viewers.
- Business: You can not only brand your Holos but also remove the HoloBuilder Logo from the Player, share your Holos privately with exclusively selected members of your team on HoloBuilder and enjoy our priority support whenever you need it.
- Business+: Enjoy all the advantages and special features of the two packages enlisted above and additionally profit from a 30 minute One-on-One live tutorial to get your answers to every question right away.
Each of the three upgrades extends the additional features enlisted by the previous packages.
Your upgrade package will come with a given number of Premium Holos holding the upgrade specific features. You can extend or decrease your monthly Premium Holo number according to your needs.
Now it’s your turn! Take the following 360° photosphere by clicking the “Copy & Edit” button and saving the project as your own:
Download the 3D model of a palm tree:
and put them together on HoloBuilder.com. Your result could look something like this but it is up to you to put all components together as you wish:
Important answers to really get started!
Where can I find good photospheres?
Where can I find nice 3D models?
Note: When searching for 3D models, please be aware that you need .obj or .dae files to upload to HoloBuilder.
OK, please tell me, what the heck is OPC UA?
OPC UA is short for OPC Unified Architecture and according to Wikipedia it “is an industrial [machine-to-machine] communication protocol for interoperability developed by the OPC Foundation.” Hence, if you are just a normal end-user of HoloBuilder, it might not really be of relevance for you ;). To get an idea of what OPC UA does, please have a look at the following video.