Launch App

VerkLabs Designer Reference Manual

Build interactive 3D scenes, shaders and music in your browser

Project Settings

This chapter covers the Scene Viewer’s own controls in Editor Mode – the Canvas Top Bar, its Drop-Down Menu, and the three panels they open: Settings, Camera Animation, and Objects. These all work at the project level. For controls specific to a single object, see the Object Properties chapter.

Canvas Top Bar

The Canvas Top Bar sits above the Scene Viewer and stays visible at all times while editing.

Save

The Save button saves your project to My Files. 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 be saved to the old project, 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 opens My Files, showing projects you have saved and projects others have created that you have permission to open – a convenient way to browse and organize all your documents, as you can move them, create new folders, and change permissions. 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 My Files, or into the top-level Root folder if the directory hasn’t been opened yet in this session.

An empty project opens with a welcome window that offers ways to get going: Create an object, Start learning (the guided Lessons), Make music (a lesson where you play an instrument over a backing track) and See what is possible (the examples). Open a saved project… is at the bottom. Untick Show this when I start a new project to skip the window; a new project then opens with the Objects window instead.

Add/Remove Objects

Opens the Objects panel (see below).

Manage Instruments

Opens the Instruments window, where you add, load, and delete the instruments used by the project’s Music events – see Instruments and Music.

Layout Toggles

Toggle Runsheet opens and closes the Runsheet.

3D/Objects shows the Scene Viewer with the selected object’s Node Editor open alongside it (or floating on top of it – see the Object Properties chapter for the layout toggle in its own title bar). Notes shows the Piano Roll in place of the Scene Viewer, with the current Music event’s instrument open in the node editor – see Instruments and Music. Clicking either button again closes it; they’re mutually exclusive, and each remembers its own docked/floating layout independently. They live here rather than on either editor’s own title bar because they’re an overall interface-layout choice, not something specific to the object being edited.

Account

On the right of the bar, the current project’s file name, and your sign-in status – click it to sign in, or to see your account. Hover over the file name to see the project’s credit (the same “© creator” shown in Viewer Mode’s Media Bar).

Once signed in, your account panel shows:

  • Display Name – can be updated at any point, and doesn’t have to be unique (many users can have the same display name). It’s shown next to projects and assets that you share, and 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 instead.
  • Email and ID – uniquely identify your account and cannot be updated. Your email is private and is never shared with other users of VerkLabs.
  • Member – your level of membership.
  • Documents – how many documents you have created (projects, assets, and folders), and how many you may create at your member level.
  • Storage – how much storage your documents are using, and how much is available at your member level.
  • Sign Out – signs you out of VerkLabs Designer.

Drop-Down Menu

The Drop-Down Menu (the icon at the left of the Canvas Top Bar) opens with further controls:

  • Stop, Pause, and the device toggles for Microphone, Camera, and Audio.
  • Fullscreen, to fill the whole screen with the project.
  • Present…, to show the Scene Viewer on another display, such as a projector (see Presenting).
  • Share (see below).
  • Settings…, Camera Animation…, and Objects… (see below) – each opens its own small floating panel on top of the canvas, which you can drag out of the way rather than a full-screen dialog blocking your view.
  • Runsheet, 3D/Objects, and Notes, mirroring the same toggles in the Canvas Top Bar.
  • About, with information about VerkLabs Designer.

Share

The Share entry gives you a URL you can share with anyone. The URL will bring up a view only version of your project (Viewer Mode), where it cannot 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.

Settings

Opened from Settings… in the Drop-Down Menu.

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.

A reflective box surrounded by a 360 degree background created with an equirectangular image.

(source)

Resolution & Orientation

Sets the canvas’s export resolution (e.g. 1080p, 4k) and orientation (horizontal/vertical), independent of your browser window size.

Node Editor Position

Where the docked Node Editor sits: beside the canvas or under the canvas (a splitter between them, dragged up and down, sets how much room each gets; the Runsheet stays the strip at the bottom of the window). Automatic, the default, puts it under the canvas when the window is taller than it is wide, such as a phone held upright, and beside it otherwise. The Piano Roll, docked, fills the whole canvas area in either layout.

Camera

Here you set 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 – see Camera Animation below.

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 My Files. 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 My Files 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.

Next to the download button are two buttons for the music in the project. The music button downloads (or saves to My Files) every Music track as one MIDI file, for use in a DAW. The music pack buttons download, save and add a music pack: the audio part of the project (tracks, notes, instruments and audio references) to use in another project. See MIDI Files and Music Packs.

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.

Light Color – the color of the light. It is multiplied into the Light Color of every PBR Lighting node, so white (the default) changes nothing, and a warm or cold color tints every lit object at once. A Color event on the Light track of the Runsheet can change it over time.

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 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.

Helpers

  • Light Helper – visualizes where the light source is located and where it’s pointing, and the range within which shadows are rendered.
  • Grid Helper – shows a grid to help orientation within the scene. On by default.
  • Highlight Selected – highlights the selected object with a yellow grid pattern in the scene viewer. On by default; when off, there’s no visual indication of which object is selected.

Music

  • Music Playback – Pre-rendered (smooth) renders each Music event once in the background and plays it back as audio; Live has every note played by its instrument as it comes, so changes to an instrument are heard at once. See Instruments and Music.

  • Time signature – how many beats are in a bar: 2/4, 3/4, 4/4 (the usual), 5/4, 6/4 or 7/4. The beat is always a quarter note, so 3/4 is a waltz. The bar lines, the bar.beat counter and anything set in bars follow it. Notes already written keep their positions in beats, so changing the time signature moves where the bars fall. Lessons that need another time signature (a waltz or a minuet) set it themselves. See Bars, Beats and Seconds.

  • Stop an Open Run After – a Live event of open length keeps the run going until you click Stop; this stops the run after 5, 15 or 30 minutes without anything played (or never). See Open Live Events.

  • Style of Play – how the written notes are played: Straight (as written), a style such as Jazz ballad or Tight funk, or a playful one such as Drunk pianist or Robot. The notes themselves never change. Amount sets how much of the style is applied, and Re-roll Randomness picks new small random variations. See Style of Play.

  • MIDI – connects a MIDI keyboard or controller. Pads sets the channel the pads send on and the drum instrument they play, Controls holds the sixteen knobs, faders and strips of the project, each learned by clicking Learn and moving the control, and Commands runs the project from a pad or button (Start, Continue, Stop, Record, Undo). See Playing from a MIDI Keyboard.

Music Recording

How the Record button on the little piano works when you play a Live Music event: Length (to the end of the Live event, until you click Stop, or a number of bars), Loop, Quantize and Click (a metronome count-in). See Recording What You Play.

Visual Recording

Controls the quality of screen recordings made from the project: Rec. Quality, Rec. Speed, and Rec. Bitrate, plus Rec. Runsheet to have a run of the Runsheet recorded automatically.

Runsheet

Run on Load and Run Loop – whether the Runsheet starts automatically and whether it repeats.

Devices

If your project uses the microphone or camera, a Devices section appears here letting you pick which physical device to use for each.

Camera Animation

Opened from Camera Animation… in the Drop-Down Menu. This panel 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, click 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 corresponds 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 Z 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. Where the dashed curve is above the motion curve, the speed is faster than the default speed; where it’s below, the speed is slower.

The play button at the top (which is visible and clickable even when this panel is closed) starts the automated animation. You can then stop it with the stop button , or pause with the pause button . These controls are also available in the Media Bar and Drop-Down Menu.

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 lets 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) lets you 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.

Objects

Opened from Objects… in the Drop-Down Menu, or Add/Remove Objects in the Canvas Top Bar. This is a list of all objects in your scene.

Adding a 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 – see Helpers above).

Once an object is selected, its properties and orientation can be edited in the Object Properties panel.

Unselecting an Object

Unselect an object by clicking it again in the Objects list or in the scene viewer.

Hide Object

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

Delete Object

Delete an object permanently by clicking the trash icon .