NodeMaterial: serialize/deserialize and Material.fromType()

[sunag]

Related issue: #22552

Introduction

This PR add support to serialize NodeMaterial in the Scene Graph of Three.js.

Create NodeMaterial base class extended of ShaderNode.

Node.serialize() / Node.deserialize()

This can be used to serialize / deserialize specific Node fields, these methods can be extended.

Node.fromType()

It can be used to create extended Nodes and share the same NodeMaterialLoader.

Loaders

NodeLoader - only Nodes
NodeMaterialLoader - Nodes in Materials
NodeObjectLoader - Nodes in Scene Graph

Serialization test

• webgl_materials_standard_nodes - serialize objects after load to test

Core

Object3D

• src/core/Object3D.js - add nodes to toJSON()

Material.fromType()

• src/loaders/MaterialLoader.js
• src/materials/Material.js
• src/materials/Materials.js
• Commit - 4cdbfac

This contribution is funded by Google via Igalia.

[mrdoob]

Hmm, one problem with this approach is that it makes NodeMaterial non-treeshakeable 😕

I was hoping that NodeMaterial was going to bring us closer to smaller builds, but I suspect this would actually produce bigger builds?

[mrdoob]

One of the key things about three.js is the fact that it's ~150kb gzipped.

Could you do some tests to see how the new NodeMaterial system impacts on this? For example, what would be the bundle size of a simple example that displays a red cube with the WebGPURenderer+NodeMaterial?

[sunag]

Hmm, one problem with this approach is that it makes NodeMaterial non-treeshakeable 😕

I think you are referring to Node.fromType()?
In this case, we can just move NodeLib of Loader to a variable, the same that already happened with the textures in MaterialLoader.setTextures().

Because some others approaches like Node.serialize() I was doing it tree shakeable.

[mrdoob]

I think you are referring to Node.fromType()?

Yes 👍

[sunag]

I build here a .min files to reference in gzipped:

145 KB - Three.js

import * as THREE from './three.min.js';

152 KB - Three.js + WebGLNodeBuilder + ColorNode

import * as THREE from './three.min.js';
import ColorNode from './jsm/renderers/nodes/inputs/ColorNode.js';
import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';

155 KB - Three.js + WebGLNodeBuilder + All Nodes

import * as THREE from './three.min.js';
import * as Nodes from './jsm/renderers/nodes/Nodes.js';
import { nodeFrame } from './jsm/renderers/webgl/nodes/WebGLNodes.js';

--
All Nodes + WebGLNodeBuilder gzipped was a filesize of 10 KB. If used only ColorNode this goes down to 7 KB.

[mrdoob]

Nice!

Just remembered that we have a script that helps visualizing tree-shaking: #21657

[mrdoob]

Thanks!

[sunag]

I was thinking of an approach to register classes imported. Like:

class NoiseNode extends Node {
...
}

Node.library.add( NoiseNode );

So we can register only the imported classes and preserve this design using .fromType().