Add the Reactive Reality registry

To use the Pictofit SDK, you need to add our registry to npm so that the package can be fetched.

You can add our registry globally by running the following command:

npm config set @reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/
BASH

Or to give npm access to the registry on the project scope, you have to add a .npmrc file in project root (on the same level as package.json):

; reactive reality public registry
@reactivereality-public:registry=https://gitlab.com/api/v4/projects/24837467/packages/npm/
CODE

Then add to your package.json dependencies: "@reactivereality-public/pictofit-web-sdk": "major.minor.patch"

Setup the DOM and init a WebViewer

Now you will have to add a canvas element to your DOM for the SDK to render your content into:

<html>
    <body>
        <canvas id="canvas3d" style="width:100%;height:100%;"></canvas>       
    </body>
</html>
HTML

Then you can import the module an use its components like so:

import * as Pictofit from "@reactivereality-public/pictofit-web-sdk";
const viewer = new Pictofit.WebViewer("canvas3d"); // ID of the canvas element
JS

All you have to provide here is the ID of the canvas element so that the viewer can use it as the rendering target. As part of every asset bundle that we generate through the Pictofit Content Service, you’ll find a .json config file that you can use the load the model.

Including BabylonJS

The rendering within our SDK is based on the Babylon.js engine. You need to separately load the respective modules in your code. The minimal requirement are the core library and the loaders extensions. Depending on the use case, additional extensions might be required (which can be seen from the respective documentation/samples).

Including BabylonJS via a CDN / script tag

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/babylonjs@5.16.0/babylon.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/babylonjs-loaders@5.16.0/babylonjs.loaders.min.js"></script>
    // only add this if you are using the VirtualDressingroom2D
    <script src="https://cdn.jsdelivr.net/npm/babylonjs-gui@5.16.0/babylon.gui.min.js"></script>
</head>
...
HTML

If you wish to include the BabylonJS dependency via the script tag, please make sure that it is loaded before the Web SDK!

Including BabylonJS via a NPM package

If you are using NPM to assemble your project you might want to use the babylon NPM packages. These are not peer dependencies of the Web SDK package, because we also want to enable the CDN approach above. To add 

"babylonjs": "^5.16.0"
"babylonjs-loaders": "^5.16.0"
"babylonjs-gui": "^5.16.0" // only add this if you are using the VirtualDressingroom2D
JSON

After that you will have to make sure your bundler (webpack or similar) is importing BabylonJS at. global level. Its likely not bundled if you are not directly referencing it anywhere in your own code.

The configuration files only contain file names but not the full url to the assets. Therefore, we need to tell the SDK where it can actually find the assets that are linked in the configuration file. This can be done through creating a BaseURLResourceProvider. This simply prefixes the referenced filename with the provided url. So if an element in the configuration refers to texture.jpg and your base url is https://cdn.myserver.com/assets/, the respective component that uses the provider will try to load the asset from https://cdn.myserver.com/assets/texture.jpg.

For most cases, this simple provider is sufficient. Sometimes, you might need a more complex handling. Please see the section Custom Resource Providers on how to implement your own provider.

// create a URLResourceProvider and provide the base url to your server
const resourceProvider = new Pictofit.BaseURLResourceProvider("https://cdn.myserver.com/assets/");

// create a remote static asset and resolve filenames to URLs using the resource provider
const staticAsset = new Pictofit.StaticAsset("garments/1234", resourceProvider);
TYPESCRIPT

That’s it, you are good to go. You can also use absolute paths in your configuration files. Still, we advise against doing this for real world integrations since you have to change your configuration files once you move the assets.