How to?

On the dashboard, you will find a "Create" option. Click on it to open Fabrik's studio.

Familiarise yourself with the studio layout, it has three sections:

1. View content in 3D scene - all 3D actions happen here. You can scroll to zoom in/out, click + drag to rotate and right click + drag to change viewing angle.
2. Add/delete content in Node editor - a node-based approach to define workflows. Content and conditions are added here, interface is a little different from the 3D scene with scroll to zoom in/out, click + drag, and right click (to open contextual menu).
3. Configure content in Side menu - It lists all the content added in the node editor and provides options like (amongst others) adding hotspots and enabling/disabling virtual reality (VR).

Let's create your first experience with printing #FABRIKSPACE in 3D.

1. Adding text
   1. Right click to open the contextual menu in the Node editor and select Add Node -> Model -> Add 3D Text.
   2. Following this step will open a yellow-coloured text-node where you can type #FABRIKSPACE.
   3. Connect the text-node to the step-node. Hit save!
2. Seeing in 3D scene
   1. Click on the step-node to refresh the 3D scene and #FABRIKSPACE text.
3. Viewing the experience
   1. On the Side menu, click on 3-dot menu and select Share option.
   2. Share option copies the URL.
   3. Paste the URL on any browser on any device.

To add a 3D model, you will need a model in GLB (or IFC) format - we will explain using GLB files. You can find and download models from online resources like Sketchfab, TurboSquid, and CGTrader. There are three ways to add 3D models into Fabrik's Studio:

1. Adding a 3D model from the list of available models.
2. Drag-and-drop method
3. Upload to assets folder

Adding a 3D Model from the list of available models

• Right-click to open the contextual menu in the Node editor and select Add Node -> Model -> MODEL.
• This opens the red-colored node for models (instead of yellow for 3D text). 
• Click to add name of the model, a lookup table pops-up with the list of available models.
• Type the name or select a 3D model from the available assets and connect to the step node.
• Hit save!

Drag-and-drop method

You can drag-and-drop a 3D model directly into the step node or ‍3D scene. Wait for a few seconds and the scene will refresh automatically with the new model.

Upload to Assets folder

You can upload the model into the assets folder and look it up through the contextual menu in the node editor. To do this,

1. Go to the Assets section from the Dashboard.
2. Click on the Upload button and select a GLB file.
   1. You can only upload one model at a time.
3. Wait for the model to upload successfully (you will get a success message).
4. Go back to the Studio.

Remove a 3D Model from the node editor

There are three ways to remove a 3D model from the 3D scene:

1. Remove the model node in node editor.
2. Delete the model from side menu.
3. Delete the model from Assets (Warning! This will delete the model from Fabrik's storage).

Remove the model node in node editor

• Right-click on the red-colored model node and select Remove.
• Click on the step node to refresh the 3D scene.
• Hit save!

Delete the model from side menu

Click on the model on the side menu and scroll down. You should find Delete button, select and save.

Delete from Assets folder

Warning! This will delete the model from Fabrik storage.

‍You can delete the model from the assets folder,

1. Go to the Assets section from the Dashboard.
2. Scroll through or search for the model you want to Delete.
3. Click Delete and confirm deletion.
4. Wait for delete success message.

Fabrik supports two types of animations:

1. Existing Animation (predefined animations on the 3D models)
2. Custom Animation (animations created by users on Fabrik)

Add an Existing Animation

There are two methods to apply an existing animation:

Method 1: From the Model tab

1. Navigate to the Models section in the side bar menu.
2. Click on the model you want to animate. It opens the contextual menu for the model.
3. Scroll down to the Animation dropdown.
4. Select from the existing animations on the list.
5. Click Save to apply the animation.
6. Click on the step-node to refresh the scene with see the animation.

Method 2: Using the Node Editor

1. Right-click in the Node Editor.
2. Select Animation > Existing Animation.
3. A lookup table will appear.
4. Type the name of the existing animation in the model.
5. Connect it to the step-node.
6. Click Save to apply the animation and select step-node to refresh the scene with the animation.

Creating a Custom Animation

Custom animations allow you to manipulate the model using three primitive transformation options:

• Translate (move along X, Y, Z axes)
• Rotate (rotate around X, Y, Z axes)
• Scale (resize along X, Y, Z axes)

There are two methods to add a custom animation:

Method 1: From the Model Settings

1. Navigate to the Models section in the side bar menu.
2. Click on the model you want to animate. It opens the contextual menu for the model.
3. Scroll down to the Animation section.
4. Select Custom Animation.
5. A green-colored node will appear in the Node Editor.
6. Select the animation type (Translate, Rotate, Scale).
7. Adjust the initial and final X, Y, Z values as needed.
8. Connect it to the Node Editor.
9. Click Save to apply the animation and select step-node to refresh the scene with the animation.

Method 2: Using the Node Editor

1. Right-click in the Node Editor.
2. Select Animation > Custom Animation.
3. A green-colored model node will appear.
4. Adjust the initial and final X, Y, Z values as needed.
5. Select the animation type for the model.
6. Connect it to the model node. Click Save to apply the animation and select step-node to refresh the scene with the animation.

Bring your 3D scenes directly to your website with just a few clicks.

How to Embed 3D experiences:

1. Open Fabrik's Studio.
2. Click the three-dot menu icon on the Side Menu.
3. Select "Embed" option - the iframe link will be copied (success message: "Embed code copied.").
4. Paste the iframe link in your website.

Your interactive 3D experience in live on your website!

‍NOTE: Make sure your website’s security settings allow iframes from different domains, whitelist *.fabrikspace.com and *.fbrk.in on your domain security settings.

Hotspots in a 3D scene refer to interactive points in 3D experiences that users can click, interact with to display more information or trigger an action.

Adding a hotspot:

On the Side Menu in the Fabrik Studio:

1. Click the pin icon.
2. Click New to begin creating a hotspot.
3. You will see this message: “Click anywhere in the 3D scene where you want to place the hotspot”.
4. Upon click, you will see a black square hotspot with New hotspot name on the side menu.
5. Make edits like adding title and description (below) and save.

Adding title and description:

In the Side menu:

1. Enter title and description.
2. Click save.

Change the hotspot color:

In the hotspot section on Side menu:

1. Click on background color.
2. Choose your preferred color. 
3. Click save.

In the next guide, we’ll explore advanced functionalities - adding URLs, embedding media and fetching API data.

Hotspots have the capability to embed API endpoints in the 3D environment allowing users to overlay any kind of data on the 3D models.

Embedding datapoints:

On the Side Menu in the Fabrik Studio:

1. Start with creating a hotspot.
2. Check "Content from API" to see additional options.
3. Choose GET/POST methods, browser refresh rate, and mode of authentication. You can keep default options.
4. Copy the endpoint URL in the URL field and refresh the 3D scene.
5. Data will reflect on the hotspot with the set refresh rate (5 seconds in the video below).

These data points can change color or trigger an action when it goes above or below preset limits.

Embedding datapoints:

On the Side Menu in the Fabrik Studio, select a hotspot and add Value Conditions. You can add multiple conditions to each hotspot.

1. Change text colour:
   
   1. Select operator (greater than, lesser than, equal to, etc.).
   2. Add numerical value limit.
   3. Select colour as behaviour, and
   4. Set the colour of the text.
2. Trigger a standard operating procedure:
   
   1. Select operator (greater than, lesser than, equal to, etc.).
   2. Add numerical value limit.
   3. Select step as behaviour, and
   4. Set the step to navigate to.

Non-3D media includes text, audio, and video content that sets context to make the experience richer. In this How-To, we will focus on adding video content.

Adding a video into the 3D scene:

1. In the Fabrik Studio, drag-and-drop the video file (MP4 format).
2. Keep the video file size small to keep the experience light - it loads quickly.
3. Resize the video and move it around for accurate placement.
4. Save and view.

Embedding a video from YouTube:

1. Add a hotspot.
2. Copy the embed code snippet from any video on YouTube.
3. Add a new hotspot and paste the embed code snippet in the Hotspot.
4. Save and view.

Meta-collab is Zoom/Teams/Meet + 3D. You get the same features as a video call combined with a 3D layout that allows you to annotate and add comments.

Enabling 3D calls:

1. In the Fabrik Studio, go to the Global Properties section.
2. Check "Meta collab" and Save.

Starting a 3D call:

1. Click on the contextual menu in Fabrik Viewer.
2. Click on the call button to start a call.

Inviting other to join:

1. Click on copy in the on-call menu.
2. Share the link with others or open in a different device.
3. Enter name and start the session.

Ensure mic and video permissions are enabled for the device.

Take 360 photographs and embed them as augmented reality, virtual reality, or plain 3D experiences on your device. Overlay more information on the image for contextualisation.

Creating a photosphere:

1. On Fabrik's dashboard, click on the down arrow in the "Create" button.
2. Select 360 Experience and select the 360 image in HDR format.
3. Click on Upload & Continue, wait till the HDR image is uploaded and visible on the studio.
4. Save, use mouse controls to look around and immerse yourself in the 360 photosphere.

Forcing customers to use an overlay to interact with the 3D environment instead of providing navigation cues that feel natural within the scene breaks the overall immersive experience. In our earlier version, we had an HTML overlay with navigation buttons. This wouldn't work in virtual reality since it ran on the canvas and there was no HTML. The next version had a hotspot in the 3D environment that users could click to navigate, but to assign names and actions to the hotspot made to confusing to the users. These were small buttons and making it easy to click was a challenge. And finally, we realised the button should be where the action is in the 3D environment. However, the action happens at different places in different experiences, and the only way out of this is to provide users an option to convert any object in the 3D scene into a clickable/interactable button. In the example video below, the button is next to the user when in bird's eye view or when seated inside the car, always accessible at arm's length or visible for a click.

Adding a navigation function to a mesh:

1. On Fabrik's studio, select any mesh from the side menu.
2. Scroll down below the transform controls section to find Step Nav.
3. Click on the drop down and choose the step the users will navigate to when the mesh is clicked.
4. Save and try it out on the viewer.

This function can be assigned to any 3D model, a mesh within the 3D model, an image, video, or any other content type. The 3D mesh can be animated for a richer experience. Subsequent steps will involve making these interactions more lifelike through gestures and mimicking real-world behavior of these components.

Adding natural elements gives a level of richness and realism to the 3D environment. The first of this series is adding water, specifically the surface of rivers or oceans. By controlling the rate of flow, the reflective nature of water, color, transparency, position of the sun, and other parameters, we achieve a realistic 3D environment at a fraction of the compute cost.

Adding a navigation function to a mesh:

1. On Fabrik's studio, select any 2D plane surface from the side menu. DO NOT SELECT A 3D OBJECT.
2. Scroll down below the transform controls section to find "Water" checkbox.
3. Save and try it out on the viewer.

These shaders can be extended to other natural phenomenon like sandy surfaces, fire, rain, snow, etc.

The hands-on experience we have all been waiting for! The mixed reality experience on Fabrik allows users to touch-and-feel 3D in their living environment.

Enabling mixed reality on Fabrik:

1. On Fabrik's studio, enable "AR button" on the side menu on the left.
2. Save and try it out on the viewer.

The next steps is to enable grab using hand gestures to increase the richness of experience, and combine them with corresponding haptics, sights, and sounds.