Pop-Out Menu

Project Name

At the top of the pop-out menu, you find the project name of the currently loaded project and your display name.

If you click on the project name, you see its document properties. Here you can edit the name, description, and permissions, and you can move it and see which assets it’s using. For more information, refer to the Document Properties section in the Storage Directory chapter.

Saving & Sharing

Save

The Save button saves your project to the Storage Directory. If it’s the first time you save a project, it will bring up the document Properties Form after the save so that you can change the name, description, and storage folder. If it’s an existing project, it will be updated in situ, and its version number will be incremented by 1. If it’s a new project, it will be saved in the current folder of the directory, or to the top-level Root folder if the directory hasn’t been opened yet in this session.

Save As

The Save As button saves a copy of the current project under a new name in the same folder as the old project. The old project is unaffected (note that if changes have not been saved before the copy is saved, those will not saved to the old projected, but to the new copy). The copy becomes the project currently being edited. The version of the copy will be set to 1.

After the save, the document Properties Form will be brought up, so that you can change the name, description, and storage location.

Open

The Open button will open the Storage Directory and show projects you have saved, and projects others have created that you have permission to open. If you open a project created by someone else, you cannot Save it (only the owner can update a project), but you can use Save As to create a copy (however, you cannot save it into a folder you haven’t created, so make sure the current folder is yours when performing the save).

New

The New button creates a new empty project. It’s given the name Untitled until you save it, at which point you’ll be prompted to give it a name. It’ll be saved into the current folder of the Storage Directory, or into the top-level Root folder if the directory hasn’t been opened yet in this session.

Home

The Home button opens the Storage Directory in browse mode, so that you can see all documents, both projects and assets (images, videos, audio tracks, and 3D models). This is a convenient way to organize your documents, as you can move them and create new folders. You can also change permissions on your documents, make them public, or share them with specific users.

Share

The Share button will give you a URL you can share with anyone. The URL will bring up a view only version of your project, where it can not be edited or saved.

Before you share a project, make sure that it, and all its assets, are marked as public. If they are not, you will get an error message when you try to share.

User Section

If you click ►User in the Pop-Out Menu, the user section will be shown. The Display Name can be updated at any point, and doesn’t have to be unique (many users can have the same display name). It is shown next to projects and assets that you share. It can be used when someone wants to share a document with you; however, if your display name is not unique, the user must use your ID (see below) to share a document with you.

The Email and ID properties are uniquely identifying your account and cannot be updated. Your email is private and is never shared with other users of the app.

The Member entry shows your level of membership.

The Documents entry shows how many documents you have created (projects, assets, and folders), and how many you may create at your member level.

The Storage entry shows how much storage your documents are using, and how much storage is available at your member level.

You click the Sign Out button to sign out of VerkLabs Designer.

Project Section

In the ►Project section, you have parameters that affect the project.

Frame Rate

Shows the current frame rate. If the frame rate consistently drops below 60 fps, you might want to look at possible simplifications or optimizations.

Background

The scene background can be set to a homogeneous color by clicking the Pick Color button.

Alternatively, set the background to an equirectangular texture defining a skybox (covering all six sides, so that the background covers 360 degrees in all directions). An equirectangular image almost always has a 2:1 aspect ratio.

Camera

Here you set the setting for the near and far clipping plane of the camera.

Near Clipping Plane

• The closest distance the camera can see. Objects closer than this value will be invisible (clipped). Think of it as the camera’s minimum focus distance.
• Typical values: 0.1 - 1.0
• Default: 0.1

Far Clipping Plane

• The farthest distance the camera can see. Objects beyond this distance will be invisible (clipped). Think of it as the camera’s maximum view distance or fog limit.
• Typical values: 100 - 10,000
• Default: 1000

Note: If you set-up camera animation you can also set the Field of View for the camera used in the animation.

Grid Helper

Shows a grid to help orientation within the scene. By default this is on.

Highlight Selected

The selected object is highlighted with a yellow grid pattern. By default this is on. When this is off, there is no visual indication of which object is selected.

Upload and Download

The Upload button allows you to upload a project you have on your local machine. Note that the project will presume all necessary assets exist in the storage directory. Project downloads do not include assets.

With the Download button , you can download a project to your local machine as a JSON file. Storing it in the online storage directory is strongly preferred, but sometimes you might want to store it locally. If the project uses assets, they are included as references in the project, but they are not downloaded. When a project is later uploaded, the assets must still be available in the directory.

Light & Shadow

This section controls the built-in light support affecting PBR Lighting and shadow generation.

Light Type

Directional Light

A light source that emits parallel rays in a single direction, simulating an infinitely distant light source like the sun.

• All light rays are parallel
• Illuminates everything equally from one direction
• Position doesn’t matter, only direction
• Uses orthographic shadow camera (parallel projection) - shadows maintain same size regardless of distance

Normally, directional light has no distance attenuation, but we support it in PBR Lighting.

When you use the Light Helper, directional light is represented as a box.

Spot Light

A light source that emits light in a cone shape from a specific point, like a flashlight or stage spotlight.

• Emits from a point in a cone direction
• Has both position and direction
• Intensity decreases with distance (falloff)
• Cone angle controls spread of light
• Penumbra (soft edge) creates gradual falloff at cone edges
• Uses perspective shadow camera (realistic depth-based shadows)

When you use the Light Helper, spot light is represented as a cone.

Light Position

The position of the light source.

Light Towards

Determines the direction of the light (from the source to this point).

• Directional Light: All light rays travel parallel in this direction (like sunlight)
• Spot Light: The cone’s central axis points in this direction (like where you aim a flashlight)

Light Strength

The overall light strength in the scene. If it’s too high, objects turn white. If it’s too low, they turn black. The light can be adjusted on an object-by-object basis using lightAdjustment in the PBR Lighting node.

Shadow Coverage

The size of the shadow camera, i.e. the size of the box for directional light and the size of a cone for spot light.

Shadow Near/Far

The near clipping plane and far clipping plane of the shadow camera. Outside this range, no shadows will be thrown. This is illustrated as two planes in the Light Helper.

Light Helper

The light helper visualizes where the light source is located and where it’s pointing. The light helper also shows the range within which shadows are rendered.

Camera Animation

This section provides general parameters used to control a camera animation. The animation path is set up with the Path Editor using direct manipulation in the scene viewer.

Path Editor

To create an animation, press the Path Editor button.

You will see two interconnected curves in the scene viewer that outline the camera animation path. The camera moves along the green curve with the orange points. The yellow dot indicates the beginning of the animation path (and the end, if it’s a connected path). The camera’s viewing direction is towards the blue curve with the blue points. There is one point on the viewing path for each point in the animation path. The turquoise dot correspond to the yellow dot in the camera path.

You can move any point in the motion or viewing path by dragging it. The clicked point will be highlighted with three arrows in the X, Y, and X directions, and dragging the arrows rather than freely moving the point moves the point in the direction of the arrow.

If you right-click (or use the equivalent gesture on your device, e.g. tap with two fingers on a touch pad) on a point in the motion curve, a new point is created at the same position. You can drag the two points apart and thus make the curve more complex. If you hold Shift and right-mouse-click on a point, the point will be removed from the curve.

If you click + or = when you have selected a point on the motion curve, the default animation motion speed is increased by 10% at and around that point. If you click - or _, the motion speed is decreased 10%. This enables you to adjust the speed along the motion curve. The speed is indicated with a dashed yellow curve along the motion curve. The the dashed curve is above the motion curve the speed is faster than the default speed. If the dashed curve is below the motion curve the speed is slower than the default speed.

The button at the top (which is visible and clickable even when this section is closed) starts the automated animation. You can then stop it by clicking the stop button , or pause with the pause button . These controls are also available in the control bar at the bottom of the screen.

Position Wheel

By turning the Position Wheel, the animation can be emulated by moving the camera forward and backward along the animation path. In the lower left-hand side, an inset shows the view from the camera as it moves along the animation path.

Animation Speed

By moving the Speed indicator, you can increase or decrease the default speed of the automated animation.

Start Offset

The Start offset let’s you start the animation later along the animation path rather than the first point.

Path Type

The Path Type indicates if the path is closed, i.e. continuous (the end and the start are connected), or if it’s open, i.e. has disconnected ends. If the type is open, the animation will restart at the beginning once it reaches the end, making a discontinuous “jump” in the animation.

Field of View

The Camera FOV (field of view) allow you to adjust the camera used in the animation. A smaller field of view zooms in, while a larger field of view gives the camera a more wide angle view.

Object List

This is a list of all objects in your scene.

Adding New Object

The Add… drop-down allows you to add new objects to your scene. New objects are added to the list and to the center of the scene viewer.

Selecting an Object

Select an object by clicking on the row for the object in the list, or by clicking on the object in the scene viewer. A selected object is highlighted with a yellow grid pattern in the scene viewer (unless highlighting has been switched off).

Once an object is selected, the object properties and orientation can be edited below the Object List.

Unselecting an object

Unselect an object by clicking it again in the Object List or in the scene viewer.

Hide Object

Hide an object by unselecting the checkbox to the left in the list.

Delete Object

Delete an object permanently by clicking the trash icon .

Object Properties

Here you can see and edit the properties of the currently selected object.

Type

The Type of object (e.g. Sphere or Box)

Label

The Label of the object, as shown in the Object List and in the Shader Editor.

Shaders

Click the edit button to open the Shader Editor for the material and deformations of the object.

With the Copy from… drop-down, you can copy a shader from another object in the scene.

Parameters

This property defines basic size and segment resolution parameters for an object.

Scale

A quick way to resize the object. The absolute size is determined by the scale and the size, as set in the Parameters property above.

Speed

You can adjust the animation speed for an object using the Speed property.

Time

An indicator of the current time for the object. Using the speed slider above, you can slow down or speed up the time on an object.

Transparency

Determines if the object is transparent. Use if the material isn’t fully oblique.

Clickable

Makes the object impossible to select from the scene viewer.

Wireframe

Visualizes all vertices and edges from which the object shape is built. Note that if deformations are applied with a shader, they will not be visible in the wireframe.

Material Sides

Determines which sides of the object will use the material. A side without material is not visible. Since many objects (like a sphere or a box) are only seen from the outside, applying the material to the Front side is often enough.

Build Recipe

This experimental section is only visible when a Builder object has been created.

With the Builder, a new object is built from a recipe. The recipe is a JSON structure that describes a particular kind of object.

This is an experimental section under development. We will release more information as soon as it’s ready. The Builder can create complex structure that would be hard to create manually.

Object Orientation

Here you can see and edit the position and orientation of the currently selected object.

Position

If you click the Position Editor button, you enable the position editor. When it is active, you can move an object around in the Scene Editor. You can also enable the Position Editor by holding down the Shift key when clicking on an object in the Scene Editor. You know it is active for an object when three arrows are displayed in the x, y, and z directions.

If you cannot see the arrows, it may be because the object completely covers them; if you zoom out, you will eventually be able to see them.

You can either drag the object itself, which moves it along an imaginary surface perpendicular to your line of sight, or you can drag one of the arrows, which moves the object along the x, y, or z axis.

When you enable the Position Editor, the Focal Point will be turned off.

Orientation

The Rotate (around Y), Tilt (around X), and Roll (around Z) properties determine the orientation of the object.

Orbit

The Orbit Plane, Orbit Speed, Orbit Radius, Orbit Ratio (B/A) properties determine the orbit of an object. For more flexibility and closer integration with your shaders, use the orbit nodes in the shader editor.

An object can orbit along an ellipse in the scene. These properties determine how and at what speed it orbits. Using the Orbit Plane Editor and the Orbit Helper, you can visualize the orbit.

Use the Orbit Plane Editor to reorient the plane of the orbit. The plane is shown as a grid of blue squares. The normal of the plane is shown as a yellow axis. You orient the plane by dragging either the green or red arrow.

Rotation

The Rotation Axis and Rotation Speed properties controls an objects rotation. For more flexibility and closer integration with your shaders, use the rotation nodes in the shader editor.

An object can rotate around an axis. With the Rotation Axis Helper, you orient the axis around which the object rotates. With the Rotation Speed, you determine how fast it rotates.

By dragging the red and green arrow, you reorient the rotation axis shown in yellow.

Orbit Around

You use the Orbit Around drop-down to make the object orbit around another object. The other object might itself orbit, creating nested paths (like a satellite orbiting a planet).