From 8ae0907fda414b6586627a877477d3e7faa43df8 Mon Sep 17 00:00:00 2001 From: Gyuri Horak Date: Thu, 23 Mar 2023 12:53:03 +0100 Subject: [PATCH] 3d texture experiment - something works --- demo/3dt.html | 53 +++++++++++++++++++++++++++++++ src/repa-shader.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+) create mode 100644 demo/3dt.html diff --git a/demo/3dt.html b/demo/3dt.html new file mode 100644 index 0000000..c01e635 --- /dev/null +++ b/demo/3dt.html @@ -0,0 +1,53 @@ + + + + + <repa-shader> demo + + + + + + + +void main() { + vec2 uv = gl_FragCoord.xy / resolution.xy; + vec3 col = texture(tex_avatar, uv).rgb; + + col = texture(test3d, vec3(uv.xy, mouse.x)).rrr; + + float dist = distance(uv, mouse.xy); + float circle = smoothstep(.025, .026, dist) * .5 + .5; + vec4 acolor = vec4(col * circle, circle); + outColor = vec4(acolor); +} + +
+ +
+ + + + diff --git a/src/repa-shader.js b/src/repa-shader.js index 6c6244f..cf41e5d 100644 --- a/src/repa-shader.js +++ b/src/repa-shader.js @@ -16,6 +16,7 @@ const CHUNKS = { #define t time #define f frame precision highp float; +precision highp sampler3D; uniform vec2 resolution; uniform vec3 mouse; uniform vec3 orientation; @@ -280,6 +281,55 @@ class RepaShader extends HTMLElement { texElement: t, }); }); + + // TODO 3d texture experiment + let texture = this._gl.createTexture(); + this._gl.bindTexture(this._gl.TEXTURE_3D, texture); + this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MIN_FILTER, this._gl.NEAREST); + this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_MAG_FILTER, this._gl.NEAREST); + this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE); + this._gl.texParameteri(this._gl.TEXTURE_3D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE); + + this._gl.texImage3D( + this._gl.TEXTURE_3D, // target + 0, // level + this._gl.R8, // format - red8 (1byte) + 3, // width + 3, // height + 3, // depth + 0, // border + this._gl.RED, // format - red + this._gl.UNSIGNED_BYTE, // type - unsigned byte + new Uint8Array([ + 0, 0, 0, + 0, 127, 0, + 0, 0, 0, + + 0, 127, 0, + 127, 255, 127, + 0, 127, 0, + + 0, 0, 0, + 0, 127, 0, + 0, 0, 0, + + 127, 0, 127, + 0, 0, 0, + 127, 0, 127, + ]) // data + ); + + this._textures3d = []; + this._textures3d.push({ + texture, + texElement: { + name: 'test3d', + width: 3, + height: 3, + depth: 3, + }, + }); + // TODO end of 3d texture experiment } async reset(time) { @@ -351,6 +401,13 @@ class RepaShader extends HTMLElement { t.texElement.forceUpdate(); }); + // TODO 3d texture experiment + this._textures3d.forEach((t) => { + this._uniLocation[t.texElement.name] = this._gl.getUniformLocation(this.program, t.texElement.name); // texture + this._uniLocation[t.texElement.name+'_d'] = this._gl.getUniformLocation(this.program, t.texElement.name+'_d'); // dimensions + // TODO + }); + this._attLocation = this._gl.getAttribLocation(this.program, 'position'); this._mousePosition= [0, 0, 0]; this._orientation = [0, 0, 0]; @@ -408,6 +465,18 @@ class RepaShader extends HTMLElement { this._gl.uniform2fv(this._uniLocation[t.texElement.name+'_d'], [t.texElement.width || 1, t.texElement.height || 1]); }); + // TODO 3d texture experiment + this._textures3d.forEach((t, i) => { + this._gl.activeTexture(this._gl.TEXTURE0 + i + this.mrt + this._textures.length); + this._gl.bindTexture(this._gl.TEXTURE_3D, t.texture); + this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, 0); + + // TODO update, etc + + this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt + this._textures.length); + this._gl.uniform3fv(this._uniLocation[t.texElement.name+'_d'], [t.texElement.width || 1, t.texElement.height || 1, t.texElement.depth || 1]); + }); + this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4); // fill buffer @@ -522,6 +591,7 @@ void main() { } get postFS() { + // TODO 3d texture experiment return `#version 300 es precision mediump float; uniform sampler2D drawTexture; @@ -564,6 +634,13 @@ void main() { return ` uniform sampler2D ${t.texElement.name}; uniform vec2 ${t.texElement.name}_d; + `; + }).join('') + + // TODO 3d texture experiment + this._textures3d.map(t => { + return ` + uniform sampler3D ${t.texElement.name}; + uniform vec3 ${t.texElement.name}_d; `; }).join(''); }