Puzzles

The info on this page is outdated. Please refer to this page for up-to-date information.

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.

"is visible"

Checks if an object (or any of objects in a list) is currently visible. If it so, returns true, otherwise returns false.

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

"get material"

Retrieves the name of a material assigned to an object. If multiple materials are assigned to the same object, returns the first one.

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.

Scenes

The puzzles from this category perform loading/unloading operations with scenes.

"load scene" + "percentage"

When this puzzle is triggered, the current scene is unloaded and a new scene is loaded from a specified .gltf file. After loading is finished, the puzzles in the "when loaded do" slot are triggered. Also there can be enabled the "on progress do" slot. Puzzles placed in this slot are continuously triggered during the loading and can utilize the "percentage" puzzle.

"append scene" + "percentage"

When this puzzle is triggered, a new scene is loaded from a specified .gltf file and appended to the current scene. After loading is finished, the puzzles in the "when loaded do" slot are triggered. Also there can be enabled the "on progress do" slot. Puzzles placed in this slot are continuously triggered during the loading and can utilize the "percentage" puzzle. The "append scene" puzzle doesn't load cameras and lights from a new scene by default. This behavior can be changed in the puzzle's options.

"unload scene"

Unloads the specified scene or its part from the application. Use the empty text value in order to unload all scenes.

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"

This puzzle is deprecated. Use load scene instead.

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 data"

Attempts to load data from a specified location. The puzzles in the "once ready do" slot are interpreted regardless of whether the attempt was a success. The retrieved data can be accessed via the loaded data puzzle.

"send data"

Attempts to send a specified data to a remote location using an asynchronous POST HTTP request. The puzzles in the "once ready do" slot are interpreted regardless of whether the attempt was a success. If there is any response data, it can be accessed via the loaded data puzzle.

"loaded data"

Returns data retrieved by the load data or send data puzzles.

"read JSON"

Interprets text as JavaScript Object Notation data.

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

"save state"

Saves the state of specified objects and/or the values of variables specified by their names. The objects are cloned and stored in memory. The values of the variables are retrieved and stored in memory for each specified variable name.

If this puzzle is called several times, the states are saved in sequence so that it is possible to return to any previous state with the undo state puzzle.

"undo state"

Restores the state of objects and/or variables saved with the save state puzzle.

If this puzzle is called several times, the states are restored from the saved sequence (if any) which makes it possible to return to any previously saved state from the stack.

"all variable names"

Returns a list with the names of all variables used in Puzzles.

"variable value by name"

Returns the value of a variable specified by its name. This puzzle works similarly to the standard variable value puzzle, yet does not require to select a variable from the predefined dropdown menu.

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

"take screenshot"

Takes a screenshot of the viewport and outputs it in Data URI format.

AR/VR

These puzzles are used to enable web-based Augmented Reality (AR) and Virtual Reality (VR) experiences running on top of the in-development browser technology called WebXR (eXtended Reality on the Web).

These puzzles are considered experimental as WebXR is undergoing rapid development, with browser preview builds changing on daily basis. At the moment the AR puzzles are disabled until the specification is stabilized. In order to use the VR puzzles, we recommend to turn on the Legacy VR checkbox when creating a new project.

"init VR mode"

Initializes the virtual reality system. If successful, the puzzles in the "if available do" are triggered. Otherwise, if the browser does not support VR or VR hardware not found, the puzzles in the "if unavailable do" slot are triggered.

For more information with regard to supported VR devices and best practices see the User Manual.

"enter VR mode"

Enters the virtual reality mode. Puzzles placed in the "on enter do" and "on exit do" slots are triggered upon entering or exiting the VR mode. Puzzles placed in the "if unavailable do" are triggered if a VR session could not be established.

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

Procedure (aka function) is a named group of puzzles that performs a specific task. By organizing your puzzles in procedures you can make your scenarios more compact and maintainable.

A new procedure can be created by dragging out the procedure definition puzzle from the toolbox:

A newly created procedure puzzle can be renamed and filled up with other puzzles to perform some task:

To be able to trigger (to call) a procedure, drag out the corresponding puzzle from the toolbox:

A procedure can be triggered several times and from several places of a Puzzles scenario. This may allow for re-using puzzles rather than straight-copying similar set of puzzles several times. For example, an animation can be launched whenever the user clicks the object itself or an HTML button (thus securing duplicate controls).

A procedure may have additional input parameters (aka arguments). To add an input to your procedure, click the gear icon and drag out a parameter puzzle from the toolbox on the left, sticking it in the inputs puzzle:

To be able to use an input parameter inside a procedure, drag out the corresponding "get" variable puzzle created automatically in "Variables":

This variable can be used as a substitute for actual data (such as object names) to perform some task with.

When triggering a procedure with inputs, provide the data for each trigger puzzle.

You can jump from a trigger puzzle to the corresponding procedure definition puzzle using the right-click menu:

"procedure with return"

A procedure may output a computed value to its caller (aka return value). To create such a procedure, from the toolbox drag out the variant of the procedure puzzle with the return slot.

"if return"

A procedure may return a value upon some condition before all inside puzzles are interpreted. In this case the procedure stops running prematurely.

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.

"get GPU"

This puzzle is to be added in version 2.11.

Outputs the user's GPU info - vendor, for example: NVIDIA Corporation, Apple Inc., Qualcomm, and GPU model, for example: GeForce GTX 1060 3GB/PCIe/SSE2, Apple A9 GPU, Adreno (TM) 330.

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