Initialization Puzzles Reference — Soft8Soft
Description: How to perform application initialization tasks with Verge3D Puzzles.

# Initialization Puzzles

These puzzles should be placed in the Init tab and are interpreted before a Verge3D application is initialized.

## Contents

- Puzzles Reference
  - configure application
  - setup preloader + percentage
  - load font
  - load library

#

## Puzzles Reference

#

### configure application

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

compressed assets
  Makes the app load a compressed scene in .xz format instead of a regular .gltf file. See Asset Compression for more info.
default fullscreen button
  Enables the default fullscreen button located in the top right corner.
transparent background
  Makes the background transparent so that the underlying parts of a web page become visible through the WebGL canvas. Enable this parameter to inline your 3D content on a web page or to use the augmented reality feature.
enable screenshots
  Makes it possible to properly capture screenshots from the WebGL canvas (sets the `preserveDrawingBuffer` property of the WebGL context to `true`). Enable this parameter if you're going to use the take screenshot puzzle.
fade annotations
  Makes annotations fade when they are blocked by scene objects.

#

### setup preloader + percentage

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

In the following example, a custom preloader is represented with a container HTML element (e.g., a <div>) with the id "preloader". Inside it, there is another element with the id "loading progress" (e.g., a <span>), in which % of loading is printed using the percentage puzzle. In addition to that, the width of the third element (e.g., a <div>) is dynamically changed to graphically represent the loading progress.

#

### load font

Loads font from a specified URL and makes it accessible via font-family CSS rule.

You can use custom fonts in the HTML puzzles as well as to generate texture from text.

#

### load library

Loads JavaScript library from a specified URL and makes its APIs accessible via `puzzles.loadedLibraries` (array of Promises).

The library can be vanilla JavaScript, namespaced CommonJS, or ES6 module.

Example:

You can run the exec script in the main tabs as well. In that case the "load library" puzzle ensures that the library has been loaded before any other Puzzles are executed in the main tabs.

## Having Troubles with Puzzles?

Seek help on the forums!