开通网站费用怎么做分录,网站建站手机,广州海珠建网站,网站右下角图片代码目录 背景
思路
Threejs实现
记录每条线的点数 封装原始裁剪索引数据
封装合并几何体的缓冲数据#xff1a;由裁剪索引组成的 IntArray
守住该有的线段#xff01;
修改顶点着色器
修改片元着色器
完整代码
WebGL实现类似功能#xff08;简易版#xff0c;便于测…
目录 背景
思路
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: Arraynumber [];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: Arraynumber [];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;
}注意
自定义的顶点缓冲数据如果是int类型的及时你js里面是int类型在传入shader里面的时候vertexpoint辅助函数有个参数也会给转成float类型则需要float声明接收后续使用int数据再次int转换即可uniform变量不能直接声明为数组类型。这是因为uniform变量是在整个渲染过程中保持不变的而数组类型通常需要在编译时知道其大小
