Source of node materials (Three.js)

September 24, 2020

Traditional Three.js materials are like black boxes with various numeric parameters on it. Node materials are different. They are more modular. They allow for making material out of diferent boxes(nodes) and connect them in some kind of graph (like in e.g. Blender)

This is a pretty new feature (and still developed). There's no documentation yet. So I try to dive into Three.js codebase on my own.

Here's what I found:

There are few kinds of nodes (at least they are in different folders).

kind of nodes

accessors: things like position, uv etc.

core: it seems like here are basic "building blocks" for implementing custom nodes.

effects: blur, luminance, color adjustment.

inputs: it might be called "values" as well: bool, color, float, int, matrices, vectors...

materials: nodes you can link directly to the meshes as their materials

math: conditions, operators...

misc: bump map, normal map, texture cube, texture cube uv

postprocessing:node pass, node post processing

procedural: checker, noise

utils: e.g. uv transform, switch, join

Util nodes

SwitchNode - it can extract component (x, y, z, w) from the vector.

JoinMode - it can join nodes for separate values (x, y, z, w) into one vector.

TimerNode - it demands use NodeFrame

create TimerNode

call nodeFrame.update(delta);

call nodeFrame.update(timer);

there are two similar nodes: `StandardNodeMaterial` and not `MeshStandardNodeMaterial` NodeMaterial documentation #17971 it seems like MeshStandardNodeMaterial is drop in for old MeshStandardMaterial and StandardNodeMaterial is a new thing?

VelocityNode is subclass of Vector3Node. It can be used for softbodies

TO BE CONTINUED
I'll be updating this post.