Skip to content
Avatar
Block or Report

Block or report polygonjs

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
polygonjs/README.md

Polygonjs

NPM package Language Grade Twitter

Polygonjs is a node-based 3D Webgl engine. Learn more.

Inside Polygonjs node-based Editor

Install:

npm install @polygonjs/polygonjs

or

yarn add @polygonjs/polygonjs

You can also load it from the CDN:

https://unpkg.com/@polygonjs/polygonjs@latest/dist/all.js.

The API is designed to be very simple. Here is how you create a minimal scene with a box:

<script type="module">
	// import from the CDN
	import {PolyScene} from 'https://unpkg.com/@polygonjs/polygonjs@latest/dist/all.js';
	// or import from the npm module
	// import {PolyScene} from '@polygonjs/polygonjs/dist/src/engine/scene/PolyScene';

	// create a scene
	const scene = new PolyScene();
	const rootNode = scene.root();

	// create a box
	const geo = rootNode.createNode('geo');
	const box = geo.createNode('box');

	// add a light
	rootNode.createNode('hemisphereLight');

	// create a camera
	const perspectiveCamera1 = rootNode.createNode('perspectiveCamera');
	perspectiveCamera1.p.t.set([5, 5, 5]);
	// add OrbitControls
	const events1 = perspectiveCamera1.createNode('eventsNetwork');
	const orbitsControls = events1.createNode('cameraOrbitControls');
	perspectiveCamera1.p.controls.setNode(orbitsControls);

	perspectiveCamera1.createViewer(document.getElementById('app'));
</script>

which should give you this (you can try it on this page):

Let's now look at an example that demonstrates how powerful a node-based engine can be:

import {PolyScene} from 'https://unpkg.com/@polygonjs/polygonjs@latest/dist/all.js';
// create a scene
const scene = new PolyScene();
const rootNode = scene.root();

// create a geo node to add the geometry nodes we will need
const geo = rootNode.createNode('geo');

// create a plane
const plane = geo.createNode('plane');
plane.p.size.set([10, 10]); // make the plane larger

// add noise to the plane
const noise = geo.createNode('noise');
noise.setInput(0, plane);
noise.p.freq.set([0.1, 0.1, 0.1]);
noise.p.amplitude.set(3); // lower the noise amount
noise.p.useNormals.set(1); // have the noise in the direction of the normals

// scatter points on the plane
const scatter = geo.createNode('scatter');
scatter.setInput(0, noise);
scatter.p.pointsCount.set(1000);

// copy boxes on the points
const box = geo.createNode('box');
box.p.size.set(0.1);
const copy = geo.createNode('copy');
copy.setInput(0, box);
copy.setInput(1, scatter);
copy.flags.display.set(true);

// add an hemisphere light and a spotlight
const hemisphereLight = rootNode.createNode('hemisphereLight');
hemisphereLight.p.skyColor.set([0.5, 0.5, 0.5]);
hemisphereLight.p.groundColor.set([0, 0, 0]);

// create a camera
const perspectiveCamera1 = rootNode.createNode('perspectiveCamera');
perspectiveCamera1.p.t.set([5, 5, 5]);
// add OrbitControls
const events1 = perspectiveCamera1.createNode('eventsNetwork');
const orbitsControls = events1.createNode('cameraOrbitControls');
perspectiveCamera1.p.controls.setNode(orbitsControls);

perspectiveCamera1.createViewer(document.getElementById('app'));

And we can also create some html inputs:

<div>
	<label>Size</label>
	<input id='box-size' type='range' min=0 max=2 step=0.01 value=0.1></input>
</div>

and add them some events:

document.getElementById('box-size').addEventListener('input', function (event) {
	box.p.size.set([event.target.value, event.target.value]);
});

And by updating the parameter size of the box, every node that depends on it will recook and update the geometry displayed on screen.

By adding a few more events, we get the following (you can try it on this page):

What we've done is essentially create a procedural network, where nodes depend on their inputs. If the inputs update, the dependent nodes will also update accordingly. This allows us to create complex 3D scenes in no time.

Node-based

The nodes are grouped in contexts, each for a specific type of task:

  • ANIM nodes are to create animations.
  • COP nodes can import and update textures.
  • EVENT nodes are to trigger or react to events.
  • GL nodes help you create GLSL shaders.
  • MAT nodes are to create materials.
  • OBJ are to add objects to your scene.
  • POST nodes are to set up post processing.
  • ROP nodes allow you to set up the renderers.
  • SOP nodes are to manipulate geometries.

Plugins

Polygonjs is designed to be extensible. You can create your own plugins to add custom nodes. There are currently 4 official plugins:

  • Mapbox to add 3D objects to Mapbox maps.
  • Occlusion to calculate occlusion on a geometry and get more pleasant lighting.
  • Palette to add matching colors based on curated palettes.
  • Physics to create and simulate rigid bodies.

Based on Threejs

Polygonjs is based on the powerful webgl library Threejs. While Polygonjs offers many nodes for many different types of 3D scenes, there are times where you may want to dig deeper and update the scenes in specific ways.

For this, you can directly access the threejs objects. There are 2 ways to do so:

  • From the scene
const scene = new PolyScene();
const threejsScene = scene.threejsScene();
  • From any node
const scene = new POLY.PolyScene();
const rootNode = scene.root();
const geo = rootNode.createNode('geo');
const plane = geo.createNode('plane');

// now let's get the content of the plane node
const container = await plane.compute();
// the container is an envelope that contains a coreGroup
const coreGroup = container.coreContent();
// and we can now get an array of THREE.Object3D:
const objects = coreGroup.objects();
// and we can use THREE Api:
const object = objects[0];
object.position.set(0, 1, 0);
object.updateMatrix();

Pinned

  1. node-based WebGL 3D Engine

    TypeScript 50 4

  2. JavaScript

  3. TypeScript

  4. Physics plugin to animate rigid bodies for the webgl engine Polygonjs

    TypeScript 1

  5. Palette plugins to add geometry colors for the webgl engine Polygonjs

    TypeScript 1

50 contributions in the last year

Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug Sep Oct Mon Wed Fri

Contribution activity

October 2021

polygonjs has no activity yet for this period.

Seeing something unexpected? Take a look at the GitHub profile guide.