Doc > Getting Started > Your First Scene

Doc > Getting Started > Your First Scene

So by now, you should have installed Polygonjs. If not please head over to the install section first.

Then, start by creating a folder for your project. We'll run Polygonjs from that folder.

The reason you need to create a folder is that Polygonjs will save a bunch of files in the folder you run it from, and that could quickly become messy if you do that anywhere.

So let's run the following:

cd && mkdir polygonjs_test_01 && cd polygonjs_test_01

This will create a folder polygonjs_test_01 and cd into it. You can of course change the name of that folder as you like.

Then you start Polygonjs with:

npx polygonjs-editor

You should see the following in your shell:

Editor shell output

Then open your browser to localhost:8091, and you will see the editor, with a login form:

Editor Login Form

So use your credentials to login, and you'll then be able to use the editor:

Update your scenes

From now you can play with it as much as you like. Create new nodes, change their parameters, modify the geometry... The combinations are infinite.

You have access to nodes that allow you do to all sorts of operations to create beautiful WebGL scenes.

You can create nodes that manipulate geometry, and those are called SOP (as a nod to the visual effects software Houdini, which I've used for many many years and that was one of the inspirations to create Polygonjs). Those nodes allow you to import models or create custom geometries. And it's all procedural, meaning that if you update a node at the beginning of the chain, all the downstream nodes will update as well.

You can also create nodes that produce shaders, called GL nodes. Those are called like this because they generate GLSL code. And those shaders can be used in materials, in particles systems and in custom texture generators.

Learn more

And there are many other node types, allowing you to create unique combinations. Here is a full list:

  • ACTOR nodes allow you to add behaviors to your 3D objects.
  • ANIM nodes allow you to setup and choreograph animations.
  • AUDIO nodes produce sounds, which can be very useful to trigger sounds based on user interactions, such as when the mouse cursor hovers over an object.
  • COP allow you to import or generate textures.
  • EVENT are useful to setup events based on many different triggers.
  • GL, mentioned above, allow you to create complex shaders.
  • MAT allow you to create and edit materials.
  • OBJ handle the main hierarchy of your scene.
  • POST are useful if you want to add post processing effects to your scene, such as grain or bloom.
  • ROP allow you to specify different render quality for your scene.
  • SOP, mentioned above, are specialized in creating and editing geometries. Those nodes are probably the most powerful type in Polygonjs, and this is where you'll spend the most time (and the most fun too, hopefully!)

On top of those node types, you can:

What's next?

You might be curious about how to export your WebGL scene to a webpage you can deploy online. Let's look at that.

Let's now see how to export ->