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) );
相关推荐
不关小白白的事15 小时前
🚗 Three.js 实战全解析:打造 SU7 展示 + 人物控制 + HDR 场景 + 碰撞检测
three.js
阿怼丶16 小时前
🚶‍♂️基于 Three.js 的自定义角色漫游系统实战:支持碰撞检测与动画控制
前端·three.js
Mintopia17 小时前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
Mintopia2 天前
Three.js 顶点与颜色点的装配艺术:从像素到彩虹的底层之旅
前端·javascript·three.js
爱看书的小沐2 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
Mintopia3 天前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js
Mintopia4 天前
Three.js 中的噪声与图形变换:一场数字世界的舞蹈
前端·javascript·three.js
中国黄金Gold4 天前
Three.js OrbitControls:实现鼠标左键直接平移场景
three.js
三年三月5 天前
021-顶点法线与反射原理
javascript·three.js
Mintopia5 天前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js