Puzzles

Verge3D's Puzzles editor is a powerful tool for development of smart web applications of any complexity. With Puzzles, you can easily add behavior scenarios to your 3D content, making it interactive and responsive to user actions. This amazing tool can be used both for fast prototyping and in production. For 3D artists, this invaluable tool overcomes technological barriers of web development thus making it possible to apply their creativity in the realm of interactive 3D Web.
Basic operations with the Puzzles editor are described in the Beginner's Guide.

Initialization

These puzzles are located under the init tab and are interpreted before a Verge3D application is initialized.

"configure application"

Allows to set up application initialization parameters, including some WebGL context creation parameters.

"setup preloader" + "percentage"

Removes the default preloader and exposes event callbacks to allow for handling preloader progress events.

Events

The puzzles from this category handle user-generated events: mouse clicks / touches, hovering and dragging.

"when clicked"

Waits until a user clicks on a specified 3D object (or any object in a specified list or group, or any object on the scene if the all objects puzzle is used) - then runs puzzles in the "do" slot, or in the "missed: do" slot if the user clicks on something else or on the background.

"picked object"

Returns an object a user has clicked on. Intended for use with the "when clicked" puzzle.

"when hovered"

Waits until a user hovers over/out a specified 3D object (or any object in a specified list or group, or any object on the scene if the all objects puzzle is used) - then runs puzzles in the "over/out: do" slot.

"hovered object"

Returns an object a user has hovered over. Intended for use with the "when hovered" puzzle.

"when moved"

Tracks any movements (position, rotation and scale) of a specified object (or any object in a specified list or group, or any object on the scene if the all objects puzzle is used). Runs puzzles in the "start: do" slot if an object started moving, keeps running puzzles in the "while moving: do" slot until an object stops moving, then runs puzzles in the "stop: do" slot. The "delta" parameter denotes an absolute change of any coordinate (x, y or z) of either of position, rotation or scale that is required to trigger this puzzle. The "period" parameter denotes how many rendering frames should the puzzle wait before checking movements again.

"when dragged"

Waits until a user drags over a specified 3D object (or any object in a specified list or group, or any object on the scene if the all objects puzzle is used) with the mouse or a touch gesture - then generates movement data for using in a "drag move", "drag rotate" or "drag scale" puzzle. Also captures events of started and stopped dragging.

"drag move"

Moves a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the all objects puzzle is used) in accordance to dragging movement data generated by the when dragged puzzle. Use the drop-down menu to limit the movement to a particular axis or plane, or not to limit at all.

"drag rotate"

Rotates a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the all objects puzzle is used) in accordance to dragging movement data generated by the when dragged puzzle. Use the drop-down menu to limit the rotation to a particular axis. The "space" drop-down allows for switching between "local" and "parent" coordinate spaces.

"drag scale"

Scales a specified 3D object (or all objects in a specified list or group, or all objects on the scene if the all objects puzzle is used) in accordance to dragging movement data generated by the when dragged puzzle. Use the drop-down menu to limit scaling to a particular axis.

Selectors

The puzzles from this category are used to select 3D objects, groups, animation clips and materials to fit in other puzzles.

"select object"

The drop-down contains an alphabetized list of all objects on the scene.

"all objects"

Denotes all objects on the scene so that an operation can be applied to them in bulk. Not iterable.

"select group"

The drop-down contains an alphabetized list of all object groups presented in the scene. An operation can be applied to a group of objects in bulk. Not iterable.

"select animation"

The drop-down contains an alphabetized list of all animation clips presented in the scene. An animation clip is named according to the object to which animation is applied in 3ds Max or Blender.

"select material"

The drop-down contains an alphabetized list of all materials that are present in the scene.

Objects

The puzzles from this category perform various operations with objects.

"show"

Makes a specified object, that was initially or previously hidden, visible. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"hide"

Makes a specified object invisible. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"clone"

Makes an object copy, generates a unique name for the new object and immediately adds it to the scene. Outputs the new object. Does not work with lists, groups or the all objects puzzle.

"snap to object"

Moves an object to the position of another object by copying its transform data. Also copies rotation and scale. Does not work with lists, groups or the all objects puzzle.

"set transform"

Moves, rotates or scales an object according to specified transform data. The "offset" checkbox enables moving/rotating/scaling an object relatively to the original position/rotation/scale. Any of the axis inputs can be left blank. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"get transform"

Retrieves the position, rotation or scale data of an object. Does not work with lists, groups or the all objects puzzle.

"change local transform"

Moves, rotates or scales an object according to specified transform data in its local space. Any of the axis inputs can be left blank. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"add annotation"

Add a 2D marker to an object that a user can expand by clicking on it to see the object description. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"remove annotation"

Removes a previously added annotation from an object. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"update text object"

Generates a new mesh for a text object according to specified textual content. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"parent"

Creates a parent relation between objects, so that the first object follows position/rotation/scale of the second one. Does not work with lists, groups or the all objects puzzle.

"distance"

Outputs the distance between two specified objects. Does not work with lists, groups or the all objects puzzle.

"outline"

Applies or removes the outline effect to/from a specified object. To unlock this puzzle, enable the outline effect in 3ds Max or Blender. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

Materials

"assign material"

Assigns a material to an object, completely replacing the old material. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle.

"replace texture"

Replaces a texture found for a specified material with the one loaded from the provided URI.

"set color"

Set R, G and B components of a color parameter found for a specified material.
For 3ds Max users: you can add Controllers in your materials (standard or physical) and their names will be shown in the dropdown menu. In addition, diffuse (or "base") color inputs for standard or physical material nodes are also accessible. In case of glTF-compliant PBR materials the Base Color and Emission inputs are only accessible with this puzzle.
For Blender users: you can add RGB nodes in your node-based materials (GLSL Internal, Cycles, Eevee) and their names will be shown in the dropdown menu. In addition, diffuse (or "base") color inputs for Material, Extended Material, BSDF Principled, BSDF Diffuse and BSDF Glossy nodes are also accessible. In case of glTF-compliant PBR materials the BaseColor and Emissive inputs are only accessible with this puzzle.
This puzzle can also be used to modify the environment shader. In the drop-down, the name of the environment shader starts with "Verge3D_Environment".
For more information on materials available to Verge3D users, please refer to Material system overview chapters of this manual: 3ds Max, Blender.

"set value"

Set a value parameter found for a specified material.
For 3ds Max users: you can add Controllers in your materials (standard or physical) and their names will be shown in the dropdown menu. In case of glTF-compliant PBR materials the following inputs are accessible with this puzzle: Metalness, Roughness, Bump Scale, Emissive Intensity and Environment Map Intensity.
For Blender users: you can add Value nodes in your node-based materials (GLSL Internal, Cycles, Eevee) and their names will be shown in the dropdown menu. In case of glTF-compliant PBR materials the following inputs are accessible with this puzzle: metalness (MetallicFactor in PBR node), roughness (RoughnessFactor in PBR node), bumpScale (NormalScale in PBR node), emissiveIntesity (EmissiveFactor in PBR node) and envMapIntensity (not presented in PBR node).
This puzzle can also be used to modify the environment shader. In the drop-down, the name of the environment shader starts with "Verge3D_Environment".
For more information on materials available to Verge3D users, please refer to Material system overview chapters of this manual: 3ds Max, Blender.

Animation

The puzzles from this category perform operations with animation clips.

"play animation"

Plays an animation clip. Animation clip names correspond to objects to which animation is assigned in 3ds Max or Blender (only one animation clip can be assigned per object). Use the animation selector puzzle to provide an animation clip for this puzzle.
Use the "from" and "to" fields to specify the frame range. Use the "speed" field to specify the playback speed. The "reversed" checkbox enables reversed playback. The drop-down can be used to change the animation mode - "auto" allows for using the animation mode specified in 3ds Max or Blender, while the other modes override the settings specified in 3ds Max or Blender.
Puzzles in the "when finished: do" slot are processed once the animation is finished (this only is valid for the "once" animation mode).
This puzzle also works for a list of animation clips.

"stop animation"

Stops playing back an animation clip. Also works for a list of animation clips.

"pause animation"

Pauses an animation clip playback so that it can be resumed later starting from the frame it was paused on. Also works for a list of animation clips.

"resume animation"

Resumes a previously paused animation clip. Also works for a list of animation clips.

"set animation frame"

Sets an animation clip to a specified frame. Also works for a list of animation clips.

"is animation playing"

Checks if an animation clip (or any of animations in a list) is currently being played back.

"get animation"

Retrieves a specified object's animation clip. Also works for a list of objects, a group (or a list of groups) or with the all objects puzzle. The return value is always a list of animation clips (even if there is only one of them).

Camera

The puzzles from this category perform operations with the camera.

"look at"

Smoothly animates the active camera so that it finally targets a specified object. The numeric parameter specifies the time period over which the animation is performed (in seconds).

"tween camera"

Smoothly animates the active camera so that its position finally changes to the position of a specified object, and the camera targets another specified object. The numeric parameter specifies the time period over which the animation is performed (in seconds).

"set active camera"

Makes a specified camera active. This can be used to change camera control mode ("orbit" vs "flying" vs "no controls"), field of view and other settings on the fly.

Misc

Miscellaneous puzzles to perform various operations on a high level.

"open web page"

When this puzzle is triggered, a specified URL is opened in a new or in the same browser tab depending on the drop-down selection. When triggered from the Puzzles editor, it will ask for a user confirmation before leaving the tab.

"social share link"

Generates a link for sharing your application in popular social media.

"replace scene"

When this puzzle is triggered, the current scene is unloaded and a new scene is loaded from a specified .gltf file. After loading is complete, the puzzles in the "when loaded do" slot are triggered.

"call JS function"

Executes a function specified in the JavaScript code of the application. Optionally passes parameters to be used as function arguments.
In order to add a function to JavaScript code, open the application .js file (for example, my_awesome_app.js located in verge3d/applications/my_awesome_app) with any text editor. Search for "prepareExternalInterface" and add your function inside that declaration (between the curly brackets), so that it looks like this:
function prepareExternalInterface(app) { app.ExternalInterface.myJSFunction = function(numericArg, textArg) { alert('Got some params from Puzzles: ' + numericArg + ' and ' + textArg); } }

"when called from JS"

Allows for triggering Puzzles from the JavaScript code of the application. Optionally retrieves parameters passed from the JavaScript code and saves them as variables to be used by puzzles in the "do" slot.
In order to trigger this puzzle from the JavaScript code, open the application .js file (for example, my_awesome_app.js located in verge3d/applications/my_awesome_app) with any text editor. Search for "runCode" and add a function call inside that declaration (between the curly brackets), so that it looks like this:
function runCode(app) { app.ExternalInterface.myJSCallback('Hello, Puzzles!', 80); }

"load file" + "loaded data"

Attempts to load a specified file. The puzzles in the "once ready do" slot are interpreted regardless of whether the attempt was a success. The "loaded data" puzzle returns the contents of the loaded file.

"read_CSV"

Interprets text as comma-separated values. Returns a list of table rows, with each row represented as a list of values. The delimiter can be selected with the drop-down to correspond a CSV file's export settings. "From row" value denotes how many rows will be skipped starting from the top.
Table rows and values are accessed by their numeric indices starting from 0.

"place order"

Composes a hidden order form with the "title", "contents" and "total price" fields and an optional screenshot and submits this form to a specified URL according to the specification explicated in the Wordpress Plugin section. By default the order form is submitted to the demo ordering page.
Verge3D comes with a free Wordpress plug-in that is able to handle requests submitted by this puzzle. Upon receiving such a request, this Wordpress plug-in renders a page with an extended form supplemented with contact and comments fields, the embedded screenshot and a captcha. Filled out form is finally submitted by the customer and a new order is created in Wordpress admin interface. Both the customer and the sales manager are notified about the order by e-mail.
Please refer to the Wordpress Plugin section of this Manual for setup information.
Be sure to enable screenshots in the configure application puzzle otherwise the screenshot may be rendered in black.

"feature available"

Check if a feature selected from the drop-down is available in the user's browser.

Time

These puzzles generate time-based events.

"after"

Waits for a specified amount of time and then triggers puzzles placed inside the "do" slot.

"every"

Waits for a specified amount of time and then triggers puzzles placed inside the "do" slot. Then repeats.

"every frame"

Triggers puzzles placed inside the "do" slot every rendering frame (normally at the rate of 60 frames per second).

"elapsed"

Outputs the amount of time (in seconds) passed from the previous rendering frame. Can be used with the "every frame" puzzle to implement frame-independent animation.

HTML

These puzzles manipulate HTML DOM elements.

"add HTML element"

Creates an HTML element with a specified type and identifier (corresponds to "id" attribute) and appends it to the document body. Also sets its style property "position" to "absolute".

"get attribute"

Gets an attribute from an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe).

"set attribute"

Sets an attribute for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). Also works with lists of element ids.

"set style"

Sets a CSS property for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). Also works with lists of element ids.

"set css rule"

Sets a CSS property for a specified CSS rule (found in .css files of an application). The "in parent doc" checkbox should be enabled if the style sheets belong to an external HTML document (in which Verge3D application's .html file is embedded using iframe).

"event"

Registers an event listener for an HTML element with a specified id. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). Once an event occurs, the puzzles placed in the "do" slot are triggered. Also works with lists of element ids.

"get event property"

Outputs the value of a property of an event generated by the "event" puzzle.

"document"

Represents the DOM document object - the root node of an HTML document.

"body"

Represents the DOM body object - the <body> element of an HTML document.

"draw line"

Connects a specified 3D object with a specified HTML element by a dynamically updated line. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). You can also set the width, color and offset for the line.

"remove line"

Removes a previously created line from a specified object.

"bind element"

Makes a specified HTML element follow the center of a specified 3D object in screen space. The "in parent doc" checkbox should be enabled if the HTML element is located in an external HTML document (in which Verge3D application's .html file is embedded using iframe). A more customizable variant of the "add annotation" puzzle.

"init fullscreen"

Makes a specified HTML element behave as a fullscreen mode button - the first click on it triggers entering the fullscreen mode, the second click exits fullscreen. Puzzles placed in the "on enter do" and "on exit do" slots are triggered upon entering or exiting the fullscreen mode. Puzzles placed in the "if unavailable do" are triggered if fullscreen is not supported by the browser (e.g. iOS Safari).

Sound

These puzzles are used to load and play back HTML5 sounds.

"load sound"

Creates an HTML5 audio element and loads a sound file using a specified URL. This puzzle also adds the created audio element to a memory cache so that any subsequent uses of this puzzle with the same URL do not load the same sound file again. Using .mp3 format is recommended as it is supported by most web browsers.

"play sound"

Starts audio playback. The loop checkbox repeats sound playback if enabled.

"pause sound"

Pauses audio playback.

"rewind sound"

Sets the audio element to play a sound from the start.

"set volume"

Sets the sound volume. Input volume is clamped to the 0.0-1.0 range.

"is playing"

Checks if a sound is currently being played back.

Constraints

These puzzles are used to constraint object movement. If an object is not parented to another object, the constraints will work in world space. Otherwise they will work in the parent object's space - you can select the parent object in 3ds Max or Blender to show up the coordinate axes.

"limit transform"

Sets up a constraint to limit object position, rotation or scale along a selected axis. A specified id should be unique, otherwise an existing constraint with the same will be replaced. The "min" and "max" slots specify the range between the movement is allowed.

"copy transform"

Sets up a constraint to copy object position, rotation or scale from another object. A specified id should be unique, otherwise an existing constraint with the same will be replaced.

"operations"

Removes, mutes or unmutes a constraint with a specified id assigned to a specified object. Other constraints assigned to this object (if any) will remain intact.

Post-processing

These puzzles are used to setup various post-processing effects.

"bloom"

Enables the bloom effect.

"brightness/contrast"

Allows for tweaking brightness and contrast of the rendering.

"depth of field"

Enables the depth of field (DOF) effect.

"grayscale"

Enables the grayscale effect.

"ambient occlusion"

Enables the screen space ambient occlusion (SSAO) effect.

"remove post-processing effects"

Removes all postprocessing effects.

Variables

Variable is a named value that can be changed (varies). Variables can be created in several different ways:
A typical use case for variable is when you have an object that can be in several states. For example, a door can open or closed, and if you want to animate it properly you need to know in which exactly status it is now.

"set"

This puzzle assigns a value to a variable.

"get"

This puzzle provides the value stored in a variable, without changing it.

"change"

Increments the value stored in a variable by a specified number. If the initial value is not numeric, or not set, then it is considered to be zero which is incremented.

Procedures

Coming soon!

Debug

"print to console"

Prints data of any type to the browser console. The latter can usually be opened with the F12 key (Chrome, Firefox on Windows, Linux). On Mac use the View > Developer > JavaScript Console menu (Option-Cmd-J) in Chrome, or the Develop > Show Error Console menu (Option-Cmd-C) in Safari.

"print performance info"

Records a performance profile during 1 second and prints it to the browser console. The latter can usually be opened with the F12 key (Chrome, Firefox on Windows, Linux). On Mac use the View > Developer > JavaScript Console menu (Option-Cmd-J) in Chrome, or the Develop > Show Error Console menu (Option-Cmd-C) in Safari.

Library

Library is a persistent storage for groups of puzzles for re-use in multiple projects. You can add a puzzle group to the library by right-clicking on it and selecting the option Save N Puzzles to Library. In the modal window type the name for the group as it will appear in the library's list of entries (refresh it by reloading the Puzzle editor).
A saved group of puzzle can be retrieved from the library by dragging it out to a workspace.
An entry can be deleted from the library by clicking Delete this item button (refresh the list of entry by reloading the Puzzle editor).