three-nodetoy allows you to export and use NodeToy graphs directly in your threejs websites.
๐ Nodetoy is the shader tool for the web. NodeToy provides creators a powerful editor to create incredible new shaders and visual effects.
Website โ Twitter โ Discord โ
โ๏ธ Using React-Three-Fiber instead? Use React-NodeToy.
https://three-nodetoy.vercel.app/
Requires threejs >= 0.143.0
Older threejs versions might be supported but are untested.
With npm:
npm i @nodetoy/three-nodetoy
With yarn:
yarm add @nodetoy/three-nodetoy
Import three-nodetoy
in your project:
import { NodeToyMaterial } from '@nodetoy/three-nodetoy';
Declare your material:
let material = new NodeToyMaterial({ url: "https://draft.nodetoy.co/nFvoIaHuvkvm3uMa" });
If your materials are dynamic (use of Time, CosTime, SinTime, ...) add NodeToyMaterial.tick()
to your render loop. See section "Update Time / Dynamic uniforms"
for more information.
NodeToyMaterial.tick();
Simple example:
import * as THREE from "three";
import { NodeToyMaterial } from '@nodetoy/three-nodetoy';
let geometry = new THREE.PlaneGeometry(1, 1);
let material = new NodeToyMaterial({ url: "https://draft.nodetoy.co/nFvoIaHuvkvm3uMa" });
let mesh = new THREE.Mesh(geometry, material);
mesh.position.x = 2;
scene.add(mesh);
Some nodes require uniforms to be updated every frame.
For this reason you should call NodeToyMaterial.tick()
in your render loop.
// Animate
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
// Necessary to update dynamic uniforms such as time
NodeToyMaterial.tick();
}
animate();
NodeToy gives you the choice between either hosting the shader data for you or loading it your way.
You can choose the type of exporting in the exporter window (Editor > Main menu > Export...
).
To load a server-hosted
shader use the url
parameter.
let material = new NodeToyMaterial({ url: "https://draft.nodetoy.co/nFvoIaHuvkvm3uMa" });
To load a self-hosted
shader use the data
parameter.
import { data } from './shaderData'
let material = new NodeToyMaterial({ data });
enum NodeToyCullMode {
Front,
Back,
None,
};
export interface NodeToyMaterialData {
version: number;
uniforms: any[];
vertex: string;
fragment: string;
cullMode: NodeToyCullMode;
lightModel: NodeToyMaterialType;
renderType: NodeToyRenderType;
};
interface NodeToyMaterialOptions {
url?: string;
data?: NodeToyMaterialData;
parameters?: any;
toneMapped?: boolean;
flatShading?: boolean;
transparent?: boolean;
cullMode?: NodeToyCullMode;
verbose?: boolean;
polygonOffset?: boolean;
polygonOffsetFactor?: number;
depthTest?: boolean;
depthWrite?: boolean;
envMapIntensity?: number;
};
const material = new NodeToyMaterial(options: NodeToyMaterialOptions);
Define the NodeToy material to load. To export a material, open up the NodeToy material, click on the menu icon (top left corner) and select Export...
. You can then generate a draft for your material, the URL will be generated for you.
Define the NodeToy material data to load from a self hosted source. To export a material, open up the NodeToy material, click on the menu icon (top left corner) and select Export...
. Select Self Hosted
and Copy Shader Data
. Use the copied data to set this field.
Specifying the uniforms to be passed to the shader code. Those can be defined within the NodeToy editor by swiching inputs from constants
to parameters
.
Defines whether this material is tone mapped according to the renderer's toneMapping setting. Default is true.
Define whether the material is rendered with flat shading. Default is false.
Defines which side of faces won't be rendered - NodeToyCullMode.front, back or none. Default is NodeToyCullMode.Back.
Whether to print the full log of the material. Only useful for development. Default is false.
Whether to use polygon offset. Default is false. This corresponds to the GL_POLYGON_OFFSET_FILL WebGL feature.
Sets the polygon offset factor. Default is 0.
Whether to have depth test enabled when rendering this material. Default is true.
Whether rendering this material has any effect on the depth buffer. Default is true.
When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
Set the intensity of the environment map. Default is 1.0.
We use yarn, install the dependencies like this:
yarn
Run to build three-nodetoy
yarn dev
Then install the examples and run the local server
cd example
yarn install
cd ..
yarn demo
and visit localhost:3001/demo/Basic
to browse the examples in ./example
folder.
yarn build
yarn deploy