threejs 节点材质系统 绑定attribute

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

以instances为例

js 复制代码
import {instancedBufferAttribute,instancedDynamicBufferAttribute,} from "three/tsl";

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

js 复制代码
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

js 复制代码
varyingProperty( 'float', 'vInstanceOpacity' ).assign( instanceMesh.instanceOpacity );

片元着色器 使用 varying

js 复制代码
const vInstanceOpacity = varyingProperty( 'float', 'vInstanceOpacity' ); 
diffuseColor.a.assign( diffuseColor.a.mul( opacityNode ).mul(vInstanceOpacity) );
相关推荐
刘皇叔code10 小时前
如何给Three.js中ExtrudeGeometry的不同面设置不同材质
webgl·three.js
vivo互联网技术18 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js
你真的可爱呀5 天前
5.Three.js 学习(基础+实践)
学习·three.js
战场小包7 天前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
入秋7 天前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
Becauseofyou1378 天前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
Jedi Hongbin10 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
接着奏乐接着舞。10 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js