From 136f9bc961164802c3cf9df9f6fdae88547b9c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcel=20Sch=C3=B6ckel?= Date: Sat, 4 Feb 2023 16:43:12 +0100 Subject: [PATCH 1/3] Naive thickness by duplicating lines with slight offset --- Apps/frontend/src/OscilloscopeWebGl.ts | 32 +++++++++++++++++++++++++- Apps/frontend/src/const.js | 4 ++-- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/Apps/frontend/src/OscilloscopeWebGl.ts b/Apps/frontend/src/OscilloscopeWebGl.ts index 220c0fb..7501be6 100644 --- a/Apps/frontend/src/OscilloscopeWebGl.ts +++ b/Apps/frontend/src/OscilloscopeWebGl.ts @@ -5,11 +5,16 @@ import { import { headFragmentShader, headVertexShader } from "./shader/headShader"; import { createShaderProgram } from "./shader/shaderHelper"; import { get } from "svelte/store"; -import { LINE_COLORS_WEBGL } from "./const"; +import { + LINE_COLORS_WEBGL, + LINE_THICKNESS_DELTA, + LINE_THICKNESS_DUPLICATES, +} from "./const"; import { amplitudeAdjustment, offsetAdjustment, channelActivated, + thicknessAdjustment, } from "./stores"; export class OscilloscopeWebGl { private channelProgram: WebGLProgram; @@ -100,6 +105,31 @@ export class OscilloscopeWebGl { this.webgl.uniform1f(amplitudeUniform, channelAmplitude); this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); + + // draw twice to make thicker lines + if (get(thicknessAdjustment)[i]) { + for (let j = -LINE_THICKNESS_DUPLICATES; j < 0; j++) { + offsetUniform = this.webgl.getUniformLocation( + this.channelProgram, + "u_offset" + ); + channelOffset = get(offsetAdjustment)[i] + j * LINE_THICKNESS_DELTA; + this.webgl.uniform1f(offsetUniform, channelOffset); + + this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); + } + + for (let j = 1; j <= LINE_THICKNESS_DUPLICATES; j++) { + offsetUniform = this.webgl.getUniformLocation( + this.channelProgram, + "u_offset" + ); + channelOffset = get(offsetAdjustment)[i] + j * LINE_THICKNESS_DELTA; + this.webgl.uniform1f(offsetUniform, channelOffset); + + this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); + } + } } } diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js index a4c923d..564c29e 100644 --- a/Apps/frontend/src/const.js +++ b/Apps/frontend/src/const.js @@ -27,8 +27,8 @@ export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString); export const LINE_COLORS_WEBGL = LINE_COLORS.map((color) => color.map((num) => num / 255).concat([1]) ); -export const LINE_THICKNESS_SMALL = 0.002; -export const LINE_THICKNESS_BIG = 0.008; +export const LINE_THICKNESS_DELTA = 0.002; +export const LINE_THICKNESS_DUPLICATES = 4; export const NUM_CHANNELS = 10; export const MIN_SWEEP = 0.1; // <= 1 export const MAX_SWEEP = 2.0; // >= 1 From a240dd81638cb9509201e2b5e0fc5f2da495dbb0 Mon Sep 17 00:00:00 2001 From: Philipp Kramer Date: Sun, 5 Feb 2023 23:33:05 +0100 Subject: [PATCH 2/3] Introduced third line for thickness + moved computation of offset into webgl + small code cleanup Signed-off-by: Philipp Kramer --- Apps/frontend/src/OscilloscopeWebGl.ts | 49 +++++++++++++---------- Apps/frontend/src/app.scss | 1 - Apps/frontend/src/components/Waves.svelte | 18 +++------ Apps/frontend/src/const.js | 2 - Apps/frontend/src/helper.js | 5 ++- Apps/frontend/src/shader/channelShader.js | 11 ++++- 6 files changed, 45 insertions(+), 41 deletions(-) diff --git a/Apps/frontend/src/OscilloscopeWebGl.ts b/Apps/frontend/src/OscilloscopeWebGl.ts index 7501be6..d0da201 100644 --- a/Apps/frontend/src/OscilloscopeWebGl.ts +++ b/Apps/frontend/src/OscilloscopeWebGl.ts @@ -82,6 +82,7 @@ export class OscilloscopeWebGl { ); this.webgl.enableVertexAttribArray(sampleAttribute); + // Colour let colors = new Float32Array(LINE_COLORS_WEBGL[i]); let colorUniform = this.webgl.getUniformLocation( this.channelProgram, @@ -90,6 +91,7 @@ export class OscilloscopeWebGl { this.webgl.uniform4fv(colorUniform, colors); + // Offset let offsetUniform = this.webgl.getUniformLocation( this.channelProgram, "u_offset" @@ -97,6 +99,7 @@ export class OscilloscopeWebGl { let channelOffset = get(offsetAdjustment)[i]; this.webgl.uniform1f(offsetUniform, channelOffset); + // Amplitude let amplitudeUniform = this.webgl.getUniformLocation( this.channelProgram, "u_amplitude" @@ -106,29 +109,31 @@ export class OscilloscopeWebGl { this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); - // draw twice to make thicker lines + // draw twice to make thicker lines -> Thickness if (get(thicknessAdjustment)[i]) { - for (let j = -LINE_THICKNESS_DUPLICATES; j < 0; j++) { - offsetUniform = this.webgl.getUniformLocation( - this.channelProgram, - "u_offset" - ); - channelOffset = get(offsetAdjustment)[i] + j * LINE_THICKNESS_DELTA; - this.webgl.uniform1f(offsetUniform, channelOffset); - - this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); - } - - for (let j = 1; j <= LINE_THICKNESS_DUPLICATES; j++) { - offsetUniform = this.webgl.getUniformLocation( - this.channelProgram, - "u_offset" - ); - channelOffset = get(offsetAdjustment)[i] + j * LINE_THICKNESS_DELTA; - this.webgl.uniform1f(offsetUniform, channelOffset); - - this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); - } + // First line + let thicknessUniform = this.webgl.getUniformLocation( + this.channelProgram, + "u_thick_line_id" + ); + this.webgl.uniform1i(thicknessUniform, 1); + this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); + + // Second line + thicknessUniform = this.webgl.getUniformLocation( + this.channelProgram, + "u_thick_line_id" + ); + this.webgl.uniform1i(thicknessUniform, 2); + this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); + + // Third line -> "original" line + thicknessUniform = this.webgl.getUniformLocation( + this.channelProgram, + "u_thick_line_id" + ); + this.webgl.uniform1i(thicknessUniform, 0); + this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); } } } diff --git a/Apps/frontend/src/app.scss b/Apps/frontend/src/app.scss index 07d860e..08f782f 100644 --- a/Apps/frontend/src/app.scss +++ b/Apps/frontend/src/app.scss @@ -224,7 +224,6 @@ nav { &--waves { position: absolute; - margin-top: 0.1vw; margin-left: 0.1vw; inset: 0; } diff --git a/Apps/frontend/src/components/Waves.svelte b/Apps/frontend/src/components/Waves.svelte index 3b12fdb..ef56168 100644 --- a/Apps/frontend/src/components/Waves.svelte +++ b/Apps/frontend/src/components/Waves.svelte @@ -8,16 +8,12 @@ } from "../const"; import { channelActivated, - thicknessAdjustment, timeSweep, } from "../stores"; import { OscilloscopeWebGl } from "../OscilloscopeWebGl" import { computeDisplayDeltaFromTimeSweep } from "../helper"; - - export let scalesY; - let canvasElement; let oscilloscopeWebGl; /** @@ -81,10 +77,6 @@ } }; - thicknessAdjustment.subscribe((isThick) => { - // thick lines not implemented - }); - const update = () => { oscilloscopeWebGl.drawChannels(channelSamples); oscilloscopeWebGl.drawHeads(xLast, channelSamples); @@ -99,11 +91,11 @@ let webgl = canvasElement.getContext("webgl2"); if (webgl === null) { - alert( - "Unable to initialize WebGL. Your browser or machine may not support it." - ); - return; - } + alert( + "Unable to initialize WebGL. Your browser or machine may not support it." + ); + return; + } oscilloscopeWebGl = new OscilloscopeWebGl(webgl); }; diff --git a/Apps/frontend/src/const.js b/Apps/frontend/src/const.js index 564c29e..4b90cee 100644 --- a/Apps/frontend/src/const.js +++ b/Apps/frontend/src/const.js @@ -27,8 +27,6 @@ export const LINE_COLORS_RGBA = LINE_COLORS.map(rgbArrayToRGBAString); export const LINE_COLORS_WEBGL = LINE_COLORS.map((color) => color.map((num) => num / 255).concat([1]) ); -export const LINE_THICKNESS_DELTA = 0.002; -export const LINE_THICKNESS_DUPLICATES = 4; export const NUM_CHANNELS = 10; export const MIN_SWEEP = 0.1; // <= 1 export const MAX_SWEEP = 2.0; // >= 1 diff --git a/Apps/frontend/src/helper.js b/Apps/frontend/src/helper.js index 40a6199..9f6eebf 100644 --- a/Apps/frontend/src/helper.js +++ b/Apps/frontend/src/helper.js @@ -1,5 +1,6 @@ import { - TEXT_INDICATORS_DECIMAL_PLACES, DEFAULT_STEP_SIZE, + TEXT_INDICATORS_DECIMAL_PLACES, + DEFAULT_STEP_SIZE, MIN_SWEEP, MAX_SWEEP, } from "./const"; @@ -107,4 +108,4 @@ export function computeDisplayDeltaFromTimeSweep(sliderValue) { DEFAULT_STEP_SIZE * (1.0 + timeSweep * (timeSweep >= 0.0 ? MAX_SWEEP - 1.0 : 1.0 - MIN_SWEEP)); return delta; -} \ No newline at end of file +} diff --git a/Apps/frontend/src/shader/channelShader.js b/Apps/frontend/src/shader/channelShader.js index dd532cd..261bc5b 100644 --- a/Apps/frontend/src/shader/channelShader.js +++ b/Apps/frontend/src/shader/channelShader.js @@ -17,9 +17,11 @@ export const channelVertexShader = `#version 300 es #define X_TO_NDC ${2.0 / CANVAS_WIDTH} #define CANVAS_WIDTH ${CANVAS_WIDTH} #define SCALE_Y ${(NUM_INTERVALS_HORIZONTAL / 2).toFixed(1)} + #define THICKNESS_OFFSET 0.002 uniform vec4 u_colour; uniform float u_offset; uniform float u_amplitude; + uniform int u_thick_line_id; in float aSample; out vec4 v_colour; @@ -32,7 +34,14 @@ export const channelVertexShader = `#version 300 es float y = (aSample * u_amplitude + (SCALE_Y * u_offset)); float xNDC = x_to_ndc(x); float yNDC = y * VOLTS_TO_NDC; - gl_Position = vec4(xNDC, yNDC, 0, 1); + float thicknessOffset = 0.0; + if (u_thick_line_id == 1) { + thicknessOffset = -THICKNESS_OFFSET; + } + if (u_thick_line_id == 2) { + thicknessOffset = THICKNESS_OFFSET; + } + gl_Position = vec4(xNDC + thicknessOffset, yNDC + thicknessOffset, 0, 1); v_colour = u_colour; } `; From 0c3861d531416dfa42966a3a8537eb973def19d5 Mon Sep 17 00:00:00 2001 From: Philipp Kramer Date: Sun, 5 Feb 2023 23:36:57 +0100 Subject: [PATCH 3/3] Adjusted comment Signed-off-by: Philipp Kramer --- Apps/frontend/src/OscilloscopeWebGl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Apps/frontend/src/OscilloscopeWebGl.ts b/Apps/frontend/src/OscilloscopeWebGl.ts index d0da201..40cc8ea 100644 --- a/Apps/frontend/src/OscilloscopeWebGl.ts +++ b/Apps/frontend/src/OscilloscopeWebGl.ts @@ -109,7 +109,7 @@ export class OscilloscopeWebGl { this.webgl.drawArrays(this.webgl.LINE_STRIP, 0, samples.length); - // draw twice to make thicker lines -> Thickness + // draw three lines to make thicker line -> Thickness if (get(thicknessAdjustment)[i]) { // First line let thicknessUniform = this.webgl.getUniformLocation(