Projects with different scenes, parameters, and Puzzles branching

From Verge3D Wiki
Jump to navigationJump to search

Starting from Verge3D 4.12 you can handle multiple subfolders inside projects gracefully (this feature is officially supported).

In addition, we also implemented an experimental feature to create custom app launchers. These launchers allow you to run app's main HTML (and Puzzles editor) with different glTF assets as well as different URL params. For example, you can create a 3D configurator with completely different models all handled by the same Puzzles logic. Or you might use this feature to create a browser game with multiple levels, or maybe some interactive educational material with different chapters, etc.

Configuring app launchers

To create app launchers for the given app, create a text file named html_params.json inside the v3d_app_data subfolder of the app folder.

Say you want your app named my_awesome_app to have 3 different launchers loading 3 scenes: sceneA.gltf, sceneB.gltf, sceneC.gltf. In that case, html_params.json would include the following content:

{
    "my_awesome_app.html": [
        "load=sceneA.gltf",
        "load=sceneB.gltf",
        "load=sceneC.gltf"
    ]
}

my_awesome_app.html is main HTML file which will use either of those 3 assets.

Open your app in the App Manager. You will see the following:

By clicking on the corresponding HTML, you will launch your app with the scene specified in HTML params file.

Running Puzzles on per-scene basis

Once you have your launchers assigned in html_params.json, click with right mouse button on the Puzzles icon on the app view screen. You will see the following items in the popup menu:

By clicking on the corresponding menu item, you will launch the Puzzles editor with the scene specified in HTML params file.

To execute different Puzzle blocks for different scenes, you might use the following snippet:

Alternatively, you can assign URL params to your scenes as shown below.

Launching apps with different URL params

Additional URL params can be specified in the same manner as loaded scenes. Say we need our app to be executed with the my_product param specified. Edit html_params.json as follows:

{
    "my_awesome_app.html": [
        "load=sceneA.gltf&my_product=phone",
        "load=sceneB.gltf&my_product=tablet",
        "load=sceneC.gltf&my_product=laptop"
    ]
}

Note how we used the ampersand character to separate the URL params.

You can get values of URL params similarly to how you obtained the loaded scenes in the snippet above. For example to retrieve my_product, use the following Puzzles:

BTW, in some cases you may need to load a same scene, but with a different set of params. In such the case html_params.json might look as follows:

{
    "my_awesome_app.html": [
        "my_param=something",
        "my_param=something_else",
        "my_param=you_name_it"
    ]
}

Again, if you need two or more params, they must be separated by the ampersand character:

{
    "my_awesome_app.html": [
        "my_param1=something&my_param2=1000",
        "my_param1=something_else&my_param2=2000",
        "my_param1=you_name_it&my_param2=3000"
    ]
}

When things go sideways

The launchers feature is considered experimental and requires some skills with JSON editing. In case something goes wrong, you can always remove the html_params.json file and start again.