Exporting

While creating your scene in Polygonjs should be pretty fun, there will soon be a time when you'll want to display it on your website.

There are 2 ways to do so:

  • Embed with an iframe.
  • Export to threejs json or glsl code.

Note

Note that exporting to threejs will still require you to re-create a fair amount of boiler plate to have your geometry and shaders display and react as you would like, since most of the logic system that Polygonjs offers cannot be exported.

Embed with an iframe

Embedding your scene to another website is as simple as embedding a youtube video. All you need to do is copy paste one line of html. Here is how to get it:

  • When looking at your scene, just go to the top menu File->Embed.

Embed File Menu

  • In the form:
    • Toggle the Embed active check box on.
    • Write which Allowed Domain Names you want to embed it on (something like *.yourdomain.com)
    • Click Update Embed Settings
    • And copy the HTML Code.

Embed Settings

The code will look something like this:

<iframe frameborder='0' height='600px' src='http://embed.polygonjs.com/scenes/4c5c966a-9263-4b3c-a117-5d25eab9ca69' width='600px'></iframe>

And once you have pasted the html in your website, you should see your scene, similar to this, which you can interact with. The same engine that powers Polygonjs will now run on your own website as well.

The advantage of this method is that the scene embedded on your website will always be up to date.

Export to Threejs code

Now, if you are a developer, you may already have your own engine, and may not want to use Polygonjs. Or maybe you used it briefly to make a small test. That's totally fine and here is how you can export what you created here.

Export a geometry

In order to export geometries, you need to create a Cache SOP, and give it your geometry.

Then middle click on it, to display the node info panel. This is usually used to display specific data about this node. In this case, it also shows a button to copy the exported geometry to your clipboard. Click on it, and you can then Paste (cltr+v or cmd+v) into your text editor.

The json you see was exported using threejs .toJSON() method. You can then import it back into your application using the THREE.ObjectLoader.

Export a glsl shader

Exporting glsl shaders is just as easy.

In that case, we start with a default mesh_basic node, which uses the same code as THREE.MeshBasicMaterial.

As the video shows, we simply go inside to edit its generated glsl code. In this case, we plug the position to the color, making it a little more colorful.

We then go back up, middle click on the node to display the node info panel, which shows 2 buttons. One to copy the vertex shader, and one to copy the fragment shader.

Here is the first one:

#define FPS 30.0
#define TIME_INCREMENT (1.0/30.0)
#define FRAME_RANGE_START 1.0
#define FRAME_RANGE_END 240.0
#include <common>



// /MAT/mesh_basic1/globals1
varying vec3 v_POLYGON_globals1_position;




#include <uv_pars_vertex>
#include <uv2_pars_vertex>
#include <envmap_pars_vertex>
#include <color_pars_vertex>
#include <fog_pars_vertex>
#include <morphtarget_pars_vertex>
#include <skinning_pars_vertex>
#include <logdepthbuf_pars_vertex>
#include <clipping_planes_pars_vertex>
void main() {
	#include <uv_vertex>
	#include <uv2_vertex>
	#include <color_vertex>



	// /MAT/mesh_basic1/globals1
	v_POLYGON_globals1_position = vec3(position);
	
	// /MAT/mesh_basic1/output1
	vec3 transformed = position;
	vec3 objectNormal = normal;



	#include <skinbase_vertex>
	#ifdef USE_ENVMAP
	#include <morphnormal_vertex>
	#include <skinnormal_vertex>
	#include <defaultnormal_vertex>
	#endif
	#include <morphtarget_vertex>
	#include <skinning_vertex>
	#include <project_vertex>
	#include <logdepthbuf_vertex>
	#include <worldpos_vertex>
	#include <clipping_planes_vertex>
	#include <envmap_vertex>
	#include <fog_vertex>
}

And the fragment shader:

#define FPS 30.0
#define TIME_INCREMENT (1.0/30.0)
#define FRAME_RANGE_START 1.0
#define FRAME_RANGE_END 240.0
uniform vec3 diffuse;
uniform float opacity;
#ifndef FLAT_SHADED
	varying vec3 vNormal;
#endif
#include <common>



// /MAT/mesh_basic1/globals1
varying vec3 v_POLYGON_globals1_position;




#include <color_pars_fragment>
#include <uv_pars_fragment>
#include <uv2_pars_fragment>
#include <map_pars_fragment>
#include <alphamap_pars_fragment>
#include <aomap_pars_fragment>
#include <lightmap_pars_fragment>
#include <envmap_pars_fragment>
#include <fog_pars_fragment>
#include <specularmap_pars_fragment>
#include <logdepthbuf_pars_fragment>
#include <clipping_planes_pars_fragment>
void main() {
	#include <clipping_planes_fragment>
	vec4 diffuseColor = vec4( diffuse, opacity );



	// /MAT/mesh_basic1/output1
	diffuseColor.xyz = v_POLYGON_globals1_position;



	#include <logdepthbuf_fragment>
	#include <map_fragment>
	#include <color_fragment>
	#include <alphamap_fragment>
	#include <alphatest_fragment>
	#include <specularmap_fragment>
	ReflectedLight reflectedLight = ReflectedLight( vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ), vec3( 0.0 ) );
	#ifdef USE_LIGHTMAP
		reflectedLight.indirectDiffuse += texture2D( lightMap, vUv2 ).xyz * lightMapIntensity;
	#else
		reflectedLight.indirectDiffuse += vec3( 1.0 );
	#endif
	#include <aomap_fragment>
	reflectedLight.indirectDiffuse *= diffuseColor.rgb;
	vec3 outgoingLight = reflectedLight.indirectDiffuse;
	#include <envmap_fragment>
	gl_FragColor = vec4( outgoingLight, diffuseColor.a );
	#include <premultiplied_alpha_fragment>
	#include <tonemapping_fragment>
	#include <encodings_fragment>
	#include <fog_fragment>
}

If you are familiar with Threejs Shader Material, you may notice that the code is almost the same, only a few lines are added. First, there are some defines at the beginning:

#define FPS 30.0
#define TIME_INCREMENT (1.0/30.0)
#define FRAME_RANGE_START 1.0
#define FRAME_RANGE_END 240.0

Then varyings:

// /MAT/mesh_basic1/globals1
varying vec3 v_POLYGON_globals1_position;

And finally instructions:

	// /MAT/mesh_basic1/output1
	diffuseColor.xyz = v_POLYGON_globals1_position;

Note that each is prepended by the path of the node that declared it. This makes is much easier when debugging. And the added code can get much more complicated. You will be able to view examples later.

Note

Once you have exported the glsl code, it is up to you to create a geometry with the right attributes as well as set the uniforms accordingly. Polygonjs does that for you when using its engine, but it unfortunately cannot once it is exported.