Introduction to Hauzd - Part 3

Introduction to Hauzd - Part 3


Para ver el video con subtítulos en español , actívalos en youtube.

Introduction to Hauzd - Part 3

Welcome to the third part of our Learning Curve! Missed the second?  GO HERE.

in this Tutorial we will learn how to assembly our scenes and use hauzd Engine to create your 3d Presentation!.

If you haven´t download yet hauzd Editor, you can go to your admin page and find the Download button in the center of your the screen, or use THIS DIRECT LINK , the install process will be easy and fast. After its done, you can open it and start working right away.

The first thing you will need to do is to log in with your hauzd account, the engine will automatically retrieve all your admin projects and you can open the project you want to work on. 


Two windows will be opened, The project window , where you will manage and set up most of your your project and the log window where you will find information about the actions you do.





When you start a new project , you can set up your Local folder , this will help the engine to look for your files into the directory you created for them, but you can also keep all in just one folder and use drag and drop to import your assets.

You can keep all your files in just one folder and still use the one click import and drag and drop, but for better organization, we recommend to use this structure:



Architecture , is where your fbx scenes and gallery images will be stored, you can also create a MAX folder inside of it so the hauzd script can automatically create the fbx in the right folder.

Surroundings is where you will set up your fbx files related to location.

User Interface , this folder will have your UI assets, .ai and each size for it, hauzdUI script will be useful to export your assets from illustrator to the correct folder.

Application is where you will store your app web logos.



To start building up your app, you need to create your first scene Blueprint, this data will contain scene information such as camera settings, Ambient Occlusion and the light configurations, set your name and type and you are ready to go, keep in mind that you can´t use a number for the first character of any name.

Suns and Light groups will manage some interesting settings for your project, you can use up to 3 groups of lights in your scene and we recommend only use of 3 suns.

After your first bake, you can change in real time certain lights contribution such as direct, Indirect and ambient light, no need to rebake again!.

You can create any number of Blueprints with any different settings if you need it for your project. 

Click OK and changes will be applied, now you need to create your scene, this must have the same name of your fbx scene and assigned to your recently created Scene Blueprint, after this step, you can start importing your scenes with just a single click.

You can View your scenes and bake the lights from this module.



For this tutorial we will add a Building Scene, a Keyplan, an 2 units using our sample project assets.

We can repeat the process for each one, making sure we´re using the right blueprint for the right type of scene and the correct name matching the fbx scene.


After finish, we can choose to do a full bake for this scenes or a bake draft, it will be quicker but lower in quality.


We call a "NODE" all architectural element that will be a part of the flow of your app, similar as we already did in scenes, we need Blueprint to define settings and the hierarchy to define Structure.



Node blueprints specifies things like which gallery, list, specification etc. to use. We can also add various properties that we want to control from admin. For example, you will probably want to add "beds" and "baths" properties to apartment blueprint, this settings needs to be defined only one time in the admin Real Time Control.



After the editor configuration is saved, the data will be updated in the admin, you can modify there the values for the properties you set, all changes will be applied in real time!.



in Node Hierarchy is where we will set the order of our scenes, we need to add a parent which in this case, it will be the building scene and start adding the childs.



In Keyplan Scenes, this is where pairing will be made and will define that your part Collision will be attached to a specific node. This node will be your unit, apartment, house, or office. SEE MORE ABOUT PAIRING.



In the Apartment node IN HIERARCHY , you will will contain individual properties for this unique unit, such as status, price and label.



After this, you can import your logos and Standard UI with just one click and start testing your app.



Now, we need to add image galleries, first, we will add our images to the architecture folder, and similar as we did with scenes, create the images in the engine so we can import them the same way. We need to use the same name in the file, in the engine and in the 3ds max name convention.





Then, we will create the group for the image, you can use any category to group different images in the gallery section. 

To finish, we will create the gallery to use in our app and assign it in the node Blueprint Section, if we have our gallery elements in our 3d scenes, they should appear when running the app.

 Creating Gallery Groups 


 Creating Galleries 


 Assigning Galleries to Node Blueprint 


We will use the same method to add a second image for our scene, you can import and use any number of static images you want, organize them by group and create any galleries you want for your scenes.

The "Thumbnail Gallery" is the gallery that will appear as small floating images in the 3D scenes, and the "Gallery" will be the full interface.





We will create our Specification for our project, this will be used in the description Screen, and we can set the text in the admin panel, we can use different specification for each scene as well and we can assign the sections in the floors and exterior options.





This information is customized using real time inventory. Don´t Forget to Save.




We need to set colorMods ( See Everything about Color Mods ) to define highlight colors in the part elements, we can create as many as we want for different parts of the flow and assign different conditions such as Status, Category, Feature and More.

We will create colors for Select and Filter Pass, both using Status and category conditions. 



We can use and customize as much as we want our 3 parts elements. Don´t forget to assign it to your desired scene.



Then, we will need to create the filters accordingly to show this option, we need to open the filter dropdown and add a new filter called Availability, since we wont use a slider, we can leave it blank. After we assign it to the node blueprint, we can see the buttons in the app and activate it.



After we set our unit properties and define those values in the real time inventory, we can create a filter for each property, you can also customize your buttons and icons in the interface files.

We will also set a filter using the slider property, "Area in Square Meters". This way, we can filter  different values using the slider interface.



We can now create our list to display and organize our units.

We will create it using our "Lists" dropdown, first create the root address so the engine can know how many steps to look for units in our hierarchy, in our case, our root node is building, and we will leave the default number 8 in the search depth. Its important to add the category condition, so you will avoid to have elements in the list that you don´t really want.



Now we can start adding columns, we have lots of properties to show, but right now we will only add some basics props, we will add label, floor, area, status and beds. After finishing our list, we will need to assign it in our scene node blueprint and test our app.



Now, we need to add the map to our scene, we can use the coordinates and azimuth from architecture or use an specific coordinate. Choose the extend  of the map downloaded from Open Street Map, these units are in meters. We also have Ambient Occlusion and Settings for our suns in this window. 



After this, we need to import our fbx, it needs to have the same name as the editor and contain our suns and splines.

This splines can be named:
• mapCloseBuild_ this spline will make the closest buildings to dissapear while we are rotating.
• mapNoTree_ This Spline will avoid tree generation in the space the shape is covering.
• mapNoBuild_ This Spline will avoid Building generation in the space the shape is covering.
•  mapCutOut_ This spline will mark the area to avoid any generation from the downloaded Open Street Map Info.



After our fbx is imported and the map downloaded, we can bake and we will need to assign it to the exterior scene where we want to display the surroundings , we probably need to tweak the rotation and the placement and we can do it in our coordinate section and importing again our scene to have it updated.



When we finish the full project, we can click SAVE and PACKAGE in our File menu, the package will trigger a compression process in our already saved project. The first time it may need a couple of hours to fully activate the project on the link.



With everything saved and package, we can share our project´s link anytime to be seen anywhere!.

    • Related Articles

    • Introduction to Hauzd - Part 2

      VERY IMPORTANT NOTICE If you´re using an editor version 1.06.130 or newer, you can import your scenes faster: • You DON'T need to use the prefixes geom_ or obj_ • You DON'T need to UV unwrap channel 2 of every geometric element. • You DON'T need to ...

    • Introduction to Hauzd - Part 1

      Hauzd is the easiest way to create interactive real estate 3D presentations and I'm excited to show you the production pipeline so you can start creating your projects faster and easier than ever!. If you don´t have the installer yet, you can ...

    • Introduction to Hauzd - Part 4

      Para ver el video con subtítulos en español, actívalos en youtube Introduction to Hauzd - Part 4 In this video we will learn how to modify and use our interface template to create an unique look for your client. Your clients will always appreciate if ...

    • Webinar - Introduction to Hauzd Engine (English)

      INTRODUCTION TO HAUZD WEBINAR Content: App configuration: Basic UI import Scene blueprints and Scenes Node Blueprints and Node Hierarchy Color Mods Galleries and images Specifications Price Lists Maps Properties Admin Real Time control

    • Creating an Interactive 2D App with hauzd

      In this tutorial we are going to learn step by step how to create an Interactive 2D App, we highly recommend you to watch all these videos. Before Starting ...