From 0d5187a310beb63fab01d3b89646c68ebbdc70b5 Mon Sep 17 00:00:00 2001 From: Gyuri Horak Date: Wed, 5 Apr 2023 14:01:47 +0200 Subject: [PATCH] texture content setting refactor, 3d shader example --- TODO.md | 2 ++ demo/3dt.fs | 44 ++++++++++++++++++++++++++++++++ demo/{index.html => simple.html} | 0 index.html | 19 ++++++++++++++ src/repa-shader.js | 1 - src/repa-texture.js | 19 +++++++------- 6 files changed, 75 insertions(+), 10 deletions(-) create mode 100644 demo/3dt.fs rename demo/{index.html => simple.html} (100%) create mode 100644 index.html diff --git a/TODO.md b/TODO.md index ca8ceb1..43df663 100644 --- a/TODO.md +++ b/TODO.md @@ -4,3 +4,5 @@ - format - inner format - data from external script + +- jsdoc diff --git a/demo/3dt.fs b/demo/3dt.fs new file mode 100644 index 0000000..846e76e --- /dev/null +++ b/demo/3dt.fs @@ -0,0 +1,44 @@ +#define STEPSIZE .1 +#define DENSCALE .1 + +void main() { + // Compute the pixel's position in view space. + vec2 fragCoord = gl_FragCoord.xy / resolution.xy; + vec3 viewPos = vec3((fragCoord * 2.0 - 1.0), 0.5); + viewPos.y *= -1.0; // Flip Y axis to match WebGL convention. + + vec3 camPos = vec3(.5 + m.x * .5, .5 + m.y * .5, -.25); + vec3 camDir = vec3(1., 1., 1.); + + // Convert the pixel's position to world space. + vec3 worldPos = camPos + viewPos * length(camDir); + + // Compute the ray direction in world space. + vec3 rayDir = normalize(worldPos - camPos); + + // Initialize the color and transparency values. + vec4 color = vec4(0.0); + float alpha = 0.0; + + // Perform the ray-marching loop. + for (float t = 0.0; t < 2.0; t += STEPSIZE) { + // Compute the position along the ray. + vec3 pos = camPos + rayDir * t; + + // Sample the density at the current position. + float density = texture(test3d, pos).x * DENSCALE; + + // Accumulate the color and transparency values. + vec4 sampleColor = vec4(1.0, 0.5, 0.2, 1.0); + color += (1.0 - alpha) * sampleColor * density; + alpha += (1.0 - alpha) * density; + + // Stop marching if the transparency reaches 1.0. + if (alpha >= 1.0) { + break; + } + } + + // Output the final color and transparency. + o = vec4(color.rgb, alpha); +} diff --git a/demo/index.html b/demo/simple.html similarity index 100% rename from demo/index.html rename to demo/simple.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..df5abde --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + <repa-shader> demo + + +

repa-shader demos

+ + + diff --git a/src/repa-shader.js b/src/repa-shader.js index 0e58208..e584e41 100644 --- a/src/repa-shader.js +++ b/src/repa-shader.js @@ -383,7 +383,6 @@ class RepaShader extends HTMLElement { const msg = this._gl.getProgramInfoLog(program); this.logger.error("Program link error: ", msg); // TODO error callback - program = null; return; } diff --git a/src/repa-texture.js b/src/repa-texture.js index 68ff306..b716750 100644 --- a/src/repa-texture.js +++ b/src/repa-texture.js @@ -85,7 +85,7 @@ class RepaTexture extends HTMLElement { this.ready = true; this._forceUpdate = true; } else if (this.textContent) { - this.content = JSON.parse(this.textContent); + this.simpleContent(JSON.parse(this.textContent)); } else if (this.t3d) { // TODO 3d texture experiment let size = 32; this._width = size; @@ -241,23 +241,24 @@ class RepaTexture extends HTMLElement { return !this.t3d && this.type !== 'raw'; } - setContent(data) { + simpleContent(data) { + this._format = 'luminance'; this._width = data[0].length; this._height = data.length; - this._content = new Uint8Array(this._width * this._height); + const content = new Uint8Array(this._width * this._height); data.forEach((row, y) => { - this._content.set(row, y * this._width); + content.set(row, y * this._width); }); + + this.content = content; } set content(data) { this.ready = true; - this._type = 'raw'; - this._format = 'luminance'; this._forceUpdate = true; - this.setContent(data); + this._content = data; } get content() { @@ -306,9 +307,9 @@ class RepaTexture extends HTMLElement { analyser.getByteFrequencyData(this._freqData); analyser.getByteTimeDomainData(this._timeData); - this.setContent([this._freqData, this._timeData]); + this.simpleContent([this._freqData, this._timeData]); } else { - this.setContent([[255, 128, 64, 32, 16, 8, 4, 2], [2, 4, 8, 16, 32, 64, 128, 255]]); + this.simpleContent([[255, 128, 64, 32, 16, 8, 4, 2], [2, 4, 8, 16, 32, 64, 128, 255]]); } return this._content;