Project Structure
Pursuing a strong artist-friendly approach, Verge3D creates a complete set of files for a WebGL application. It is recommended not to edit most of the initialized project files, because some of them may be automatically regenerated upon certain user actions (such as export, saving Puzzles etc), while others may get overridden upon updating to new Verge3D versions.
Simplest Case
A default project initialized with the App Manager (with default configuration parameters) looks as follows.
HTML, CSS and JavaScript files
The application core consists of the .html, .css and .js files with the same name ("my_awesome_app"), and the Verge3D runtime v3d.js. There is also a folder called media which contains small images (fullscreen button icons and a set of favicons).
Although not recommended, you can edit the core .html, .css and .js files, although a better approach for adding your own CSS and JavaScript would be creating new files and linking them to the main .html. Be sure to cherry-pick your changes back after performing clean updating.
Please notice that if you attempt to launch a Verge3D application by simply clicking on the .html file, most likely it won't run due to the browser security policy which forbids JavaScript from accessing files loaded not from the same domain. Please always use the App Manager, which includes a local web server, to run your apps.
glTF files
When running, an application loads a 3D scene in .gltf format first, which in turn contains file paths for further loading of the binary part of a glTF scene .bin and external textures. The .gltf and .bin files are exported using user interface menu of your favorite 3D editor (Blender, 3ds Max, or Maya).
Working scene files
Depending on the 3D editor you are using, there will be one .blend, .max or .mb file containing the default cube. This is where most work on your scenes is performed. Feel free to modify this file, rename or override it with some other file, but be certain to preserve the original name of the exported glTF file.
You can add more scene files to the app folder, for using as library files or for multi-scene applications. If your app loads multiple glTF files, don't forget to perform export from the corresponding .blend, .max or .mb files.
Assets
Textures and sounds are typically loaded by an application as external files. Make sure that you use relative file paths in the 3D editor of your choice for all images, and that your images are stored inside your application folder, otherwise there may be issues with the publication of your app.
Puzzles
When you click Save in the Puzzles editor, it will save your app puzzles in visual_logic.xml. It will also generate JavaScript code from your puzzles and save it as visual_logic.js. These files will keep being overridden every time you click the Save button, with the previous edition of the visual_logic.xml copied to the v3d_app_data/puzzles_backup folder, renamed with a time stamp. Therefore, you can always restore your puzzles from this backup by copying the .xml file to the root and renaming it back.
Advanced Case
Some Verge3D apps (such as Soft8Soft's Industrial Robot demo) may contain quite a number of additional files, which however, come from just 2 extra categories.
Compressed glTF files
If you enable asset compression for your app (which is always a good thing), the exporter will at first perform export as usual and then create a compressed version of glTF files. These files are automatically picked up by the application instead of the regular glTF file. There is no point in deleting the regular glTF files even if they are not used at the time, since they may be generated again in some future export operation.
Third-party software exports
Composite applications may leverage HTML layouts designed in some third-party software (such as Webflow or Google Web Designer), in which a regular Verge3D application is embedded with an iframe element. In such cases, the HTML layout can be saved to the app folder without any change to be picked up by the App Manager. Complex HTML layouts may in turn include additional CSS/JavaScript files, fonts or images, which are also needed to be stored in the app folder with their original hierarchy preserved.
Got Questions?
Feel free to ask on the forums!