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 = 0
    const customId = merge.geometry.getAttribute('customId')  
    if(!customId || !mergeId.value.length) return
    for (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 - 1
        return { 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 none

			if ( 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 different

			for ( 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 attributes

			if ( 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 different

			if ( 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 .userData

			mergedGeometry.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 indices

		if ( 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 attributes

		for ( 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 attributes

		for ( 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;

	}

效果 

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue路由拆分

Vue路由拆分

1.在src下建立router&#xff0c;在router中建立文件index 2.将main.js中部分内容复制 App <template> <div><a href"#/friend">朋友</a><br><a href"#/info">信息</a><br><a href"#/music&quo…
阅读更多...
数据结构十三：八大排序算法

数据结构十三：八大排序算法

排序算法&#xff08;sorting algorithm&#xff09;是用于对一组数据按照特定顺序进行排列。排序算法有着广泛的应用&#xff0c;因为有序数据通常能够被更高效地查找、分析和处理。排序算法中的数据类型可以是整数、浮点数、字符或字符串等。排序的判断规则可根据需求设定&am…
阅读更多...
看马斯克与OpenAI的爱恨情仇，AGI之路会走向何方？

看马斯克与OpenAI的爱恨情仇，AGI之路会走向何方？

揭秘马斯克与OpenAI的决裂&#xff1a;AI的未来将何去何从&#xff1f; ©作者|Steven 来源|神州问学 引言 2024 年 3 月 1 日&#xff0c;时任OpenAI联合创始人的Elon Musk(下文简称&#xff1a;马斯克)将现任 CEO、创始人Sam Altman(下文简称&#xff1a;阿尔特曼)告上…
阅读更多...
深度学习设计模式之单例模式

深度学习设计模式之单例模式

一、单例模式简介 一个类只能有一个实例&#xff0c;提供该实例的全局访问点&#xff1b; 二、单例模式实现步骤 使用一个私有构造函数、一个私有静态变量以及一个公有静态函数来实现。 私有构造函数保证了不能通过构造函数来创建对象实例&#xff0c;只能通过公有静态函数返…
阅读更多...
工业机器人应用实践之玻璃涂胶（篇一）

工业机器人应用实践之玻璃涂胶（篇一）

工业机器人 工业机器人&#xff0c;即面向工业领域的机器人。工业机器人是广泛用于工业领域的多关节机械手或多自由度的机器装置&#xff0c;具有一定的自动性&#xff0c;可依靠自身的动力能源和控制能力实现各种工业加工制造功能。工业机器人被广泛应用于电子、物流、化工等…
阅读更多...
使用OpenCV实现图像平移

使用OpenCV实现图像平移

使用OpenCV实现图像平移 程序流程效果代码 程序流程 读取图像并获取其高度、宽度和通道数。定义平移量tx和ty&#xff0c;并创建平移矩阵M。使用cv2.warpAffine函数对图像进行仿射变换&#xff08;平移&#xff09;&#xff0c;得到平移后的图像。显示平移后的图像。等待用户按…
阅读更多...
HTML【常用的标签】、CSS【选择器】

HTML【常用的标签】、CSS【选择器】

day45 HTML 继day44&#xff0c;w3cschool 常用的标签 k) 表格 表格由 table 标签来定义。每个表格均有若干行&#xff08;由 tr 标签定义&#xff09;&#xff0c;每行被分割为若干单元格&#xff08;由 标签定义&#xff09;。字母 td指表格数据&#xff08;table data&…
阅读更多...
VSCode：设置顶部文件标签页滚动条的宽度

VSCode：设置顶部文件标签页滚动条的宽度

使用VSCode打开多个文件后&#xff0c;顶部的文件标签可以通过滚动条进行滚动&#xff0c;但是缺点是该滚动条太窄了&#xff0c;不好选择。 可以通过如下方法修改改滚动条的宽度&#xff1a; 1.点击设置 2.选择工作台->编辑管理->Title Scrollbar Sizing->Large 3.可…
阅读更多...
QJ71E71-100 三菱Q系列以太网通信模块

QJ71E71-100 三菱Q系列以太网通信模块

QJ71E71-100 三菱Q系列以太网通信模块 QJ71E71-100以太网模块是PLC侧连接Q系列PLC与本站系统的接口模块&#xff0c;如个人计算机和工作站&#xff0c;也是通过以太网使用TCP/IP或UDP/IP通讯协议在 PLC 之间的接口模块。QJ71E71-100外部连接,QJ71E71-100参数规格,QJ71E71-100用…
阅读更多...
表面的相似，本质的不同

表面的相似，本质的不同

韩信与韩王信&#xff0c;两个韩信的结局都是被刘邦所杀&#xff0c;似乎结局类似。但是&#xff0c;略加分析&#xff0c;就会发现其中存在本质的区别。 韩信属于必杀。他的王位是要来的&#xff0c;有居功自傲的本意&#xff0c;功高震主而且毫不避讳。而且年轻&#xff0c;…
阅读更多...
linux上使用mariadb安装mysql环境

linux上使用mariadb安装mysql环境

之前都是手动安装mysql数据库&#xff0c;现在尝试下在线安装&#xff0c;为后面的项目部署做准备&#xff0c;突然发现使用mariadb安装mysql环境真的超级简单。 1.使用mariadb安装mysql 安装服务端&#xff1a; yum install mariadb-server -y 安装客户端&#xff1a; yum i…
阅读更多...
C++(week3)：C语言文件操作

C++(week3)：C语言文件操作

文章目录 (十二) 文件1.流(1)流模型(2)程序员视角的文件(3)缓冲区类型(4)标准流(5)二进制文件 与 文本文件(6)文件流的接口(API) 2.打开/关闭文件(1)fopen(2)fclose(3)示例代码 3.读/写文件(1)fgetc / fputc&#xff1a;一个字符一个字符地读写(2)fgets / fputs&#xff1a;一行…
阅读更多...
UIKit之UIButton

UIKit之UIButton

功能需求&#xff1a; 点击按钮切换按钮的文字和背景图片&#xff0c;同时点击上下左右可以移动图片位置&#xff0c;点击加或减可以放大或缩小图片。 分析&#xff1a; 实现一个UIView的子类即可&#xff0c;该子类包含多个按钮。 实现步骤&#xff1a; 使用OC语言&#xf…
阅读更多...
【碳化硅】陷阱（traps）对SiC MOSFET阈值电压漂移的影响

【碳化硅】陷阱（traps）对SiC MOSFET阈值电压漂移的影响

这篇文章是关于硅碳化物（SiC）金属氧化物半导体场效应晶体管（MOSFET）的阈值电压漂移问题的研究。文章的主要目的是通过研究不同的陷阱（traps）对阈值电压漂移的影响，来解决SiC MOSFET的可靠性问题。 摘要（Abstract） 文章提出了一种研究方法，用于分析影响SiC MOSFET阈值…
阅读更多...
YUV中Y颜色模型的采样

YUV中Y颜色模型的采样

YUV的特点 相对于表示颜色的GUI&#xff0c; YUI将亮度&#xff08;用Y表示&#xff09;与色调&#xff08;用U和V表示&#xff09;分开来表示。又因为人类视网膜上的视网膜杆细胞要多于视网膜锥细 胞&#xff0c;说得通俗一些&#xff0c;视网膜杆细胞的作用就是识别亮度&…
阅读更多...
【Delphi 爬虫库 6】使用正则表达式提取猫眼电影排行榜top100

【Delphi 爬虫库 6】使用正则表达式提取猫眼电影排行榜top100

正则表达式库的简单介绍 正则表达式易于使用&#xff0c;功能强大&#xff0c;可用于复杂的搜索和替换以及基于模板的文本检查。这对于输入形式的用户输入验证特别有用-验证电子邮件地址等。您还可以从网页或文档中提取电话号码&#xff0c;邮政编码等&#xff0c;在日志文件中…
阅读更多...
Tiff文件解析和PackBits解压缩

Tiff文件解析和PackBits解压缩

实现了Tiff图片文件格式的解析&#xff0c;对Tiff文件中的PackBits压缩格式进行解压缩&#xff0c;对Tiff文件中每一个Frame转换成BufferedImage显示。 Java语言实现&#xff0c;Eclipse下开发&#xff0c;AWT显示图片。 public static TIFF Parse(final byte[] bytes) throw…
阅读更多...
【Rollup】用rollup从0到1开发一个js插件并发布到npm

【Rollup】用rollup从0到1开发一个js插件并发布到npm

Rollup 是一个 JavaScript 模块打包器&#xff0c;专注于打包 ES6 模块将其编译回多种模块化格式&#xff0c;尤其适合打包库和框架&#xff0c;因为它可以生成更小、更高效的代码&#xff0c;并且特别适合将代码打包成可在浏览器中使用的库。 从0到1开发js插件 1.创建文件夹…
阅读更多...
解决docker安装Wordpress速度过慢的问题

解决docker安装Wordpress速度过慢的问题

先可以在dockerhub上查看Wordpress的详情&#xff1a; Dockerhttps://hub.docker.com/search?qwordpress 具体速度慢的问题如下&#xff1a; 现在打开docker右上角的设置图标&#xff0c;并进入docker engine&#xff0c;添加如下代码&#xff1a; "registry-mirrors&…
阅读更多...
贪心算法----摆动序列

贪心算法----摆动序列

今日题目&#xff1a;leetcode376 点击跳转题目 观察样例2&#xff1a; 发现最长摆动序列都是极大值和极小值 再加上两个端点&#xff0c;那么我们保证每次都能选择到每个极值点&#xff0c;就能从局部最优推广全局最优了&#xff01; 但是还有一些细节情况需要注意&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023