新的 节点材质系统 绑定属性及使用 非常方便 不必重复声明

以instances为例

import {instancedBufferAttribute,instancedDynamicBufferAttribute,} from "three/tsl";
  • 1.

声明一个 InstancedBufferAttribute 使用 instancedBufferAttribute包装后就可以在shader中直接使用

const instanceCount = 10
// 透明度
const floatOpacity = new Float32Array(instanceCount);

const buffer = new THREE.InstancedBufferAttribute(floatOpacity, 1);
// instancedDynamicBufferAttribute 每次写入buffer
// instancedBufferAttribute 手动更新 buffer.needUpdate = true
instanceMesh.instanceOpacity = instancedBufferAttribute(buffer);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

使用
顶点着色器 声明 varying

varyingProperty( 'float', 'vInstanceOpacity' ).assign( instanceMesh.instanceOpacity );
  • 1.

片元着色器 使用 varying

const vInstanceOpacity = varyingProperty( 'float', 'vInstanceOpacity' ); 
diffuseColor.a.assign( diffuseColor.a.mul( opacityNode ).mul(vInstanceOpacity) );
  • 1.
  • 2.