Source of node materials (Three.js)

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

    I'll be updating this post.

    Additional resources:

  • GH issue: NodeMaterial #7522
  • GH: issue: Promote Node-based Materials to Core and Polish #16440
  • GH: pull request: NodeMaterial - r8 #17265
  • Comments

    Popular posts from this blog

    First steps with Plotly.js