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) );
相关推荐
你真的可爱呀19 小时前
5.Three.js 学习(基础+实践)
学习·three.js
战场小包2 天前
弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园,让弟弟看个够
前端·three.js·文心快码
入秋3 天前
Three.js后期处理实战:镜头颜色、色差、点阵与颜色管道的深度解析
前端·three.js
Becauseofyou1373 天前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
Jedi Hongbin5 天前
Three.js shader内置矩阵注入
前端·javascript·three.js
接着奏乐接着舞。6 天前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
刘皇叔code7 天前
记一次用Three.js展示360°全景图的折腾
webgl·three.js
世伟爱吗喽8 天前
threejs入门学习日记
前端·javascript·three.js
拜无忧10 天前
three.js纸飞机飞行撞建筑
前端·three.js
拜无忧10 天前
three/文字爆裂效果
three.js