Doc > Getting Started > Export

Doc > Getting Started > Export

So first thing you should do is save your scene.

You can either use the top menu File -> Save, or simply press Ctrl+s.

The first time you save a scene, you get to pick its name:

Set Scene Name

And then you'll see a warning:

node_modules Install Warning

In order to understand what this means, let's first take a look at the files that have been created, by running ls -l:

gui 08:46 pm:~/polygonjs_test_01$ ls -l
total 12
-rw-rw-r-- 1 gui gui  216 Jan  3 20:41 package.json
drwxrwxr-x 3 gui gui 4096 Jan  3 20:41 public
drwxrwxr-x 3 gui gui 4096 Jan  3 20:41 src

If you are familiar with npm module, you'll recognize this structure. You have an src folder which will contain source code files, a public folder for static assets (those can be css, javascript, images, and in the case of a WebGL scene, it can also be 3d models and textures), and also a package.json, which contain the npm dependencies. Let's look at the content of that file:

{
    "engines": {
        "node": ">=16.13.1",
        "yarn": ">=1.22.7"
    },
    "scripts": {
        "polygon": "node node_modules/polygonjs-editor/build/index.js --port=8091"
    },
    "dependencies": {
        "polygonjs-editor": "1.1.209-1"
    }
}

And a part that interests us in order to save our scene is the dependencies, which states that the project requires polygonjs-editor. And the string to the right of it, which in this example is 1.1.209-1 is the specific version it requires. Note that this version will probably a more recent one when you run this.

Now, we have been able to run Polygonjs by running npx polygonjs-editor, but that runs it from a version that is installed globally. And this project cannot access it when saving the scene. This is also intentionally designed like this so that each project have the Polygonjs version locked to it. This means that if you come back to a project after having worked on others for a while, your project is guarantied to always work. It will not break if a more recent version of Polygonjs cannot support it anymore, since it will always use the version it was created with.

But that also means that we need to install that specific version to the project. So let's follow the instruction in that popup, and run the following (from your project folder that is):

npm install

Or if you prefer using yarn:

yarn

And then let's save the scene again:

node_modules Install Warning Save Again

And then you should see a confirmation that the scene has been saved in the status bar (which is that the bottom left of the editor UI):

Scene saved confirmation

And if you look at the files structure again, you'll see a 1 new folder: node_modules:

gui 09:03 pm:~/polygonjs_test_01$ ls -l
total 80
drwxrwxr-x 102 gui gui  4096 Jan  3 21:03 node_modules
-rw-rw-r--   1 gui gui   216 Jan  3 20:41 package.json
-rw-rw-r--   1 gui gui 59126 Jan  3 21:00 package-lock.json
drwxrwxr-x   4 gui gui  4096 Jan  3 21:03 public
drwxrwxr-x   3 gui gui  4096 Jan  3 20:41 src

The node_modules folder contains the library polygonjs-editor as well as all its dependencies.

And if you look inside the public/polygonjs directory, you will see a build directory:

gui 01:26 am:~/polygonjs_test_01$ ls -l public/polygonjs/
total 16
drwxrwxr-x 3 gui gui 4096 Jan  3 21:02 backup
drwxrwxr-x 3 gui gui 4096 Jan  4 01:24 build
drwxrwxr-x 3 gui gui 4096 Jan  4 01:24 js
drwxrwxr-x 3 gui gui 4096 Jan  4 01:24 scenes

And if you keep going, into public/polygonjs/build/scene_01, you will see an index.html:

gui 01:29 am:~/polygonjs_test_01$ ls -l public/polygonjs/build/scene_01/
total 16
-rw-rw-r-- 1 gui gui 6193 Jan  4 01:24 index.html
drwxrwxr-x 2 gui gui 4096 Jan  4 01:24 models
drwxrwxr-x 4 gui gui 4096 Jan  4 01:24 polygonjs

And this is where you scene is exported.

So let's view what this export looks like.

Top Menu View Export

This will open a new tab, displaying your scene without the editor:

View Export

And that's it, you have exported your scene, and viewed how it looks like.

If you want to upload the exported files online, all you need are the files contained in the public/polygonjs/build/scene_01 folder. You can create a zip with them, or upload them one by one, totally up to you.

Integrating with other build systems (vuejs, react, svelte, ruby on rails)

What we have just seen is a way to create and export your scene with a brand new project. But you may already have a project created with vuejs, react or another framework, which you want to add your WebGL scene into.

The good news is that it is absolutely possible. In fact, this export method is designed for this to be easy.

Documentation for this will be done in the coming weeks, but in the mean time, if you have a look in the folder src/polygonjs/scenes/scene_01/autogenerated, you can see a bundle of js files:

gui 01:41 am:~/polygonjs_test_01$ ls -l src/polygonjs/scenes/scene_01/autogenerated/
total 28
-rw-rw-r-- 1 gui gui  154 Jan  4 01:35 assets.json
-rw-rw-r-- 1 gui gui  705 Jan  4 01:35 loadSceneData.ts
-rw-rw-r-- 1 gui gui 1538 Jan  4 01:35 loadScene.ts
-rw-rw-r-- 1 gui gui  230 Jan  4 01:35 manifest.json
drwxrwxr-x 2 gui gui 4096 Jan  4 01:35 modules
-rw-rw-r-- 1 gui gui 2645 Jan  4 01:35 PolySceneWithNodeMap.ts
-rw-rw-r-- 1 gui gui 1707 Jan  4 01:35 requiredImports.ts

Those are the basis of the javascript used to load your scene when it is exported. They are here available, so you can import them into your own javascript modules, in order to load your scene.

I'll send updates on twitter as soon as it is ready.

Create a Loading Image

Once thing you may have noticed when viewing your export, is that the page starts all white, and the WebGL loads about a second later.

While we make sure to load the scene as fast as possible, there will always be some waiting time. And that time will only increase as you add models or textures to your scene.

But it is possible to make the wait a bit more enjoyable, by giving a small preview to your visitors, using a background image. So let's create one.

All you need to do is click on the camera icon in the viewer panel:

Viewer Capture Button

And you can see the screenshot that's been taken:

Screenshot

This image has now been saved to your project. And if you save your scene again, and view the export again, you will now see the image poster being displayed, just before the WebGL is fully loaded. No more white screen!