From 60a370413bde136be6b97936f441b98b5a2a0a02 Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Sun, 25 Aug 2024 22:43:08 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BA=BF=E5=AE=BD=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- design/webgl.drawio | 160 +++++++++++++++++++++- src/hook/wave-view/render-shader.js | 5 +- src/hook/wave-view/render-utils.js | 21 ++- src/hook/wave-view/render-wave.js | 19 ++- src/hook/wave-view/toolbar/renderModal.js | 6 +- 5 files changed, 197 insertions(+), 14 deletions(-) diff --git a/design/webgl.drawio b/design/webgl.drawio index a632cbb..ea30e30 100644 --- a/design/webgl.drawio +++ b/design/webgl.drawio @@ -1,6 +1,6 @@ - + @@ -838,4 +838,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/hook/wave-view/render-shader.js b/src/hook/wave-view/render-shader.js index cbdd046..1897888 100644 --- a/src/hook/wave-view/render-shader.js +++ b/src/hook/wave-view/render-shader.js @@ -30,6 +30,7 @@ class ShaderMaker { const colorsLength = gl_Colors_template.length << 1; const vertexShader = new ShaderMaker('VERTEX_SHADER', `#version 300 es +precision mediump float; in ivec2 pos; in ivec3 control; out vec4 v_color; @@ -50,8 +51,8 @@ void main() { float posY = float(pos.y) / posYFactor; // 偏移包括三部分：用户滚动时发生的全局位移、为了设置线宽发生的位移、与 scale 无关的额外位移 - float offsetX = offset.x + float(ws.x) + float(shift.x); - float offsetY = offset.y + float(ws.y) + float(shift.y); + float offsetX = offset.x + ws.x + shift.x; + float offsetY = offset.y + ws.y + shift.y; gl_Position = vec4( posX * scale.x + offsetX, diff --git a/src/hook/wave-view/render-utils.js b/src/hook/wave-view/render-utils.js index e21335a..7f3a529 100644 --- a/src/hook/wave-view/render-utils.js +++ b/src/hook/wave-view/render-utils.js @@ -109,6 +109,7 @@ const gl_Shifts_for_bar = new Float32Array([ const lineWidth = 0.004 * 3800 / screenWidthPixel; // 不能写为 0.0045 这样会因为插值造成不同线段的宽度不一致的问题 const widthShift = 0.002; + const gl_WidthShifts = new Float32Array([ 0, widthShift, // 0 - widthShift, widthShift, // 1 @@ -121,6 +122,23 @@ const gl_WidthShifts = new Float32Array([ ]); +// TODO: 之前的波形的竖向线条的宽度在缩放式有时会变窄。一直不一致，不知道是为什么， +// 我认为是glsl内部精度损失的问题，稍微把横向的宽度拉大后，可以大幅度改善 +// 如果未来有时间，搞清楚这里是怎么回事。复现方法：把 wsMdFactor 修改为 1 +const wsMdFactorX = 1.2; +const wsMdFactorY = 1.3; +const ladderAnalog_GL_WidthShifts = new Float32Array([ + 0, widthShift * wsMdFactorY, // 0 + - widthShift * wsMdFactorX, widthShift * wsMdFactorY, // 1 + - widthShift * wsMdFactorX, 0, // 2 + - widthShift * wsMdFactorX, - widthShift * wsMdFactorY, // 3 + 0, - widthShift * wsMdFactorY, // 4 + widthShift * wsMdFactorX, - widthShift * wsMdFactorY, // 5 + widthShift * wsMdFactorX, 0, // 6 + widthShift * wsMdFactorX, widthShift * wsMdFactorY // 7 +]); + + function prettyPrint(array) { const stack = []; for (const num of array) { @@ -148,5 +166,6 @@ export { gl_Shifts_for_bar, barShift, glslInputLength, - prettyPrint + prettyPrint, + ladderAnalog_GL_WidthShifts }; \ No newline at end of file diff --git a/src/hook/wave-view/render-wave.js b/src/hook/wave-view/render-wave.js index baf7e01..f1f3b72 100644 --- a/src/hook/wave-view/render-wave.js +++ b/src/hook/wave-view/render-wave.js @@ -1,6 +1,6 @@ import { globalSetting, globalStyle } from '../global'; -import { gl_Colors, gl_Shifts, gl_Shifts_for_bar, gl_WidthShifts, barShift, getRatio, screenHeightPixel, maskColorIndexOffset, posYFactor, glslInputLength, prettyPrint } from './render-utils.js'; +import { gl_Colors, gl_Shifts, gl_Shifts_for_bar, gl_WidthShifts, barShift, getRatio, screenHeightPixel, maskColorIndexOffset, posYFactor, glslInputLength, prettyPrint, ladderAnalog_GL_WidthShifts } from './render-utils.js'; import { vertexShader, fragmentShader } from './render-shader.js'; import { renderAsBit, renderAsCommonDigital, renderAsLadderAnalog, renderAsLineAnalog } from './toolbar/renderModal'; @@ -304,7 +304,6 @@ class WebGL2WaveRender { const webglLocation = this.webglLocation; const gl = webglLocation.gl; gl.uniform4fv(webglLocation.colors, gl_Colors); - gl.uniform2fv(webglLocation.widthShifts, gl_WidthShifts); gl.uniform2fv(webglLocation.shifts, gl_Shifts); gl.uniform1f(webglLocation.posYFactor, posYFactor); } @@ -411,8 +410,13 @@ class WebGL2WaveRender { const yDuty = cubicBezierAnimation(animationDelta, pstate.oldYDuty, pstate.yDuty); // 设置 glsl 变量 - const scaleX = 2 * xScale / canvasWidth; - const scaleY = yStep * yDuty / canvasHeight; + let scaleX = 2 * xScale / canvasWidth; + let scaleY = yStep * yDuty / canvasHeight; + // console.log(scaleX); + // // scaleX 保留6位有效数字 + // scaleX = parseInt(scaleX * 10000) / 10000; + // console.log(scaleX); + gl.uniform2f(webglLocation.scale, scaleX, scaleY); // 设置 webgl 和 canvas 大小位置一致 @@ -471,6 +475,8 @@ class WebGL2WaveRender { if (signal.size === 1) { // 如果是 bit + gl.uniform2fv(webglLocation.widthShifts, gl_WidthShifts); + gl.uniform2fv(webglLocation.shifts, gl_Shifts); gl.bindVertexArray(signalItem.lineVao); gl.drawArrays(gl.TRIANGLE_STRIP, 0, lineVertices.length / glslInputLength); @@ -481,7 +487,8 @@ class WebGL2WaveRender { // 如果是 vec，根据设定的渲染模式和进行设置 const vecRenderModal = _this.getVecRenderModal(globalLookup, signal.link); if (vecRenderModal === 0) { - // 普通数字渲染模式 + // 普通数字渲染模式、 + gl.uniform2fv(webglLocation.widthShifts, gl_WidthShifts); gl.uniform2fv(webglLocation.shifts, gl_Shifts_for_bar); gl.bindVertexArray(signalItem.lineVao); gl.drawArrays(gl.TRIANGLES, 0, lineVertices.length / glslInputLength); @@ -490,6 +497,7 @@ class WebGL2WaveRender { gl.drawArrays(gl.TRIANGLES, 0, maskVertices.length / glslInputLength); } else if (vecRenderModal === 1) { // 梯形渲染模式 + gl.uniform2fv(webglLocation.widthShifts, ladderAnalog_GL_WidthShifts); gl.uniform2fv(webglLocation.shifts, gl_Shifts_for_bar); gl.bindVertexArray(signalItem.lineVao); gl.drawArrays(gl.TRIANGLE_STRIP, 0, lineVertices.length / glslInputLength); @@ -498,6 +506,7 @@ class WebGL2WaveRender { gl.drawArrays(gl.TRIANGLES, 0, maskVertices.length / glslInputLength); } else { // 折线渲染模式 + gl.uniform2fv(webglLocation.widthShifts, gl_WidthShifts); gl.uniform2fv(webglLocation.shifts, gl_Shifts_for_bar); gl.bindVertexArray(signalItem.lineVao); gl.drawArrays(gl.TRIANGLES, 0, lineVertices.length / glslInputLength); diff --git a/src/hook/wave-view/toolbar/renderModal.js b/src/hook/wave-view/toolbar/renderModal.js index a934df8..83de366 100644 --- a/src/hook/wave-view/toolbar/renderModal.js +++ b/src/hook/wave-view/toolbar/renderModal.js @@ -530,10 +530,6 @@ export function renderAsLadderAnalog(lookup, link, wave, time) { const wsIndex = makeWidthShiftIndexByPoints(p0, p1, p2); - if (wsIndex === undefined) { - console.log(p0, p1, p2); - } - lineVertices.push( // uvec2 pos; uvec3 control; p1.x, p1.y * posYFactor, 0, wsIndex, p1.color, @@ -606,5 +602,5 @@ export function renderAsLineAnalog(lookup, link, wave, time) { const lineVertices = []; const maskVertices = []; - + } \ No newline at end of file