Understanding the "Grid" and the "Scene"

The Grid

The Grid is your workspace for interacting with images and 3D models, which will be referred to as “items” throughout this documentation. It gives you a top-down view of your layout, allowing you to place, modify, and manage items with precision.

Whatever you do on the Grid—whether it's adding an item, repositioning it, rotating it, or scaling it—immediately updates the Scene. Think of it as a real-time editor where every change is instantly reflected.

What You Can Do on the Grid:

  • Add items and arrange them.
  • Move items around.
  • Rotate and resize.
  • See a structured, top-down layout of everything.
  • And much more! Additional features are documented in their relevant topics.

The Scene

The Scene is where your items come to life. It's the final view of everything you've arranged on the Grid, shown in a way that reflects its actual placement. If the Grid is like a blueprint, the Scene is the real-world result.

Every action you take on the Grid instantly updates the Scene, so you always have a live preview of how things look. Additionally, you can move around within the Scene, giving you full control over how you view your work.

What the Scene Does:

  • Shows the final appearance of your items.
  • Updates instantly based on changes in the Grid.
  • Allows you to navigate within the 3D space for better visualization.

Create your first project

When you log in to your Studio Workspace, you will see two buttons:

"New Project" and "Open Existing Project."

  • 1. Click "New Project" button, then enter a name for your project and select the grid size.

    The Grid consists of squares, each representing a single unit of measurement. The higher the Grid size, the larger the available space in the Scene for your project.
    Experiment with moving the size slider to see the changes reflected on the Grid in real time.

After creating a project, you will notice that additional buttons will appear in your Studio Workspace on top of the Grid.
The next step is to upload items to add to the Grid, which will automatically appear in the Scene.

  • 2. Click the "Upload to library" button.

    Each project has it's own dedicated library categorized by "Images", "3D Models" and "Floor Images".
    By default, "Upload to images library" is selected.

    You can set tags for your items after selecting them, before uploading. This allows you to search within your libraries more easily.
    If you don't set any tags for your items, the item name will be used as the default tag.
After uploading items to the library, you can access the library by clicking the "Show project library" button.

You can also access the library from the Studio Workspace by clicking the "Project libray" button.

Note: Any items you upload are limited to the specific project and cannot be accessed from other projects.

  • 3. Add Image to the Scene

    When you hover over an item in your library, two buttons will appear in its top corners:

    • A button to add the image to the Grid.
    • A button to delete the image from the library.

    Click the "Add Image to the Scene" button, and you will see the image placed on both the Grid and the Scene.

Project Settings

To open the Project Settings panel, click the Project settings button located above the Grid. This panel allows you to configure how your project behaves, how it appears to others, and how much working space you have.

Visibility

The Visibility section controls whether your project is Public or Private. By default, all new projects are Private.

  • Public: Anyone with the project's share URL can view it immediately, with no additional requirements.
  • Private: The project cannot be viewed unless a valid share token is appended to the URL.
    Each share token is single-use and time-limited: it can be used once to open the project and then it cannot be reused. This means that if someone copies the URL after it has been used, they will not be able to view the project with that same token. (See How to obtain token for private projects)

Private mode is recommended when sharing sensitive, internal, or work-in-progress scenes. Public mode is suitable for open showcases, demos, or content you want anyone to access.

Name & Size

In the Name & size section, you can update:

  • Project name: Change how your project is labelled in your dashboard and menus.
  • Grid size: Adjust the working area of your project. If you need more space than originally planned, simply increase the grid size here. This expands the available editing and placement area in the Grid and Scene.

After making changes, click Save to apply them.

Loading Logo & Text

This section lets you customise what viewers see when loading your shared project. When someone opens your project via a share URL, a small loading screen appears while assets are being fetched.

  • Loading Logo: Upload your own image (e.g. company logo, brand mark, project icon). This replaces the default placeholder.
  • Loading Text: Add a short message that appears under the logo while the project loads (e.g. “Preparing your scene…” or “Loading assets…”).

These elements ensure your shared project looks polished and branded during the loading phase, providing a cleaner and more professional experience for viewers.

Upload contents

You can upload images, models, and floor textures directly into Derinix Studio using the Upload Content panel. Uploaded items can be stored in either the current project or in your personal library, depending on how you want to reuse them.

Project Library vs My Space
  • Project: Content is stored inside the currently open project. Items uploaded here are scoped only to this project and cannot be accessed from any other project.
  • My Space: Your personal, global library. Items uploaded here can be used across all of your projects. This is ideal for assets you reuse often.
Upload Categories

Each library contains three types of content, and you can choose which one you want to upload to:

  • Upload Images: general-purpose images for planes and UI elements.
  • Upload Models: 3D models for the scene (.glb format).
  • Upload Floor Images: textures specifically for the floor surface.
Accepted File Types

Images:

  • image/jpeg
  • image/png
  • image/svg+xml
  • image/webp

Models:

  • .glb (binary GLTF)
Adding Tags

After selecting files and before uploading, you can assign tags to each item. Tags make it easier to search and organise content within your Project and My Space libraries.

How to Upload
  1. If a project is currently open, you can click the Upload button to open the upload panel. From there you can choose whether to upload to the Project library or to My Space.
  2. If you want to upload directly to My Space (whether a project is open or not), click the account button in the top-right corner and select Upload to My Space library from the dropdown menu to open the upload panel.
  3. Select Project or My Space.
  4. Choose the upload category (Images, Models, or Floor Images).
  5. Drag and drop your files into the upload area, or click Browse to select them.
  6. (Optional) Add tags for each file.
  7. Click Upload All Files to complete the upload.

Once uploaded, you can view your items using the Show Project Library or Show My Space Library button, depending on where you uploaded them.

Contents library

Click the Project library button to open the libraries panel.
The Library panel lets you browse, search and add assets from your Project or My Space libraries directly into the Grid and Scene.

Project vs My Space
  • Click Project to view assets that belong only to the currently open project.
  • Click My Space to view assets stored in your personal library and available to all of your projects.
Categories and Search
  • The panel is organised into three sections: Images, Models and Floor images. Use the section headers to expand or collapse each category.
  • Use the Search box to filter items in the current category by name and tags.
  • The upload button next to the search field opens the upload panel so you can add new assets to the currently selected library and category.
Adding Items to the Scene or Removing Them

Each asset appears as a card in the list. When you hover over a card, action buttons appear:

  • A button to add the item to the Grid/Scene.
    Clicking this will:
    • create a new plane for an Image,
    • place a new 3D object for a Model,
    • apply the texture to the Scene floor when using Floor images.
  • A button to delete the item from the library.
    This removes the asset from the library and also removes it from any scenes where it is currently used.
    • Deleting from the Project library removes the asset from the project and from the current project's scene.
    • Deleting from My Space removes the asset from your shared library and from all projects that were using it.

    Note: If you only want to remove an item from the scene (without deleting it from the library), use the regular selection tools and delete the item from the Grid. See Removing Items.

Click the Add button on any asset you want to use, and it will be placed in the Grid and Scene ready for editing with the Toolbox and item settings.

Generating content with AI

You can create new assets directly inside Derinix using the built-in AI Image and 3D Model Generation panel. To open it, click the Generate content with AI button.

Choose What to Generate

At the top of the panel, select the type of content you want to create:

  • Generate Image: produces a 2D image you can use as a plane, UI element, texture, or reference.
  • Generate 3D Model: produces a 3D model that can be placed in your scene (e.g., furniture, objects, props).
Select a Provider

Use the Provider dropdown to choose the AI service that will generate your content. Different providers may produce different styles, strengths, or levels of detail.

Enter Your Prompt

In the prompt box, describe what you want to generate. You can be as short or as detailed as you like. For example:

  • "A modern wooden chair with metal legs"
  • "A photorealistic tree with sunlight from the left"
  • "A low-poly sci-fi crate"
Generate

Once your prompt is ready, click Generate. The system will contact the selected AI provider and create your image or 3D model.

After generation is complete, the new asset can be saved into your Project or My Space library, just like any other uploaded content. From there, you can add it to the Grid/Scene and edit it normally.

Grid Zoom and Pan

The Grid supports zooming and panning so you can work comfortably on both small details and large layouts.

Zooming

To zoom in or out:

  • Place your mouse over the Grid.
  • Hold the Ctrl key.
  • Use your mouse wheel to zoom in or out.

The zoom is centered around the mouse pointer, giving you precise control over which part of the Grid you zoom into.

Panning

When the Grid is zoomed, you can move around (pan) the workspace:

  • Hold the Ctrl key.
  • Click and drag anywhere on the Grid to pan the view.
Resetting the Zoom

When the Grid is zoomed in or out, a Reset Zoom button appears above the Grid. Click this button to instantly return the Grid to 100% (actual size) and reset the pan position.

This makes it easy to return to a clean, centered view after navigating around a large or detailed layout.

Action History (Undo / Redo)

Derinix keeps a short history of your last 10 actions on the Grid (moves, rotations, scaling, position changes, etc.). You can step backwards or forwards through this history to quickly correct mistakes or compare different arrangements.

History Dropdown

Above the Grid, use the History dropdown to view recent actions. Each entry shows the type of change, for example: Move, Y Rotation, Scale, Y Position, and so on.

  • Click any entry in the list to jump the scene to that point in time.
  • Actions after the selected step are treated as “future” steps and can be revisited using Redo (see below).
Keyboard Shortcuts
  • Ctrl + Z – Undo the last action.
  • Ctrl + Y – Redo the next action in history.

Undo/Redo and the History dropdown work together: you can either step through changes with the shortcuts or jump directly to any of the last 10 recorded actions from the History menu.

Toolbox

The Toolbox gives you quick access to common actions for the currently selected grid item or items. It can be moved anywhere on the page and used in either a vertical or horizontal layout.

Moving and Orienting the Toolbox
  • Drag the Toolbox by its header to reposition it anywhere on the screen.
  • Use the orientation toggle to switch between a vertical and horizontal layout, depending on what fits best with your workspace.
When Buttons Are Active

Toolbox buttons are enabled only when at least one grid item is selected. If no items are selected, the buttons are disabled to prevent accidental changes.

What You Can Do with the Toolbox

The Toolbox provides a range of quick actions you can perform on the selected item(s). These include things like:

  • Changing visibility
  • Aligning items
  • Rotating
  • Scaling
  • Cloning
  • Opening item settings (e.g., Face Camera, Pass-Through, Brightness, Spotlight, Info)

Use the Toolbox as your main control panel for editing items: select one or more grid items, then use the enabled buttons to apply the transformations or settings you need.

Selecting grid items

Single Selection

Click on a grid item to select it. You can also click directly on an item in the Scene; this selects/activates the corresponding item on the grid so you can quickly locate it there. If multiple items overlap at the same position, see Selecting Stacked Items below.

Multiple Selection

Hold down the Ctrl key while clicking on grid items:

  • Clicking an unselected item adds it to your selection.
  • Clicking a selected item removes it from your selection.
Area Selection

Hold down the M key, then click and drag with the left mouse button to draw a box. All grid items intersecting the box will be selected.

Selecting Stacked Items

Sometimes grid items overlap and sit on top of each other in the same area. In these cases you can cycle through the stacked items:

  • Right-click on the overlapping area to rotate which item is on top. Each right-click brings the next item in the stack to the front and selects it.
  • When only one item exists at that position (no overlap), right-click does nothing. Use a normal left click to select that item.
Deselect All

Click on any empty space in the grid to clear your current selection.

Moving items on the grid

Move a Single Item (Mouse)

Click and hold the left mouse button on the item, then drag it to a new position.

Move Multiple Items (Mouse)

If multiple items are selected, click and hold the left mouse button on any selected item, then drag. All selected items move together.

Move with the Keyboard

Hold Ctrl and press the Arrow keys to nudge the selected item(s).

  • Tap an arrow key for a small step; hold to keep moving.
  • Keyboard movement uses a fixed step size and ignores Snap to Grid.
Snap to Grid

Use the switch located below the grid to control mouse dragging behavior:

  • On: Items snap to grid lines while dragging with the mouse.
  • Off: Items move freely and can stop between grid lines.

Rotating items on the grid

Rotate around the Y-axis (vertical)

Hold R and move your mouse up/down on the grid to adjust the yaw (Y-axis) of the selected item(s).

Rotate around the X-axis (tilt)

Hold U and move your mouse up/down on the grid to tilt the selected item(s) around the X-axis.

Rotate via the Toolbox

Click the Rotate button in the toolbox to open precise controls:

  • Sliders for both Y (yaw) and X (pitch) rotation
  • Preset angles for quick snaps
  • A text box to enter a custom angle

Tip: Rotation applies to the item(s) you currently have selected.

Elevate / Lower items

Mouse Shortcut

Hold Y and move your mouse up/down on the grid to raise or lower the selected item(s) along the scene’s Y (vertical) axis. This changes height only—it does not rotate the item.

Note: If the scene's Floor is visible, it acts as a physical barrier and items cannot be lowered below ground level. To place items below the floor (for example, floating scenes or underground layouts), you must first hide the floor in Scene Settings → Floor visibility.

Toolbox Controls

Click the Y Position button in the toolbox to open precise controls:

  • A slider to adjust height smoothly
  • A text box to enter an exact value

Scale items

Mouse Shortcut

Hold T and move your mouse up/down on the grid to increase or decrease the size of the selected item(s).

Toolbox Controls

Click the Scale button in the toolbox to open precise controls:

  • A slider to adjust size smoothly
  • A text box to enter an exact scale value (e.g., 1.0 = original size)

Clone items

  • Select the item(s) you want to clone.
  • Click the Clone button in the toolbox.
  • The cloned item(s) are created in the same position as the originals. A stack indicator appears to show multiple items at that spot.
  • After cloning, the new clones are selected. To move them, click and drag any selected item.
  • To bring a stacked item to the front, right-click just to the right of the stack indicator. Each right-click cycles the next item to the front.

Note: Clones are identical to the originals (size, rotation, and settings).

Align items

  • Select the items you want to align (the first item you select becomes the anchor).
  • Click the Align button in the toolbox.
  • Choose one of the options:
    • Align Horizontally - moves all selected items so they share the same row as the first-selected (anchor) item.
    • Align Vertically - moves all selected items so they share the same column as the first-selected (anchor) item.
  • The first-selected item does not move; all others move to match its position on the chosen axis.

Tip: Select the intended anchor item first, then add the others to your selection.

Note: Alignment snaps items exactly to the anchor's position on the chosen axis (independent of "Snap to Grid").

Change item visibility

  • Select the item(s) you want to change.
  • Click the Visibility button in the toolbox.
  • Choose Hide or Show.
  • Hidden items are indicated on the grid with white diagonal lines and are also hidden in the scene.
  • You can also use keyboard shortcuts:
    • Press B to Hide the selected item(s).
    • Press V to Show the selected item(s).

Remove items

  • Select the item(s) you want to remove (see Selecting Items).
  • Click the Remove from Scene button in the toolbox.
  • Alternatively, press the Delete or Backspace key on your keyboard to remove the selected item(s).

Make items face the camera

When Face Camera is enabled, the item will automatically rotate to look toward the camera at all times. As the camera moves or turns, the item updates its orientation so its front surface is always visible. This is especially useful for images, labels, signs, and other elements that must remain front-facing for clarity. By default, the Face Camera option is turned off.

Single Item
  • Select the item you want to modify.
  • Open the Item Settings panel using the settings button in the toolbox.
  • Toggle the option on or off.
Multiple Items (Bulk Editing)

When multiple items are selected, the Bulk Settings button becomes available in the toolbox. Click it to apply settings to all selected items at once.

In the bulk settings panel, toggle on or off to apply the setting to every selected item. This allows you to quickly configure large groups without adjusting each item individually.

Camera pass through

The Camera Pass-Through setting controls whether the camera is allowed to move through an item or whether the item behaves as a solid obstacle. By default, Camera Pass-Through is enabled, meaning the camera can freely pass through items unless you turn this option off.

Single Item
  • Select the item you want to modify.
  • Open the Item Settings panel using the settings button in the toolbox.
  • Toggle the option on or off.

When Camera Pass Through is enabled (default), the camera can move through the item without being blocked. This is ideal for decorative elements or any object that should not obstruct navigation.

When Camera Pass Through is disabled, the item acts as a solid object: the camera cannot move through it and will stop or slide along its surface. Use this for walls, structures, or areas where you want to restrict movement.

Multiple Items (Bulk Editing)

When multiple items are selected, the Bulk Settings button becomes available in the toolbox. Click it to apply settings to all selected items at once.

In the bulk settings panel, toggle on or off to apply the setting to every selected item. This allows you to quickly mark groups of items as blocking or non-blocking without configuring each one individually.

Show info (item info icon)

Each item can display an info icon in the scene. When the Show Info option is enabled for an item, a small info icon appears at the top-right corner of that item in the 3D view. Clicking this icon opens an information panel for that item.

Configuring Item Info
  • Select the item you want to modify.
  • Open the Item Settings panel using the settings button in the toolbox.
  • Toggle the option on or off.
  • Enter a Title and Content for the item.

The Title is shown as the heading in the info panel when the user clicks the icon. The Content can be:

  • Plain text (descriptions, notes, instructions, etc.).
  • Formatted HTML (for richer layout, links, lists, etc.).
  • Embedded elements such as an <iframe> for external pages, dashboards, or videos, if you want to show external content alongside the item.

When a user clicks the info icon on the item in the scene, the configured title and content are displayed, allowing you to attach contextual information, documentation, or external resources directly to that specific item.

Item spotlight

Each item can have its own spotlight to highlight it in the scene. The spotlight is attached to the item and moves with it, letting you create focused lighting for specific objects (for example, artwork, products, or points of interest).

Configuring Item Info
  • Select the item you want to modify.
  • Open the Item Settings panel using the settings button in the toolbox.
  • Toggle the option on or off.

When Add Spotlight is enabled, a spotlight is created for that item and the controls in the panel become active. Turning it off removes the light for that item without affecting other items.

Show Helpers

Toggle to display visual guides for the light in the scene (such as the light cone and target indicators). These helpers are only visible in the editor and do not appear in the final render for your users. They are useful for understanding where the light is positioned and where it is pointing.

Light Settings

Use the Light Settings section to control how the spotlight behaves:

  • Color: Sets the light colour. Use this to warm up or cool down the lighting on the item.
  • Intensity:Controls how bright the light is. Higher values make the item more strongly lit.
  • Distance: Sets how far the light reaches. Beyond this distance, the light has little or no effect.
  • Angle: Controls the width of the spotlight cone. Smaller angles create a tight, focused beam; larger angles create a wider spread.
  • Penumbra: Adjusts the softness of the light’s edge. Higher values give a softer falloff around the edge of the beam.
  • Decay: Controls how quickly the light fades with distance. Higher decay values make the light fall off more quickly.
  • X / Y / Z Position: Moves the light relative to the item. Use these sliders to place the spotlight above, below, or to the side of the item.
Target Position

The Target Position section controls where the spotlight is aiming:

  • X / Y / Z Position: Adjust the target point that the light is looking at. Moving these values changes the direction of the beam without moving the light itself.

By combining the light position and target position, you can precisely control how each item is lit and draw the viewer's attention to the most important parts of your scene.

Self-lit Brightness

The Self-lit Brightness controls let you fine-tune how bright an item appears, on top of the normal scene lighting. These controls are shown in the Item Settings panel after you click the item settings button in the toolbox, and the exact options depend on the type of item you have selected:

  • Plane selected → Self-lit Brightness for planes.
  • Model with baked lighting selected → Model Self-lit Brightness (baked).
  • Model with environment lighting selected → Model Self-lit Brightness (environment / reflections).
Planes and Baked-lit Models

For planes and models that use baked lighting, the panel shows a simple Enabled toggle and a Brightness slider. By default, Self-lit Brightness is disabled.

  • Enable Self-lit Brightness to activate the slider.
  • A value of 1.00 keeps the original baked brightness exactly as it is.
  • Values above 1.00 make the item appear brighter than the original.
  • Values below 1.00 make the item appear darker than the original.

This acts as a simple multiplier on top of the existing lighting, without changing any other lights in the scene.

Models with Environment Lighting

For models lit mainly by environment / reflection maps, the panel shows Model Self-lit Brightness with extra controls. By default, this feature is disabled.

When you enable it, you can adjust:

  • Mode
    • Relative – adjusts brightness relative to each mesh’s current reflection level. Existing contrast between different parts of the model is preserved; everything is just pushed brighter or darker together.
    • Exact – forces all meshes to the same target level, ignoring their original reflection strength. Use this if you want a very even, uniform brightness across the whole model.
  • Reflection level
    A value of 0 keeps the original reflection brightness. Increasing the slider above 0 adds extra brightness on top of what the environment lighting already provides.
  • Limit on glass
    Caps how strong the effect can be on glass-like materials. This helps prevent glass, screens or glossy surfaces from becoming too bright or blown out compared to the rest of the model.

These controls only affect the selected model; global lights and other items in the scene are not changed.

Scene environment

The Scene Settings panel controls the overall look and feel of the 3D scene (lighting, background, fog and floor). To open it, click the Scene settings button located above the Scene.

Ambient Light

Ambient light softly illuminates everything in the scene equally.

  • Color: sets the overall tint of the ambient light.
  • Intensity: controls how strong the ambient light is.
  • Reset to Defaults: restores the factory default values for ambient light.
  • Reset to Last saved: restores the most recently saved values for this project.
Directional Light

The directional light acts like a sun or main spotlight shining from a distance.

  • Color: colour of the directional light.
  • Intensity: brightness of the light.
  • X / Y / Z Position: moves the light source in the scene, changing the direction of the shadows.
  • Show Helper: displays a visual helper for the light's position and direction in the editor (not shown to end users).
  • Reset to Defaults / Reset to Last saved: same behaviour as in Ambient Light.
Skybox

The skybox defines the background gradient of the scene.

  • Sky Top Color: colour at the top of the sky.
  • Sky Bottom Color: colour at the bottom (near the horizon).
  • Gradient Offset: shifts where the transition between top and bottom colours appears (higher or lower in the view).
  • Gradient Sharpness: controls how soft or sharp the transition between the two colours is.
  • Reset to Defaults / Reset to Last saved.
Fog

Fog adds depth and atmosphere by fading distant objects into a chosen colour.

  • Fog Color: colour that distant objects blend into.
  • Fog Near: distance from the camera where fog starts to appear.
  • Fog Far: distance where the fog becomes fully opaque.
  • Reset to Defaults / Reset to Last saved.
Floor
  • Floor visibility: toggles the floor on or off in the scene. When the floor is visible, it acts as a solid barrier and items cannot be moved below floor level. When the floor is not visible, items can be lowered freely below ground level, allowing for floating or sky-only scenes.
  • Floor repeat density: adjusts how often the floor texture repeats (tiling). Higher values create a tighter pattern; lower values make each tile larger.
Save Current View as Starting Point

The Save Current View as Starting Point button stores the camera's current position and rotation as the default view for this project.

  • When viewers open the project (including via the share URL/embed), the scene will start from this saved camera view.
  • You can click this button again at any time to update the starting view to a new camera position.

Scene level of detail (LOD)

Level of Detail (LOD) controls how detailed your scene looks depending on how close the camera is to your items. Its main goal is to keep movement smooth and responsive, even in busy scenes, by automatically lowering detail for far-away items.

LOD works only on items that are already loaded in the scene. Which items are loaded or unloaded is managed separately by Streaming. You can think of it like this:

  • Streaming decides which items are present in the scene.
  • LOD decides how detailed those items should look.

When LOD is enabled, every visible item in the scene is placed into one of several “distance zones” (called bands in the panel): Near, Mid, Far, or Culled. Each band changes how the item is drawn to balance quality and performance.

What LOD actually does

LOD automatically adjusts items based on how far they are from the camera:

If you prefer a visual overview of how the Near, Mid, Far and Culled rings relate to the camera, see LOD & Streaming visual guide.

  • Near - Items close to the camera.
    • Use their full quality look (original materials, textures, lighting).
    • Shadows are enabled so they look as good as possible.
  • Mid - Items a bit further away.
    • Still use their normal look and materials.
    • Shadows are turned off to reduce workload, which helps keep movement smooth.
  • Far - Items far from the camera but still visible.
    • Use a simpler “unlit” version of their look (no advanced lighting).
    • Shadows are off.
    • They still look like the same object, just a bit less rich in lighting.
  • Culled - Items so far away that they are hidden.
    • The item is temporarily hidden from view, but still part of the project.
    • If you move closer again, it can come back (if Streaming has it loaded).

You can see the LOD distance zones as circles around the camera in the top-down grid when the radius overlays are turned on. These circles help you understand when items will switch between Near, Mid, Far, and Culled.

Objects outside the camera view

When Level of Detail (LOD) is enabled, Derinix also takes the camera's viewing direction into account - not just the distance rings.

You can imagine the camera looking through an invisible view cone in front of it. Anything completely outside this cone (for example, behind you or far off to the sides) is treated as being in a special LOD band called Culled.

  • If an object is inside the view cone, its appearance is controlled by the Near, Mid and Far rings you set in the LOD panel.
  • If an object is outside the view cone, LOD temporarily hides it (Culled), even if its distance would normally fall into one of the visible rings.
  • As soon as you turn the camera back towards that object, it becomes visible again and immediately returns to the correct LOD band for its distance.

This “view cone” behaviour:

  • Only applies when LOD is enabled. If you turn LOD off, any object that is loaded by Streaming will stay visible, even if it's behind you.
  • Works together with your LOD rings and Streaming: Streaming decides which objects are loaded based on the Load and Unload distances, and LOD then decides how detailed they are (or whether they are Culled) while you move and look around.

You don't need to configure this separately - it is built into the LOD system and automatically helps your scene run smoother by not drawing things you cannot currently see.

For a complete picture of how items come and go as you move around, see Streaming, which sits on top of LOD.

Where to find LOD settings

The LOD controls appear in the Scene Settings panel. To open it, click the Scene settings button located above the Scene. The LOD controls appear in the section (labelled “Advanced”). There is a switch that turns the whole system on or off for the project.

  • When the switch is off:
    • All items are treated as Near at all times.
    • No automatic detail reduction or hiding is applied.
  • When the switch is on:
    • Items change band as you move the camera.
    • Performance is usually better in larger scenes.
Understanding the LOD controls

Inside the LOD Bands panel you will see several sliders:

  • Near radius
    Sets how far from the camera the Near band extends. Items inside this radius use full quality with shadows.
    • Increase this if you want more of the scene to look “hero quality” around you.
    • Decrease it if you want to favour performance (fewer items with full quality).
  • Mid radius
    Sets how far the Mid band extends beyond the Near band. Between Near and Mid, items keep their look but lose their shadows.
    • Make this larger if you want normal-looking items further out without shadows.
    • Make it closer if you prefer items to drop to Far (simpler look) sooner.
  • Far radius
    Sets the reach of the Far band. Between Mid and Far, items use a simpler drawing mode (no advanced lighting). Beyond Far, items move into the Culled band and can be hidden.
    • A larger Far radius keeps more items visible at lower detail.
    • A smaller Far radius hides distant items earlier, which can greatly help performance.
  • Hysteresis
    This is a small “cushion” around each band border that prevents items from flickering when the camera sits right on a distance line.
    • With hysteresis, items need to move a little way past a border before switching band.
    • The panel automatically limits this so it stays within safe values.
    • If you see band changes happening too often, increase this slightly.
  • Update interval (s)
    Controls how often LOD is recalculated.
    • Smaller values (for example 0.1 seconds) make LOD react more quickly to movement.
    • Larger values (for example 0.5-1 second) reduce how often updates happen, which can save a bit of CPU in very heavy scenes.
Grid overlay: show LOD radii

The LOD panel also includes options like Show near radius, Show mid radius and Show far radius. These draw coloured circles around the camera in the top-down grid:

  • The inner circle marks the edge of the Near band.
  • The next circle marks the edge of the Mid band.
  • The outer circle marks the edge of the Far band.

This makes it easy to see when items will change between bands as you move. For Streaming circles, see the Streaming settings section.

How LOD and Streaming work together

In practice, you will usually use LOD and Streaming together:

  • LOD decides how detailed each loaded item should look based on distance, and can temporarily hide items that are very far away.
  • Streaming decides which items should be loaded at all, based on similar distance circles around the camera.

A common pattern is:

  • Set the Far radius for LOD to where you are happy to see low-detail objects.
  • Set the Streaming load radius to slightly beyond that, so items are loaded before they come into view.
  • Set the Streaming unload radius to a bit further again, so distant items are removed entirely when they are no longer needed.

For details on Streaming, see the Streaming settings section.

Scene streaming (Distance-Based Loading)

Streaming controls which items are actually loaded into the 3D scene around the camera. Its job is to keep the scene light and responsive by only keeping nearby items active.

While LOD adjusts how detailed items look, Streaming decides whether an item is present at all:

  • If an item is inside the load area, its 3D version is loaded into the scene.
  • If an item is far outside the unload area, it is removed from the scene until you come back.
  • The item always remains in your project grid and settings - only its live 3D representation is loaded/unloaded.

Streaming is especially helpful in large scenes with many models and planes. It allows you to build rich environments without forcing every viewer's device to draw everything at once.

What Streaming actually does

Streaming automatically decides which items should be loaded into the scene and which can safely be unloaded, based on how far they are from the camera.

To see how the Load and Unload distances sit around the camera (and how they line up with the LOD rings), check the LOD & Streaming visual guide.

  • Items within the load distance are created in the 3D scene (if not already present).
  • Items that move beyond the unload distance are removed from the 3D scene to free resources.
  • Items between these distances may stay loaded but can be treated as Far or Culled by LOD, depending on your LOD bands.

For 3D models, Streaming looks at the item's 3D size and rotation when deciding how close you are. For planes (such as posters or wall panels), it uses their footprint on the grid - it measures the distance to the nearest point on the line between their two grid endpoints. This means you can approach the long side of a plane and it will load correctly when you get close along its length, not only near its centre.

Streaming also takes height into account, so items that are very high or low compared to the camera can be treated as further away.

Where to find Streaming settings

The streaming controls appear in the Scene Settings panel. To open it, click the Scene settings button located above the Scene. The streaming controls appear in the section (labelled “Advanced”). There is a switch that turns the feature on or off for the current project.

  • When the switch is off:
    • All items are kept loaded in the scene (subject to your project size and hardware limits).
    • You can still use LOD to adjust quality and visibility.
  • When the switch is on:
    • The scene automatically loads nearby items and unloads distant ones.
    • This typically gives much better performance in large or heavy scenes.
Understanding the Streaming controls

Inside the Streaming panel you will see:

  • Load radius
    This distance defines the area around the camera where items should be loaded.
    • When the camera moves within this radius of an item, the scene will create its 3D version.
    • Larger values mean more items are loaded at once (higher detail but more work for the device).
    • Smaller values focus resources on the immediate area around the viewer.
  • Unload radius
    This distance defines how far away items must be before they are unloaded.
    • Items beyond this distance are removed from the 3D scene until you come back.
    • The unload radius is always kept at least as large as the load radius.
    • A small gap between load and unload distances helps avoid constant reloading.

The Streaming system automatically maintains a sensible relationship between Load radius and Unload radius, so you can't accidentally set values that would cause unstable behaviour.

Grid overlay: show Streaming radii

The Streaming panel also includes Show load radius and Show unload radius options. These draw circles in the top-down grid view around the camera:

  • The inner circle shows where items start loading as you approach.
  • The outer circle shows where items will be unloaded as you move away.

Combined with the LOD circles from the LOD settings section, you can visually see:

  • Where items will be loaded/unloaded (Streaming).
  • How detailed they will look at different distances (LOD bands).
How Streaming and LOD work together

Streaming and LOD are designed to complement each other:

  • Streaming keeps only nearby items loaded so the scene stays light.
  • LOD controls how those loaded items look and when they are hidden.

A simple way to configure them together is:

  1. First, set your LOD Near/Mid/Far radii so that the visual quality changes where you expect.
  2. Then, set Streaming load radius to be at or slightly beyond the LOD Far radius.
  3. Finally, set Streaming unload radius a bit further out, so very distant items are removed entirely.

In this setup:

  • Items appear in the scene before they reach your Far band (so you never see them “pop in” too late).
  • As you move away, items first lose detail (LOD), then are eventually unloaded (Streaming).

If you are unsure where to start, try:

  • Near radius: a comfortable range around the user (for example, the area they can walk around in immediately).
  • Mid radius: roughly 2–3 times the Near radius.
  • Far radius: a bit beyond Mid, where you still want silhouettes.
  • Load radius: close to or just above the Far radius.
  • Unload radius: slightly larger than Load radius.

You can then fine-tune based on how your scene feels: if it feels too empty, expand the radii; if it feels heavy or stutters, reduce them and rely more on LOD and Streaming to help.

Understanding the Distance Rings

In the top-down grid, you will see several coloured circles around the camera. These circles show how LOD and Streaming behave as you move through the scene. They are a live preview of your current settings.

In the visual:

  • Green circle - LOD Near radius
  • Blue circle - LOD Mid radius
  • White circle - LOD Far radius
  • Solid orange circle - Streaming Load radius
  • Dashed orange circle - Streaming Unload radius

As you move the camera, items cross these circles and change behaviour:

  • Inside the green Near circle, items use full quality and shadows.
  • Between the green and blue circles, items are in the Mid band: they still look normal, but shadows are turned off.
  • Between the blue and white circles, items are in the Far band: they use a simpler look without advanced lighting.
  • Outside the white Far circle, items move towards being hidden or unloaded, depending on the Streaming rings.
  • Inside the solid orange Load circle, items are allowed to load into the 3D scene (if they are part of the project).
  • Outside the dashed orange Unload circle, items are removed from the 3D scene until you come back.
A “healthy” way to set the bands

A good rule of thumb is to think of the rings as layers of comfort: close items should look great, mid-distance items should still look clear but cheaper, and the very far items should either be very simple or not present at all.

In most scenes, a healthy setup looks like this:

  • The green Near circle is your “high quality bubble”. Set it to the distance where you care the most about detail - for example, the area a viewer can walk around in comfortably.
  • The blue Mid circle sits further out than green. This is the zone where you still want objects visible and readable, but are happy to lose shadows to keep things smooth.
  • The white Far circle is further out again. In this band, objects are still visible shapes and silhouettes, but with a simpler look. This is often your “background” zone.
  • The solid orange Load circle should usually be slightly outside the white Far circle. That way objects are already loaded by the time they enter your Far band, so they don’t suddenly pop in right in front of the viewer.
  • The dashed orange Unload circle should be a bit further out than the solid orange one. This gives items some breathing room: they aren't loaded and unloaded constantly as you hover around the edge.

A simple mental picture:

  • Green: “Show this beautifully.”
  • Blue: “Still show nicely, but skip shadows.”
  • White: “Show as a simpler shape in the distance.”
  • Solid orange: “Start loading things before I get there.”
  • Dashed orange: “Once things are far beyond this, you can remove them.”
Tips for choosing values
  • For small scenes (few objects, compact area), you can keep the rings relatively close together. You may not need aggressive Streaming - the orange rings can sit further out.
  • For large or heavy scenes, spread the rings out more clearly: keep the green radius small, use blue and white to fade quality gradually, and rely on the orange rings to keep only the nearby area fully loaded.
  • If movement feels heavy or stuttery, try:
    • Reducing the Far radius (white) so fewer items are drawn.
    • Reducing the Load radius (solid orange) so fewer items are loaded at once.
  • If the scene feels too empty around you, increase the Far and Load radii a little so more items are visible and loaded at a time.

You can always adjust these values, move around the scene, and watch how objects enter and leave the different coloured rings to find the balance that feels best for your project.

Moving around the scene

You can explore the 3D scene using a combination of keyboard and mouse controls.

Basic Movement

  • W – move forward
  • S – move backward
  • A – move left (strafe)
  • D – move right (strafe)
  • ↑ (Up Arrow) – move up / elevate
  • ↓ (Down Arrow) – move down

Hold the left mouse button and drag to look around while you move.

Fly Mode with Q

Holding Q changes how forward/backward movement behaves and effectively puts you into a “fly” mode:

  • Hold Q and press W to move towards wherever you are looking.
  • Hold Q and press S to move away from where you are looking.

This lets you fly from the ground up towards your look direction (for example, looking upward and flying toward a point above you).

Fly Mode with Right-click

You can also switch into a fly-style navigation using the mouse:

  • Right click in the Scene to activate fly mode.
  • While in this mode, the camera’s look direction follows your mouse movement.
  • Use W and S to move towards or away from the point you are looking at.
  • Left click in the Scene to deactivate fly mode.

These controls make it easy to walk around at ground level, then quickly switch to flying through the scene when you need to inspect objects from different angles.

Scene Navigation

Scene navigation lets you create a series of steps that move the camera to predefined positions in the scene (for example: “Entrance”, “Center view”, “Back of room”). To open the navigation panel, click the Scene navigation button above the Scene.

Enable Navigation

Use the Navigation enabled toggle at the top of the panel to turn navigation on or off.

  • When enabled, the navigation steps are saved with the project and the navigation UI will appear in the shared project so viewers can jump between steps.
  • When disabled, the steps are ignored and will not appear in the shared view (but they remain stored and can be re-enabled later).
Adding Steps
  1. Move the camera in the Scene to the view you want to save.
  2. Enter a label in New step label (e.g. “Entrance”).
  3. Click Add current position.

A new step is added to the list. It stores both the label and the current camera position/rotation.

Managing Steps

Each step row provides several controls:

  • Label field: edit the text to rename the step (e.g. “Go to second tree”).
  • Drag handle: (⋮⋮) click and drag to reorder steps. The order you set here is the order used in the shared project navigation.
  • Location icon: moves the camera to the saved position for that step, so you can quickly preview or refine it.
  • Delete icon : removes the step from the list.

Once navigation is enabled and your steps are defined, viewers of the shared project can use the navigation UI to move through the scene step by step, following the path you have designed.

Getting the embed code

You can embed your Derinix project into any website that you control (for example, a client site, portfolio, or internal portal). To get the embed code, click the Get embed code button located above the Grid.

This opens the Copy the Code panel, which shows:

  • An information box explaining whether the project is Public or Private.
  • An <iframe> snippet containing the correct URL and attributes for embedding the project.
  • A Copy to Clipboard button so you can quickly copy the iframe code and paste it into your website's HTML.
Public vs Private Projects
  • Public projects The iframe URL works as-is. Anyone who can load the page where you embedded the iframe will be able to view the project.
  • Private projects The iframe uses the project URL, but the project cannot be viewed unless a valid share token is appended to the URL (for example, via an additional #ts=… fragment). Share tokens are single-use and time-limited, so copying the URL after a token has been used will not allow additional viewers to access the project. See the Private project sharing section for details on issuing and attaching share tokens. (See How to obtain token for private projects)

Once you have copied the iframe code, paste it into the HTML of your site wherever you want the Derinix scene to appear.

Sharing a Private Project

When a project is marked Private, it cannot be viewed unless a valid share token is provided in the URL.

This section explains how to obtain a share token from the Derinix API and how to append it to your iframe URL so that your users can view the private project.

1. Create an API secret

To call the Derinix API, you first need a client ID and secret associated with your account:

  1. Sign in to Derinix Studio.
  2. Click the account button in the top-right corner.
  3. Select API key from the dropdown menu.
  4. Create a new secret if you do not already have one.

For security reasons, secrets are only shown once when they are created. Store your secret in a safe place. If you lose it, you can generate a new secret at any time and update your integration accordingly.

2. Request a share token from the Derinix API

Use your client ID and secret to call the Derinix API endpoint https://studio.derinix.com/api/v1/privateshare/issue. 

POST https://studio.derinix.com/api/v1/privateshare/issue
X-Client-Id: <YOUR_CLIENT_ID>
X-Client-Secret: <YOUR_CLIENT_SECRET>

On success, the API returns a JSON payload similar to: 

{
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "expiresInSeconds": 1800
}
  • token – the share token you must append to the iframe URL.
  • expiresInSeconds – the lifetime of the token in seconds (for example, 1800 = 30 minutes).

Once the token expires, users will no longer be able to view the private project with that URL. You can request a new token at any time.

3. Append the token to your iframe URL

A typical Derinix embed uses an iframe similar to the following: 

<iframe
    id="derinixSceneIframe"
    width="100%"
    height="100%"
    frameborder="0"
    allowfullscreen
    allow="fullscreen; xr-spatial-tracking"
    src="http://studio.derinix.com/p223.html#t=rlB6-mPA8vY8FYY...">
</iframe>

In this URL:

  • #t=... identifies the project to load.
  • #ts=... will carry the time-limited share token.

After you obtain the token from the API, append it to the iframe URL as an additional fragment parameter #ts=YOUR_SHARE_TOKEN: 

<iframe
    id="derinixSceneIframe"
    width="100%"
    height="100%"
    frameborder="0"
    allowfullscreen
    allow="fullscreen; xr-spatial-tracking"
    src="http://studio.derinix.com/p223.html#t=rlB6-mPA8vY8FYY...#ts=YOUR_SHARE_TOKEN">

</iframe>

Both fragments - #t (project identifier) and #ts (share token) - must be present for a private project to load successfully. If the token is missing, invalid, or expired, Derinix will not display the project to the end user.

Summary

  1. Create an API secret from the API key menu under your account.
  2. Call /api/v1/privateshare/issue with your client ID and secret to obtain a share token.
  3. Append the token to your iframe URL using #ts=<token> alongside the existing #t=<project-token> fragment.

Following these steps ensures that only users with a valid, time-limited share token can view your private projects.

No FAQs so far

There are no FAQs at the moment, you're already ahead of the curve!
If questions start popping up, we'll add answers here.