threejs 节点材质系统 绑定attribute

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

以instances为例

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

声明一个 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);

使用

顶点着色器 声明 varying

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

片元着色器 使用 varying

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