Nodes & WebGPURenderer: RangeNode

[sunag]

Description

This simplify the process of creating of procedural values for instances in order to implement this in NodeEditor soon.
This is also widely used in particle system.

A range( min, max ) can contain variations of values like velocity, scale, direction, etc.

Live
https://raw.githack.com/sunag/three.js/dev-node-range/examples/webgpu_instance_mesh.html

Usage

// random [ 0, 1 ] values between instances
const randomFloat = range( 0, 1 );

// random [ vec3( 0, 0, 0 ), vec3( 1, 1, 1 ) ] values between instances
const randomSomeVector = range( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 1, 1, 1 ) );

// random colors between instances from 0x000000 to 0xFFFFFF
const randomColor = range( new THREE.Color( 0x000000 ), new THREE.Color( 0xFFFFFF ) );

material.colorNode = randomColor;
material.opacityNode = randomFloat;

//...
child.isInstancedMesh = true;
child.count = 100;

• Move render object dependencies to renderObject() like WebGLRenderer
• add RangeNode
• update webgpu examples

/ping @mrdoob @Mugen87 @LeviPesin

This contribution is funded by Igalia via Google

[mrdoob]

Nice WebGPURenderer clean up! 👍