Threejs（WebGL）绘制线段优化：Shader修改gl.LINES模式为gl.LINE_STRIP

目录

背景 

思路

Threejs实现

记录每条线的点数

 封装原始裁剪索引数据

封装合并几何体的缓冲数据：由裁剪索引组成的 IntArray

守住该有的线段！

修改顶点着色器

修改片元着色器

完整代码

WebGL实现类似功能（简易版，便于测验）

注意 

背景 

  场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......

  但是，这种方法会有一定代价。假设，一条曲线由5个点构成，除了首尾两个点，我们需要对中间的每个点额外拷贝一份 用于下个list段的起点，5个点要拷贝3个点，10个点要拷贝8个点，n个点要拷贝n-2个点，当点数较多时，这是一笔不小的额外开销

  遵守WebGL性能优化第一原则：尽可能的减少点的数量，每个顶点都要执行顶点着色器，进行各种矩阵变换，及插值后到片元着色器的相应操作，点数太多会极大的影响性能

设想：能否不复制这些点，就能达到非连续线段的效果？

思路

使用Line类，即gl.LINE_STRIP模式绘制一条连续的线段，v0 v1、v2 v3、v4 v5......

每条线段结尾到下条线段开头 多出的折线 在片元着色器中 discard

Threejs实现

记录每条线的点数

每条线是一个独立的geometry，记录每条线的点数，得到 [line1_vertex_count, line2_vertex_count...]，添加到合并后的Geometry

const stripIndexs = geometrys.map(item => item.attributes.position.count)
mergeGeometry.stripIndexs = stripIndexs

 封装原始裁剪索引数据

记录每条线的最后一个点的索引及其索引+1，也就是这个每个折线处的两个点的索引所在合并后的mergeGeometry的顶点中的位置，比如，有三条线，每条线仅有首尾两个点(举例说明，实际n个点)，则需要记录 1 2 3 4 这四个索引，如下

    let cumulativeIndex = -1;let originCropIndexes: Array<number> = [];for (let i = 0; i < geometry.stripIndexs.length - 1; i++) {cumulativeIndex += geometry.stripIndexs[i];originCropIndexes.push(cumulativeIndex);originCropIndexes.push(cumulativeIndex + 1);}

封装合并几何体的缓冲数据：由裁剪索引组成的 IntArray

将上一步得到的原始裁剪索引数组，每个裁剪索引按序映射到 缓冲数组 initCroppingIndexes 中，如下，遍历合并线段的所有顶点，当前索引与裁剪索引相同则按序映射，没有则默认-1，得到 [-1, 1, 2, 3, 4, -1]（依然拿上述举例）

    let vertexCount = geometry.attributes.position.count;let initCroppingIndexes = new Int16Array(vertexCount).fill(-1);if (originCropIndexes.length) {for (let i = 0; i < vertexCount; i++) {for (let j = 0; j < originCropIndexes.length; j++) {if (i == originCropIndexes[j]) {initCroppingIndexes[i] = originCropIndexes[j];break;}}}}geometry.setAttribute('initCroppingIndex', new BufferAttribute(initCroppingIndexes, 1));

守住该有的线段！

数据处理并没有结束！如果现在直接到着色器中按裁剪索引去插值直接做discard，会把 1 2 3 4 顶点中的 2 3所组成的线段也discard掉，当然，这不是我们想要的，需要进一步封装相关数据用于后续着色器使用

如下图，需要再次记录 索引 2 3  4 5  6 7 ，并且连续的两对点都有不同的标识，这个至关重要，因为这些索引是要保留的所组成的线段，如果这些要保留的索引又是连续，又是相同的标识，是不是 2 ~ 7顶点间的线段又会都保留？2 3 、4 5、6 7组成的线段你是保留了，3 4、5 6线段是不是又没有剔除？陷入了无止境循环的局面....

拿上图举例，最终 continuousCroppingIndexes 所成型的数据是 [-1, -1, 0, 0, 1, 1, 0, 0, -1, -1。]如下代码

    let stripIdentCount = 0;let continuousCroppingIndexes = new Int16Array(vertexCount).fill(-1);if (originCropIndexes.length) {for (let i = 1; i < vertexCount - 1; i++) {if (initCroppingIndexes[i] != -1 && initCroppingIndexes[i - 1] + 1 == initCroppingIndexes[i + 1] - 1) {continuousCroppingIndexes[i] = stripIdentCount % 4 < 2 ? 0 : 1;stripIdentCount++;}  }}geometry.setAttribute('continuousCroppingIndex', new BufferAttribute(continuousCroppingIndexes, 1));

修改顶点着色器

这步很简单，将init裁剪索引缓冲数据和要保留的裁剪索引数据分别给赋顶点插值颜色，用于后续片元根据插值颜色做判断。

注意，这里continuousCroppingIndex缓冲数据是双重标识，0 0 1 1 0 0...

    material.onBeforeCompile = (shader) => {shader.vertexShader = shader.vertexShader.replace('void main() {',['attribute float initCroppingIndex;','attribute float continuousCroppingIndex;','varying vec4 vColor;','varying vec4 vStripCrop;','void handleVaryingColor() {','int initIndex = int(initCroppingIndex);','if (gl_VertexID == initIndex) {','vColor = vec4(vec3(1.), 0.);','}','vStripCrop = vec4(vec2(1.), continuousCroppingIndex, 0.);','}','void main() {','handleVaryingColor();'].join('\n'));};

修改片元着色器

可能举例更形象些：如下，1 2、3 4、5 6、7 8都会被裁剪，而并不会裁剪 2 3 、4 5 、6 7，因为该有的索引都做了成对的颜色标识，并且会区分奇偶对顶点的颜色！

 如下，按需裁剪

material.onBeforeCompile = (shader) => {shader.fragmentShader = shader.fragmentShader.replace('void main() {',['varying vec4 vColor;', 'varying vec4 vStripCrop;', 'void main() {'].join('\n'));shader.fragmentShader = shader.fragmentShader.replace('vec4 diffuseColor = vec4( diffuse, opacity );',['vec4 diffuseColor = vec4( diffuse, opacity );','vec4 vUnivCropColor = vec4(vec3(1.), 0.);','vec4 vEvenCropColor = vec4(vec2(1.), vec2(0.));','if(vColor == vUnivCropColor && vStripCrop != vUnivCropColor && vStripCrop != vEvenCropColor) {','discard;','}',].join('\n'));};

完整代码

 geometry和material分别是合并的几何体及其材质

  const handleLineGeometryShader = (geometry, material) => {let stripIdentCount = 0;let cumulativeIndex = -1;let vertexCount = geometry.attributes.position.count;let originCropIndexes: Array<number> = [];let initCroppingIndexes = new Int16Array(vertexCount).fill(-1);let continuousCroppingIndexes = new Int16Array(vertexCount).fill(-1);for (let i = 0; i < geometry.stripIndexs.length - 1; i++) {cumulativeIndex += geometry.stripIndexs[i];originCropIndexes.push(cumulativeIndex);originCropIndexes.push(cumulativeIndex + 1);}if (originCropIndexes.length) {for (let i = 0; i < vertexCount; i++) {for (let j = 0; j < originCropIndexes.length; j++) {if (i == originCropIndexes[j]) {initCroppingIndexes[i] = originCropIndexes[j];break;}}}for (let i = 1; i < vertexCount - 1; i++) {if (initCroppingIndexes[i] != -1 && initCroppingIndexes[i - 1] + 1 == initCroppingIndexes[i + 1] - 1) {continuousCroppingIndexes[i] = stripIdentCount % 4 < 2 ? 0 : 1;stripIdentCount++;}  }}// console.log(originCropIndexes, initCroppingIndexes, continuousCroppingIndexes);geometry.setAttribute('initCroppingIndex', new BufferAttribute(initCroppingIndexes, 1));geometry.setAttribute('continuousCroppingIndex', new BufferAttribute(continuousCroppingIndexes, 1));beforeCompileLineMaterial(material);};const beforeCompileLineMaterial = (material) => {material.onBeforeCompile = (shader) => {shader.vertexShader = shader.vertexShader.replace('void main() {',['attribute float initCroppingIndex;','attribute float continuousCroppingIndex;','varying vec4 vColor;','varying vec4 vStripCrop;','void handleVaryingColor() {','int initIndex = int(initCroppingIndex);','if (gl_VertexID == initIndex) {','vColor = vec4(vec3(1.), 0.);','}','vStripCrop = vec4(vec2(1.), continuousCroppingIndex, 0.);','}','void main() {','handleVaryingColor();'].join('\n'));shader.fragmentShader = shader.fragmentShader.replace('void main() {',['varying vec4 vColor;', 'varying vec4 vStripCrop;', 'void main() {'].join('\n'));shader.fragmentShader = shader.fragmentShader.replace('vec4 diffuseColor = vec4( diffuse, opacity );',['vec4 diffuseColor = vec4( diffuse, opacity );','vec4 vUnivCropColor = vec4(vec3(1.), 0.);','vec4 vEvenCropColor = vec4(vec2(1.), vec2(0.));','if(vColor == vUnivCropColor && vStripCrop != vUnivCropColor && vStripCrop != vEvenCropColor) {','discard;','}',].join('\n'));};}

WebGL实现类似功能（简易版，便于测验）

var VSHADER_SOURCE ='attribute vec4 a_Position;\n' +'attribute float indexes;\n' +'attribute float oneIndex;\n' +'attribute float twoIndex;\n' +'varying vec4 vColor;\n' + 'varying vec4 vStripCrop;\n' + 'void main() {\n' +'int index = int(indexes);\n' +'int oIndex = int(oneIndex);\n' +// 'int tIndex = int(twoIndex);\n' +'if (index == oIndex) {\n' +'vColor = vec4(vec3(1.), 0.);\n' +'}\n' +'vStripCrop = vec4(vec2(1.), twoIndex, 0.);\n' +'gl_Position = a_Position;\n' +'}\n';// Fragment shader program
var FSHADER_SOURCE ='precision mediump float;\n' +'varying vec4 vColor;\n' + 'varying vec4 vStripCrop;\n' + 'void main() {\n' +'  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +'if(vColor == vec4(vec3(1.), 0.) && vStripCrop != vec4(vec3(1.), 0.) && vStripCrop != vec4(vec2(1.), 0., 0.)) {\n' +'discard;\n' +'}\n' + '}\n';function main() {var canvas = document.getElementById('webgl');var gl = getWebGLContext(canvas);if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to intialize shaders.');return;}var n = initVertexBuffers(gl);gl.clearColor(0.0, 0.0, 0.0, 1.0);gl.clear(gl.COLOR_BUFFER_BIT);gl.drawArrays(gl.LINE_STRIP, 0, n);
}function initVertexBuffers(gl) {var vertices = new Float32Array([-0.6, -0.8,   0.6, -0.8,       -0.6, -0.5,     0.6, -0.5,      -0.6, -0.2,   0.6, -0.2,      -0.6, 0.1,   0.6, 0.1,     -0.6, 0.4, 0.6, 0.4]);var indexes = new Float32Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);var arr1 = new Float32Array([-1, 1, 2, 3, 4, 5, 6, 7, 8, -1]);var arr2 = new Float32Array([-1, -1, 0, 0, 1, 1, 0, 0, -1, -1]);var n = 10;// Create a buffer objectvar vertexBuffer = gl.createBuffer();  var indexBuffer = gl.createBuffer();var oneBuffer = gl.createBuffer();var twoBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);var a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(a_Position);gl.bindBuffer(gl.ARRAY_BUFFER, indexBuffer);gl.bufferData(gl.ARRAY_BUFFER, indexes, gl.STATIC_DRAW);var indexes = gl.getAttribLocation(gl.program, 'indexes');gl.vertexAttribPointer(indexes, 1, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(indexes);gl.bindBuffer(gl.ARRAY_BUFFER, oneBuffer);gl.bufferData(gl.ARRAY_BUFFER, arr1, gl.STATIC_DRAW);var oneIndex = gl.getAttribLocation(gl.program, 'oneIndex');gl.vertexAttribPointer(oneIndex, 1, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(oneIndex);gl.bindBuffer(gl.ARRAY_BUFFER, twoBuffer);gl.bufferData(gl.ARRAY_BUFFER, arr2, gl.STATIC_DRAW);var twoIndex = gl.getAttribLocation(gl.program, 'twoIndex');gl.vertexAttribPointer(twoIndex, 1, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(twoIndex);return n;
}

注意 

  1. 自定义的顶点缓冲数据如果是int类型的，及时你js里面是int类型，在传入shader里面的时候，vertexpoint辅助函数有个参数也会给转成float类型！则需要float声明接收，后续使用int数据再次int转换即可
  2. uniform变量不能直接声明为数组类型。这是因为uniform变量是在整个渲染过程中保持不变的，而数组类型通常需要在编译时知道其大小

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

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

相关文章

接入knife4j-openapi3访问/doc.html页面空白问题

接入knife4j-openapi3访问/doc.html页面空白问题

大概率拦截器拦截下来了&#xff0c;我们F12看网络请求进行排查 都是 /webjars/ 路径下的资源被拦截了&#xff0c;只需在拦截器中添加该白名单即可"/webjars/**" 具体配置如下&#xff1a; Configuration public class WebConfig implements WebMvcConfigurer {priv…
阅读更多...
eDP V1.4协议介绍

eDP V1.4协议介绍

一、说明 eDP的全称是Embedded DisplayPort嵌入式显示端口，主要应用与短距离系统内应用，例如手机、一体式台式机等。eDP V1.4b是基于DP V1.3标准制作完成，但因应用场景的不同，还是有很多区别。 电压摆幅不同，eDP相对较低； eDP功耗相对较低； DP有线材和连接器的要求，eD…
阅读更多...
什么是机器人离线编程？ 衡祖仿真

什么是机器人离线编程？ 衡祖仿真

一、什么是机器人离线编程&#xff1f; 机器人离线编程是自动化生产的重要一环。离线编程指&#xff0c;在建立了机器人的三维模拟场景后&#xff0c;经由软件仿真计算&#xff0c;生成控制机器人运动轨迹&#xff0c;进而生成机器人的控制指令。工程师可以由此来控制物理环境…
阅读更多...
java线程间通信

java线程间通信

在Java中&#xff0c;线程间通信主要依赖于对象的监视器&#xff08;Monitor&#xff09;机制&#xff0c;其中wait(), notify(), 和 notifyAll() 方法被广泛使用。这些方法必须在同步环境中调用&#xff0c;通常是同步块或同步方法。以下是使用这些通信机制的一个简单例子&…
阅读更多...
浅谈线性化

浅谈线性化

浅谈线性化 原文&#xff1a;浅谈线性化 - 知乎 (zhihu.com) All comments and opinions expressed on Zhihu are mine alone and do not necessarily reflect those of my employers, past or present. 本文内容所有内容仅代表本人观点&#xff0c;和Mathworks无关 (这里所说…
阅读更多...
备忘录--

备忘录--

备忘录 vue新建项目&#xff0c;body 大小占不了全屏 // 解决问题 // public/index.html 更改基础样式 html,body{height: 100%width: 100%&#xff1b;margin: 0;border: 0;padding: 0; }Element Plus 经典布局 参考 Element Plus 官网 <template><div class"…
阅读更多...
移动端性能测试(android/ios)

移动端性能测试(android/ios)

solox官网 https://github.com/smart-test-ti/SoloX solox简介 实时收集android/ios性能的工具&#xff0c;Android设备无需Root&#xff0c;iOS设备无需越狱。有效解决Android和iOS性能的测试和分析挑战。 solox安装 环境准备 python安装3.10以上的 python官网下载地址…
阅读更多...
数据结构栈(C语言Java语言的实现)相关习题

数据结构栈(C语言Java语言的实现)相关习题

文章目录 栈概念以及代码实现例题[232. 用栈实现队列](https://leetcode.cn/problems/implement-queue-using-stacks/)[1614. 括号的最大嵌套深度](https://leetcode.cn/problems/maximum-nesting-depth-of-the-parentheses/)[234. 回文链表](https://leetcode.cn/problems/pal…
阅读更多...
鸿蒙ArkTS声明式开发：跨平台支持列表【透明度设置】 通用属性

鸿蒙ArkTS声明式开发：跨平台支持列表【透明度设置】 通用属性

透明度设置 设置组件的透明度。 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a; gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版…
阅读更多...
Vue3-Vite-ts 前端生成拓扑图，复制即用

Vue3-Vite-ts 前端生成拓扑图，复制即用

完整代码&#xff0c;复制即可用&#xff0c;样式自调 试过 jointjs dagre-d3 vis&#xff0c;好用一点 方法1&#xff1a;Vis.js npm install vis-network <template><div id"mynetwork" class"myChart" :style"{width: 100%, height: 9…
阅读更多...
【UE5：CesiumForUnreal】——加载无高度地形数据

【UE5：CesiumForUnreal】——加载无高度地形数据

目录 1.实现目的 2.数据准备 2.1下载数据 2.2 数据切片 3.加载无地形数据 1.实现目的 在CesiumForUnreal插件中&#xff0c;我们加载地图和地形图层之后&#xff0c;默认都是加载的带有高程信息的地形数据&#xff0c;在实际的项目和开发中&#xff0c;有时候我们需要加载无…
阅读更多...
lipo制作通用版本静态库

lipo制作通用版本静态库

文章目录 目的了解多架构的maclipo如何利用lipo编译通用版本静态库lipo 命令整理扩展目的 主要是使用lipo命令在macOS上创建通用版本的静态库（.a文件），来支持多种架构，如arm64，x86_64。 学习目的： 了解mac 不同架构arm64, x86_64了解lipo命令了解多架构的mac 随着appl…
阅读更多...
数据挖掘 | 实验三 决策树分类算法

数据挖掘 | 实验三 决策树分类算法

文章目录 一、目的与要求二、实验设备与环境、数据三、实验内容四、实验小结 一、目的与要求 1&#xff09;熟悉决策树的原理&#xff1b; 2&#xff09;熟练使用sklearn库中相关决策树分类算法、预测方法&#xff1b; 3&#xff09;熟悉pydotplus、 GraphViz等库中决策树模型…
阅读更多...
【期末速成】——计算机组成原理（1）概述

【期末速成】——计算机组成原理（1）概述

目录 一、什么是计算机的组成 二、冯诺依曼体系结构计算机的特点 三、计算机系统的层次结构 四、机器语言、汇编语言、高级语言, 五、 编译程序、解释程序、汇编程序 六、已知主频、CPI计算程序运行时间 一、什么是计算机的组成 计算机的组成可以分为五个部件和两个信息…
阅读更多...
VMware虚拟机安装Ubutu

VMware虚拟机安装Ubutu

打开vmware按步骤安装 选择安装虚拟机路径 选择下载好的镜像 开启虚拟机 等待 回车确认 空格选择/取消 等待等待好按回车 输入用户名&#xff0c;密码就好了
阅读更多...
树形结构-CRUD接口

树形结构-CRUD接口

先看一下效果&#xff1a;整体的效果 新增效果 --默认值是 default 修改效果 - 大致效果如上 --------------------------------------------------------------------------------------------------------------------------------- 下面讲解代码如何实现的 根据你使用…
阅读更多...
SpringBoot发送Gmail邮件

SpringBoot发送Gmail邮件

1. 登录Gmail Gmail网址 点击右上角“小齿轮”&#xff0c;然后点击"查看所有设置" 点击“转发和 POP/IMAP”&#xff0c;按图中设置&#xff0c;然后点击保存&#xff1a; 2. 启用两步验证(https://myaccount.google.com/security) 登录上述网址&#xff0c;找…
阅读更多...
测试FaceRecognitionDotNet报错“Error deserializing object of type int”

测试FaceRecognitionDotNet报错“Error deserializing object of type int”

FaceRecognitionDotNet宣称是最简单的.net人脸识别模块&#xff0c;其内部使用Dlib、DlibDotNet、OpenCVSharp等模块实现人脸识别&#xff0c;网上有不少介绍文章。实际测试过程中&#xff0c;在调用FaceRecognition.Create函数创建FaceRecognition实例对象时&#xff0c;会报如…
阅读更多...
易语言推箱子游戏（附带源码）

易语言推箱子游戏（附带源码）

易语言推箱子游戏 易语言易语言的安装易语言功能特色易语言安装步骤易语言常见问题 导入游戏源码部分源码领取源码下期更新预报 易语言 易语言&#xff08;EPL&#xff09;是一门以中文作为程序代码编程语言&#xff0c;其以“易”著称&#xff0c;创始人为吴涛。易语言早期版…
阅读更多...
linux同步搭建多台服务器

linux同步搭建多台服务器

前言&#xff1a; 如果在安装服务器的过程中&#xff0c;需要安装多台服务器&#xff0c;同样的配置&#xff0c;同样的步骤就可以使用此方法&#xff0c;搭建集群同步安装 1.配置网卡 想要两台机器进行同步的话&#xff0c;必须网段是同样的&#xff0c;保持在同一网段并且能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023