Threejs Shader动态修改Merge合并几何体中单个Mesh的颜色

目录

Merge合并

现象

思路

实现

为单个geometry添加映射

通过id检索Merge后的Geometry映射属性，获取顶点坐标

onBeforeCompile修改编译前材质的着色代码

编译前材质的顶点着色代码

编译前材质的片元着色代码

着色器代码

注意

效果 

Merge合并

mergeBufferGeometries 是用于合并多个几何体（BufferGeometry）为一个几何体的工具。这种方法适用于当有大量的几何体需要渲染时，可以将它们合并为一个几何体来减少渲染调用，从而提高性能。合并后的几何体将会生成一个大的缓冲区，包含了所有合并的几何体的数据，这样在渲染时只需一次性加载这个大缓冲区即可，减少了渲染调用和资源占用。

现象

mergeBufferGeometries 是将每个小geometry的顶点信息做合并，所有的顶点坐标按序存放在合并后的缓冲对象 position数组中。一个大的geometry对应一个材质生成一个合并后的物体

由于没有单个的概念，也就无法通过直接修改材质实现对单个geometry的控制

思路

  1. 给每个geometry添加缓冲属性，存储 id和geometry顶点数量。merge合并后，每个geometry的自定义映射属性会同position一样push在一个数组中
  2. 要单个控制时：通过id检索映射数组，可以得到当前geometry的顶点数量，从而得到这段顶点在merge的position中的位置
  3. 根据当前geometry顶点坐标，通过onBeforeCompile，修改材质的着色代码

实现

为单个geometry添加映射

每执行次函数创建一个geometry，为当前几何体添加自定义属性customId，存储当前id和顶点数量，每两个为1组

function createLineGeometry(points: Array<Vector3>, id: number) {const geometry = new BufferGeometry();geometry.setFromPoints(points);const position = geometry.getAttribute('position')const customIdAttribute = new BufferAttribute(new Int16Array([id, position.count]), 2)geometry.setAttribute('customId', customIdAttribute);return geometry;
}

如下图，id为0，geometry顶点数量为24 

当前几何体的postion（24*3）

通过id检索Merge后的Geometry映射属性，获取顶点坐标

如下，Merge后的Geometry，每个geometry的id和顶点数依次存放在customId中（奇数id，偶数顶点数量）

当前合并了32个geometry，每个几何体的顶点数都是24（合并时，顶点数量不一定一致，这也是要映射顶点数的关键）

Merge后的position

如下函数，检索customId数组，根据id获取当前顶点在总顶点中的开始索引，结束索引

例如，要控制id为1的geometry，此函数应该返回 24、47

  const getGeometryVextexHeadTailIndex = (merge) => {// 当前几何体的顶点数量let vertexCount = 0// 顶点起始索引let vertexStartIndex = 0// 顶点结束索引let vertexEndIndex = 0const customId = merge.geometry.getAttribute('customId')  if(!customId || !mergeId.value.length) returnfor (let i = 0; i < customId.array.length; i+=2) {if (customId.array[i] == mergeId.value) {// 检索到id，+1 偶 则为当前顶点数vertexCount = customId.array[i + 1]vertexEndIndex = vertexStartIndex + vertexCount - 1return { vertexStartIndex, vertexEndIndex }}vertexStartIndex += customId.array[i + 1]}  }

onBeforeCompile修改编译前材质的着色代码

根据顶点索引，顶点着色器动态传递Varying类型的高亮色，片元着色器会收到插值后的Varying Color，判断当前片元的插值颜色是否和uniform的高亮色一致，一致则修改，效果达成（要高亮的所有顶点组成的每个图元一个色，所以插值后的每个片元也是这个色）

编译前材质的顶点着色代码

对 void main 进行修改

编译前材质的片元着色代码

对 void main 和 vec4 diffuseColor = vec4( diffuse, opacity ); 进行修改

着色器代码

  const beforeCompileMaterial = (merge, { vertexStartIndex, vertexEndIndex }) => {// console.log(vertexStartIndex, vertexEndIndex);merge.material.onBeforeCompile = (shader) => {/* 三个uniform开始索引结束索引高亮色*/shader.uniforms.vertexStartIndex = { value: vertexStartIndex };shader.uniforms.vertexEndIndex = { value: vertexEndIndex };shader.uniforms.highLightColor = { value: merge.highLightColor };// 修改顶点着色器shader.vertexShader = shader.vertexShader.replace('void main() {',['uniform int vertexStartIndex;','uniform int vertexEndIndex;',   'uniform vec3 highLightColor;',   'varying vec3 vColor;','void main() {',// 如果当前顶点索引在 起止索引 间，varing向片元传递高亮色`if(gl_VertexID >= vertexStartIndex && gl_VertexID <= vertexEndIndex) {`,'vColor = highLightColor;','}'].join('\n'))// 修改片元着色器shader.fragmentShader = shader.fragmentShader.replace('void main() {',['uniform vec3 highLightColor;',   // 如果顶点着色器与片元着色器中有类型和命名都相同的varying变量，那么顶点着色器赋给该变量的值就会被自动地传入片元着色器'varying vec3 vColor;','void main() {'].join('\n'))shader.fragmentShader = shader.fragmentShader.replace('vec4 diffuseColor = vec4( diffuse, opacity );',['vec4 diffuseColor;',  // 插值后的vColor，当前片元的vColor如果和高亮色一致'if(vColor == highLightColor) {',// 修改当前片元为高亮色'diffuseColor = vec4( vColor, 1.0 );','} else {',// 别的片元不变'diffuseColor = vec4( diffuse, opacity );','}'].join('\n'))}}

注意

为每个小geometry添加映射时，需要添加缓冲属性，而不是直接类js添加属性，因为Merge的源码是循环geometry数组，逐个push每个geometry的缓冲属性（源码38 ~ 53行），无需修改源码，性能消耗也比较友好

mergeBufferGeometries 源码 

	/*** @param  {Array<BufferGeometry>} geometries* @param  {Boolean} useGroups* @return {BufferGeometry}*/mergeBufferGeometries: function ( geometries, useGroups ) {var isIndexed = geometries[ 0 ].index !== null;var attributesUsed = new Set( Object.keys( geometries[ 0 ].attributes ) );var morphAttributesUsed = new Set( Object.keys( geometries[ 0 ].morphAttributes ) );var attributes = {};var morphAttributes = {};var morphTargetsRelative = geometries[ 0 ].morphTargetsRelative;var mergedGeometry = new BufferGeometry();var offset = 0;for ( var i = 0; i < geometries.length; ++ i ) {var geometry = geometries[ i ];var attributesCount = 0;// ensure that all geometries are indexed, or noneif ( isIndexed !== ( geometry.index !== null ) ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure index attribute exists among all geometries, or in none of them.' );return null;}// gather attributes, exit early if they're differentfor ( var name in geometry.attributes ) {if ( ! attributesUsed.has( name ) ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. All geometries must have compatible attributes; make sure "' + name + '" attribute exists among all geometries, or in none of them.' );return null;}if ( attributes[ name ] === undefined ) attributes[ name ] = [];attributes[ name ].push( geometry.attributes[ name ] );attributesCount ++;}// ensure geometries have the same number of attributesif ( attributesCount !== attributesUsed.size ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. Make sure all geometries have the same number of attributes.' );return null;}// gather morph attributes, exit early if they're differentif ( morphTargetsRelative !== geometry.morphTargetsRelative ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. .morphTargetsRelative must be consistent throughout all geometries.' );return null;}for ( var name in geometry.morphAttributes ) {if ( ! morphAttributesUsed.has( name ) ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '.  .morphAttributes must be consistent throughout all geometries.' );return null;}if ( morphAttributes[ name ] === undefined ) morphAttributes[ name ] = [];morphAttributes[ name ].push( geometry.morphAttributes[ name ] );}// gather .userDatamergedGeometry.userData.mergedUserData = mergedGeometry.userData.mergedUserData || [];mergedGeometry.userData.mergedUserData.push( geometry.userData );if ( useGroups ) {var count;if ( isIndexed ) {count = geometry.index.count;} else if ( geometry.attributes.position !== undefined ) {count = geometry.attributes.position.count;} else {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed with geometry at index ' + i + '. The geometry must have either an index or a position attribute' );return null;}mergedGeometry.addGroup( offset, count, i );offset += count;}}// merge indicesif ( isIndexed ) {var indexOffset = 0;var mergedIndex = [];for ( var i = 0; i < geometries.length; ++ i ) {var index = geometries[ i ].index;for ( var j = 0; j < index.count; ++ j ) {mergedIndex.push( index.getX( j ) + indexOffset );}indexOffset += geometries[ i ].attributes.position.count;}mergedGeometry.setIndex( mergedIndex );}// merge attributesfor ( var name in attributes ) {var mergedAttribute = this.mergeBufferAttributes( attributes[ name ] );if ( ! mergedAttribute ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' attribute.' );return null;}mergedGeometry.setAttribute( name, mergedAttribute );}// merge morph attributesfor ( var name in morphAttributes ) {var numMorphTargets = morphAttributes[ name ][ 0 ].length;if ( numMorphTargets === 0 ) break;mergedGeometry.morphAttributes = mergedGeometry.morphAttributes || {};mergedGeometry.morphAttributes[ name ] = [];for ( var i = 0; i < numMorphTargets; ++ i ) {var morphAttributesToMerge = [];for ( var j = 0; j < morphAttributes[ name ].length; ++ j ) {morphAttributesToMerge.push( morphAttributes[ name ][ j ][ i ] );}var mergedMorphAttribute = this.mergeBufferAttributes( morphAttributesToMerge );if ( ! mergedMorphAttribute ) {console.error( 'THREE.BufferGeometryUtils: .mergeBufferGeometries() failed while trying to merge the ' + name + ' morphAttribute.' );return null;}mergedGeometry.morphAttributes[ name ].push( mergedMorphAttribute );}}return mergedGeometry;}

效果 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/10386.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【GESP】2023年12月图形化二级 -- 小杨报数

【GESP】2023年12月图形化二级 -- 小杨报数

小杨报数 【题目描述】 小杨需要从 1 1 1到 N N N报数。在报数过程中&#xff0c;小杨希望跳过 M M M的倍数。例如&#xff0c;如果 N 5 N5 N5&#xff0c; M 2 M2 M2&#xff0c;那么小杨就需要依次报出 1 1 1&#xff0c; 3 3 3&#xff0c; 5 5 5。 默认小猫角色和白色背…
阅读更多...
数据库提权

数据库提权

1.此时实验需要用到的软件&#xff1a; &#xff08;1&#xff09;phpStudy该程序包集成最新的ApachePHPMySQL phpMyAdminZendOptimizer,一次性安装,无须配置即可使用,是非常方便、好用的PHP调试环境.该程序不仅包括PHP调试环境,还包括了开发工具、开发手册等.总之学习PHP只需…
阅读更多...
Android 逆向

Android 逆向

一、apk 查壳工具 ApkScan-PKID 相关APK文件可以在 豌豆荚 官网下载 ApkScan-PKID查壳工具 下载 - 简书 (jianshu.com) 二、脱壳工具&#xff1a;frida 1、Android端配置 frida-server&#xff1a; 该步骤需要使用到 adb&#xff0c;操作Android文件 Releases frida/frid…
阅读更多...
对话NVIDIA英伟达：AI已照进现实 | 最新快讯

对话NVIDIA英伟达：AI已照进现实 | 最新快讯

文 | MetaPost NVIDIA 创始人兼首席执行官黄仁勋在 GTC 2024 主题演讲上表示&#xff1a;下一波 AI 浪潮将是 AI 对物理世界的学习。 当下&#xff0c;全球范围内价值超过50万亿美金的行业正在竞相实现数字化&#xff0c;数字孪生技术正在赋能千行百业。NVIDIA Omniverse 中国…
阅读更多...
TriDet: Temporal Action Detection with Relative Boundary Modeling

TriDet: Temporal Action Detection with Relative Boundary Modeling

标题&#xff1a;TriDet&#xff1a;采用相对边界建模的时间动作检测 原文链接&#xff1a;TriDet: Temporal Action Detection With Relative Boundary Modeling (thecvf.com)https://openaccess.thecvf.com/content/CVPR2023/papers/Shi_TriDet_Temporal_Action_Detection_W…
阅读更多...
笔试强训未触及题目（个人向）

笔试强训未触及题目（个人向）

1.DP22 最长回文子序列 1.题目 2.解析 这是一个区间dp问题&#xff0c;我们让dp[i][j]表示在区间[i&#xff0c;j]内的最长子序列长度&#xff0c;如图&#xff1a; 3.代码 public class LongestArr {//DP22 最长回文子序列public static void main(String[] args) {Scanner…
阅读更多...
MSP430环境搭建

MSP430环境搭建

1.下载ccs编译器 注意&#xff1a;安装路径和工作路径不能出现中文&#xff01; 没有说明的步骤就点next即可&#xff01; 1.1下载适合自己电脑的压缩包。 下载好压缩包后解压&#xff0c;点击有图标进行安装。 1.2创建一个文件夹用于安装编译器位置 选择安装地址&#xff0…
阅读更多...
新书速览|Rust编程与项目实战

新书速览|Rust编程与项目实战

掌握Rust编程基础和开发方法&#xff0c;实战网络编程、图像和游戏开发、数据分析项目 本书内容 Rust是一门系统编程语言&#xff0c;专注于安全&#xff0c;尤其是并发安全&#xff0c;它也是支持函数式、命令式以及泛型等编程范式的多范式语言。标准Rust在语法和性能上和标准…
阅读更多...
贝壳面试：MySQL联合索引，最左匹配原则是什么？

贝壳面试：MySQL联合索引，最左匹配原则是什么？

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如得物、阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 1.谈谈你对MySQL联合索引的认识&#xff1f; 2.在MySQ…
阅读更多...
信创 | 高效信创项目管理：关键步骤与实用技巧！

信创 | 高效信创项目管理：关键步骤与实用技巧！

高效信创项目管理的关键步骤与实用技巧可以从多个维度进行分析和总结。首先&#xff0c;建立有效的工程管理体系是确保信创项目顺利实施的基础&#xff0c;这包括项目管理、质量管理、成本控制等方面的工作。其次&#xff0c;实现项目全流程精细化管理&#xff0c;如信息的及时…
阅读更多...
使用./build.sh编译ORB_SLAM源码时出现报错：/usr/bin/ld:找不到 -lboost_serialization的解决办法

使用./build.sh编译ORB_SLAM源码时出现报错：/usr/bin/ld:找不到 -lboost_serialization的解决办法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、/usr/bin/ld:找不到 -lboost_serialization1.问题描述2.解决(1). 下载源码(2) . 编译安装 一、/usr/bin/ld:找不到 -lboost_serialization 1.问题描述 在安装…
阅读更多...
机器视觉任务中语义分割方法的进化历史

机器视觉任务中语义分割方法的进化历史

机器视觉任务中语义分割方法的进化历史 一、基于传统方法的图像分割二、基于卷积神经网络的图像分割三、基于Attention机制的图像分割四、语义分割模型的挑战与改进 在图像处理领域&#xff0c;传统图像分割技术扮演着重要角色。 一、基于传统方法的图像分割 这些方法包括大津…
阅读更多...
2 GPIO控制

2 GPIO控制

ESP32的GPIO的模式&#xff0c;一共有输入和输出模式两类。其中输入模式&#xff1a;上拉输入、下拉输入、浮空输入、模拟输入&#xff1b;输出模式&#xff1a;输出模式、开漏输出&#xff08;跟stm32八种输入输出模式有所不同&#xff09;。库函数中控制引脚的函数如下&#…
阅读更多...
基础算法，贪心算法，贪心策略，OJ练习

基础算法，贪心算法，贪心策略，OJ练习

文章目录 一、概念二、OJ练习2.1 区间选点2.2 区间合并2.3 区间2.4 合并果子2.5 排队接水2.6 货仓选址2.7 防晒2.8 畜栏预定2.9 雷达设备2.10 国王游戏2.11 耍杂技的牛2.12 给树染色2.13 任务2.14 能量石 三、总结 一、概念 贪心是一种在每次决策时采取当前意义下最优策略的算…
阅读更多...
linux上使用mariadb安装mysql环境

linux上使用mariadb安装mysql环境

之前都是手动安装mysql数据库&#xff0c;现在尝试下在线安装&#xff0c;为后面的项目部署做准备&#xff0c;突然发现使用mariadb安装mysql环境真的超级简单。 1.使用mariadb安装mysql 安装服务端&#xff1a; yum install mariadb-server -y 安装客户端&#xff1a; yum i…
阅读更多...
数字孪生引擎国产信创环境适配靠谱么？

数字孪生引擎国产信创环境适配靠谱么？

近期我们组织了一次国产化环境适配以及产品国产化产品替换的交流&#xff0c;虽然从属于不同的业务条线&#xff0c;但是在过去一段时间多多少少都承受不同程度的信创压力&#xff0c;尤其是自然资源业务方面&#xff0c;由于自然资源大多数的业务是属于强GIS的范畴&#xff0c…
阅读更多...
docker容器技术篇：rancher管理平台部署kubernetes集群

docker容器技术篇：rancher管理平台部署kubernetes集群

rancher管理平台部署kubernetes集群 Rancher 是一个 Kubernetes 管理工具&#xff0c;让你能在任何地方和任何提供商上部署和运行集群。 Rancher 可以创建来自 Kubernetes 托管服务提供商的集群&#xff0c;创建节点并安装 Kubernetes&#xff0c;或者导入在任何地方运行的现…
阅读更多...
[优选算法]------滑动窗⼝——209. 长度最小的子数组

[优选算法]------滑动窗⼝——209. 长度最小的子数组

目录 1.题目 1.解法⼀&#xff08;暴⼒求解&#xff09;&#xff08;会超时&#xff09;&#xff1a; 2.解法⼆&#xff08;滑动窗⼝&#xff09;&#xff1a; 1.算法思路&#xff1a; 2.手撕图解 3.代码实现 1.C 2.C语言 1.题目 209. 长度最小的子数组 给定一个含有 n…
阅读更多...
C++笔试强训day18

C++笔试强训day18

目录 1.压缩字符串 2.chika和蜜柑 3.01背包 1.压缩字符串 链接 注意细节&#xff1a; 1.数量为一个时不用输出个数 2.当数量超过 9 时&#xff0c;需要逐个拿出 n 的位数&#xff0c;如153次&#xff0c;需要拿出1、5、3三个数 详细代码&#xff1a; class Solution { publ…
阅读更多...
二叉树进阶 --- 中

二叉树进阶 --- 中

目录 1. find 的递归实现 2. insert 的递归实现 3. erase 的递归实现 3.1. 被删除的节点右孩子为空 3.2. 被删除的节点左孩子为空 3.3. 被删除的节点左右孩子都不为空 4. 析构函数的实现 5. copy constructor的实现 6. 赋值运算符重载 7. 搜索二叉树的完整实现 1. fi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023