Verge3D Developer Kit — Soft8Soft
Description: Learn how to use Developer Kit to create your own modifications of the Verge3D toolkit.

# Verge3D Developer Kit

Verge3D Developer Kit (DevKit) is a collection of examples, tools and source code which comes with Verge3D Enterprise package. This collection will help you to perform various developer tasks such as:

- Switching to unminified version of Verge3D runtime which simplifies debugging your own apps.
- Learning and reviewing Verge3D toolkit internals.
- Modifying Verge3D and using the modified versions in the apps you develop.
- Extending Verge3D API with your own classes and methods.
- Adding new Puzzles blocks.
- Developing your own product configurator or e-commerce system for WordPress by using the Verge3D for WordPress plugin as reference.

Developer Kit is intended for seasoned JavaScript programmers who wish to explore or tweak the engine (and Puzzles). It is not required (though might be useful) for creating Verge3D applications with the standard set of functionality.

- Installation and Configuration
- DevKit Structure
- Building Verge3D
- Activating Engine Module
- Adding New Method to JavaScript API
- Adding New Class to JavaScript API
- Adding New Puzzles
- Removing Verge3D Line From the Browser Console

#

## Installation and Configuration

Grab the DevKit archive from the download area of your account dashboard. Unpack this archive to a directory of your choice.

If you're going to build Verge3D engine or Puzzles from source code, you'll need the npm utility which is part of the Node.js runtime. You can install it by following these instructions.

#

## DevKit Structure

Freshly installed DevKit includes the following folders:

DevKit Folder | Description
--- | ---
build | Pre-built Verge3D engine scripts and additional modules (ammo.js, etc).
puzzles | Pre-built scripts and source code of the Puzzles editor.
src | Verge3D engine source code.
templates | Verge3D application templates.
utils | Various utility scripts and build dependencies.
wordpress | Verge3D for WordPress plugin source code (written in PHP).
xz | Source code of the XZ compression module.

In the `build` folder of the DevKit there are 4 variants of the Verge3D runtime:

v3d.js
  Minified (optimized) version suitable for most applications. It provides all Verge3D classes/functions/constants via the global `v3d` namespace. This version is used by the App Manager and the most demos you can find in the Asset Store.
v3d.unminified.js
  This is the unminified (unoptimized) version of the above. In order to use it, copy this file to the app folder and rename as `v3d.js`, replacing the original file.
v3d.module.js
  Minified (optimized) runtime that provides ES6 modules instead of the global `v3d` namespace.
v3d.module.unminified.js
  This is the unminified (unoptimized) version of the above.

#

## Building Verge3D

Before compiling Verge3D, please make sure you installed npm as described above.

Once npm installed, go to the unpacked folder of DevKit and execute the following command to install the dependencies:

`npm install`

In case you need to rebuild the Puzzles editor, additional dependencies should be installed for the `puzzles` and `puppeteer_testing` directories:

`npm install --prefix puzzles && npm install --prefix utils/puppeteer_testing`

To compile an unoptimized build of Verge3D, which suits well for testing and debugging purposes, execute the following command in the DevKit directory:

`npm run build`

You can find the compiled modules inside the `build` directory of your DevKit. To test it, simply copy `v3d.js` engine runtime into your application inside the applications folder, for example:

`cp build/v3d.js APPS_FOLDER/my_awesome_application`

To compile an optimized of Verge3D (aka release version), execute the following command in the DevKit directory:

`npm run build-release`

The following commands are used to build the Puzzles logic editor. To build an unoptimized version type:

`npm run build-puzzles`

To build an optimized version, execute:

`npm run build-puzzles-release`

You can find the compiled Puzzles editor script inside the `puzzles` directory of your DevKit. To apply it to Verge3D, copy the entire content of this directory to the `puzzles` directory inside your Verge3D installation (replacing files which already exist there).

#

## Activating Engine Module

To sign the compiled engine runtime with your license key, use the keymanager.py script from the `utils` directory (python required):

`./keymanager activate ../build/v3d.js XXXXXXXXXX`

Where XXXXXXXXXX is your license key. Since this command does not print anything, you need to verify if the activation was a success by copying the runtime to some app folder and checking for the MADE WITH VERGE3D TRIAL watermark.

#

## Adding New Method to JavaScript API

Say, you want to add another method to the App class. For example, a `printHelloWorld()` method should print something to the browser console:

`App.printHelloWorld()`

The App class is implemented in the runtime located at `src/extras/App.js` Open it and add the following code to the end of the file, just before the closing brackets of the `App` class.

`printHelloWorld() { console.log('Hello World!'); }`

Build and copy the Verge3D runtime `v3d.js` into your app folder. To test the newly added method, open the browser console, then type:

`v3d.apps[0].printHelloWorld()`

It should print the "Hello World!" line below.

#

## Adding New Class to JavaScript API

To supplement the Verge3D API with some custom class, create a .js file named after your class in a relevant subdirectory of DevKit's `src` folder (e.g. `src/extras/MyAwesomeClass.js`). In this .js file, implement your class - you can get inspired by already existing classes. Finally, register your class in the global namespace `v3d` by adding the following line in `src/v3d.js` file:

`export { MyAwesomeClass } from './extras/MyAwesomeClass.js';`

Build and copy the Verge3D runtime `v3d.js` into your app folder, when try the new class in the browser console.

`const myAwesomeStuff = new v3d.MyAwesomeClass(); myAwesomeStuff.whatEver();`

#

## Adding New Puzzles

To create a custom Puzzles block, edit the `puzzles/src/puzzles_blocks.js` file. You can get inspired by already existing puzzles. Register it in a relevant toolbox category in the top of the file.

Build and copy the Puzzles runtime into the Verge3D installation folder. You should now find your new puzzle in the toolbox of the Puzzles editor.

Instead of editing `puzzles_blocks.js`, you can put your custom code in a plugin which makes it more reusable.

#

## Removing Verge3D Line From the Browser Console

Every time a Verge3D app is launched, the user can see the following line in the browser console:

This line tells what version of Verge3D runtime is running, is it licensed or not, and finally what version of WebGL is currently in use.

If for some reasons you don't want this line to appear, you can modify the engine source code as follows. Open the file `src/renderers/WebGLRenderer.js`. Find the line:

`const PRINT_VERGE3D_LINE = true;`

and swap this constant to `false`:

`const PRINT_VERGE3D_LINE = false;`

Build and copy the Verge3D runtime `v3d.js` into your app folder. Verify that the line is not printed anymore.

## Got Questions?

Feel free to ask on the forums!