NodeToy🌈 – The ultimate web shader graph editor for ThreeJs and React-Three-Fiber

[nodetoy]

Hi all ,

We built NodeToy, a complete shader editor for the web, built with ThreeJS and React-Three-Fiber.

Create, fork and publish shader graphs with others and easily export to ThreeJS, React-Three-Fiber and GLSL.

We have over 150 nodes for you to use to create all kinds of crazy shaders.

You can find us on Twitter and Discord.

Let us know what you think!

Thanks,
Team NodeToy

[nodetoy]

Hi again ,

We just launched NodeToy Beta 2.0, the ultimate web shader editor, for ThreeJS and React-Three-Fiber. Now available to everyone!

NodeToy is the perfect tool for the ThreeJS: it allows you to easily create and export your most impressive shaders in any web project, bringing your creative visions to life with unprecedented speed and simplicity.
You can say goodbye to tedious shader writing and hello to lightning-fast material creation.

You can find us on Twitter and Discord.

We look forward seeing what you will create!

Thanks,
Team NodeToy

[Lawrence3DPK]

That looks super interesting, have to have a spin with this! How are the shader files exported, as respective .glsl file type or compiled to vert and frag js export?

[nodetoy]

Thanks! We host the exported shaders for you and you can use either three-nodetoy (for ThreeJS) or react-nodetoy (for React-Three-Fiber) in your project to load the shader automatically. The ability to self-host / bundle your shaders is high on our priority list and will be out very soon!

Here is an simple example for ThreeJS:

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);

Using the NodeToyMaterial you can also dynamically control your uniforms and change all the default threejs material properties.

Three-nodetoy: GitHub - NodeToy/three-nodetoy: https://three-nodetoy.vercel.app/

React-nodetoy: GitHub - NodeToy/react-nodetoy: https://react-nodetoy.vercel.app/

Live examples here: https://three-nodetoy.vercel.app/ and here https://react-nodetoy.vercel.app/

[nodetoy]

New update!

Refreshed node’s appearance, which gives more information about their types:
- Each pin now has a letter and a color depending on its type, which is dynamically updated based on the input type
- The connections have a gradient color based on the output and input pins types
New buttons to delete the node and toggle its preview, when hovering on the node.
Node’s description moved on the sidebar.
Added the ability to change the graph connection type from the default curved to straight:
- Menu → Graph → Smooth/Straight Connections
Added Euler, Phi (golden ratio), Sqrt2, and Sqrt3 constant nodes.
Added Inverse Lerp node.
Created Noises and Patterns categories.
New Truchet Generator node to generate infinite tileable patterns of different types.
Noise Generator and Voronoi moved to the Noises category.
Noise Generator and Voronoi now return a float instead of a vector3.
Fixed bug delete key not deleting nodes.

[Fennec]

Impressive work … congrats for the beta

[nodetoy]

Thanks a lot Fennec! Let us know if you are able to give it a go!

[nodetoy]

Added ability to create Comment box of the size of your rectangle selection. Drag on an empty space to create a selection box, without releasing the mouse press C and a Comment box is created.
Added help button in node sidebar when node is selected.
New shortcuts for Append (V+Click), Split (B+Click), Component Mask (K+Click).
Now sorting Variable Names inside the Get Variable node alphabetically.
Fixed node input selection on both the node itself and the sidebar when selected.
Fixed bug when using spacebar to open / close nodes menu.

[nodetoy]

Hey everyone, latest update!

Export your shader to CodeSandbox in one click for react-three-fiber and threejs!
Added new “Image” Master type: create full screen shaders with a simple output color pin. This new master type allows you to go beyond shaders for 3d models by taking full advantage of the whole screen.
Editor preview can now be minimized, resized, moved, saving space for your large graphs!
New Pointer nodes! Pointer Position, Pointer Enter, Pointer Leave, Pointer Down, Pointer Up. Everything you need to create interactive shaders: retrieve the pointer position in real time, detect clicks and when the mouse enters or exists the viewport.
New Keyboard nodes! Key Up, Key down: detect when a key has been pressed in the your shader.
Updated exporter to support a self hosted workflow in case you prefer to host your shader files rather than using a URL!
Updated documentation with node previews for each section.
Fixed node type issues on certain nodes.
Fixed issue in node inspector only affecting project’s post.

Mini tutorial to export your project in CodeSandbox:

[nodetoy]

Hey everyone, latest update!

New “Normals” node category.
Added new Normal from Height node.
Added new Normal Sobel from Height Map node.
Added grid snapping support. Nodes can now be snapped to the graph’s grid.
Added new Noise Sine Wave node.
Added new Sawtooth Wave node.
Added new Square Wave node.
Added new Triangle Wave node.
Updated shortcut documentation.
Fixed disappearing graph connections.
Replaced “Edit Profile” by “Open In Editor” on post’s sidebar.
Fixed overlapping master node’s sidebar on post’s sidebar when master node was selected.
Added project’s video thumbnail support in the Activity tab.

NodeToy

[Attila_Schroeder]

This looks very good. I wish something like this for WGSL shaders in the node system in 3js. Unfortunately, I find the node system in 3js very tedious and a bit frustrating because I can’t find any examples where glsl shaders are translated into the node system so that I can understand the analogies.