From ae27c95b3dae6e12a80dd2a12522a254ff7d1177 Mon Sep 17 00:00:00 2001
From: Gyuri Horak <dyuri@horak.hu>
Date: Sat, 25 Feb 2023 19:56:04 +0100
Subject: [PATCH] texture updating

---
 demo/index.html     | 14 +++++++++++-
 src/repa-shader.js  | 56 +++++++++++++++++++++++++++++++++++++++++++--
 src/repa-texture.js | 14 ++++++++----
 3 files changed, 76 insertions(+), 8 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index b437eaf..06d8980 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -24,10 +24,22 @@
 </head>
 <body>
   <repa-shader id="demoshader" fs-input="fsinput" alpha mouse snippets="noise.glsl" width=512 height=512>
-    <repa-texture src="avatar.png"></repa-texture>
+    <repa-texture src="avatar.png" name="tex_avatar"></repa-texture>
     <repa-texture src="futas.mp4"></repa-texture>
     <!-- repa-texture src="webcam"></repa-texture -->
     <!-- repa-texture ref="demoshader"></repa-texture -->
+<script type="x-shader/x-fragment">
+void main() {
+  vec2 uv = gl_FragCoord.xy / resolution.xy;
+  vec3 col = .5 + .5 * cos(uv.xyx + time + vec3(0, 2, 4));
+  col *= texture(tex_avatar, 1.-uv).rgb;
+
+  float dist = distance(uv, mouse.xy);
+  float circle = smoothstep(.1, .2, dist) * .5 + .5;
+  vec4 acolor = vec4(col * circle, circle);
+  outColor = vec4(acolor);
+}
+</script>
 <script type="x-shader/x-fragmen[DELETE]t">
 // https://twigl.app/?ol=true&ss=-NOAlYulOVLklxMdxBDx
 void main() {
diff --git a/src/repa-shader.js b/src/repa-shader.js
index cff5736..f90c90f 100644
--- a/src/repa-shader.js
+++ b/src/repa-shader.js
@@ -243,9 +243,33 @@ class RepaShader extends HTMLElement {
     this._resetBuffer(this.frontbuffer);
   }
 
+  _collectTextures() {
+    this._textures = [];
+
+    this.querySelectorAll('repa-texture').forEach(t => {
+      const texture = this._gl.createTexture();
+      this._gl.bindTexture(this._gl.TEXTURE_2D, texture);
+
+      // TODO get params from attributes
+      this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_S, this._gl.CLAMP_TO_EDGE);
+      this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_WRAP_T, this._gl.CLAMP_TO_EDGE);
+      this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MIN_FILTER, this._gl.LINEAR);
+      this._gl.texParameteri(this._gl.TEXTURE_2D, this._gl.TEXTURE_MAG_FILTER, this._gl.LINEAR);
+
+      // fill texture with default black
+      this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, 1, 1, 0, this._gl.RGBA, this._gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));
+
+      this._textures.push({
+        texture,
+        texElement: t,
+      });
+    });
+  }
+
   async reset(time) {
     this._resizeTarget();
     this._resetBuffers();
+    this._collectTextures();
     this.frontbuffer = this._createBuffer(this._target.width, this._target.height);
     this.backbuffer = this._createBuffer(this._target.width, this._target.height);
 
@@ -298,6 +322,12 @@ class RepaShader extends HTMLElement {
       this._uniLocation[`backbuffer${i}`] = this._gl.getUniformLocation(this.program, `backbuffer${i}`);
     }
 
+    // textures
+    this._textures.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
+    });
+
     this._attLocation = this._gl.getAttribLocation(this.program, 'position');
     this._mousePosition= [0, 0, 0];
     this._startTime = Date.now();
@@ -336,6 +366,20 @@ class RepaShader extends HTMLElement {
     this._gl.uniform1f(this._uniLocation.time, this._nowTime * .001);
     this._gl.uniform1f(this._uniLocation.frame, this._frame);
 
+    // textures
+    this._textures.forEach((t, i) => {
+      this._gl.activeTexture(this._gl.TEXTURE0 + i + this.mrt);
+      this._gl.bindTexture(this._gl.TEXTURE_2D, t.texture);
+
+      // update if needed
+      if (t.texElement.shouldUpdate) {
+        this._gl.texImage2D(this._gl.TEXTURE_2D, 0, this._gl.RGBA, this._gl.RGBA, this._gl.UNSIGNED_BYTE, t.texElement.update());
+      }
+
+      this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt);
+      // TODO dimension
+    });
+
     this._gl.drawArrays(this._gl.TRIANGLE_STRIP, 0, 4);
 
     // fill buffer
@@ -487,6 +531,14 @@ void main() {
     return targets.join('');
   }
 
+  _getTextures() {
+    return this._textures.map(t => {
+      return `
+  uniform sampler2D ${t.texElement.name};
+  `;
+    }).join('');
+  }
+
   async getVS() {
     let source = '';
 
@@ -541,14 +593,14 @@ void main() {
         break;
       case 'geeker':
         snippets = await this._getSnippets();
-        start = CHUNKS.es300 + CHUNKS.geeker + this._getRenderTargets() + snippets;
+        start = CHUNKS.es300 + CHUNKS.geeker + this._getRenderTargets() + this._getTextures() + snippets;
         break;
       case 'geekest':
         snippets = await this._getSnippets();
         if (!snippets) {
           snippets = await this.getSnippet('noise.glsl');
         }
-        start = CHUNKS.es300 + CHUNKS.geeker + this._getRenderTargets() + snippets + CHUNKS.geekestStart;
+        start = CHUNKS.es300 + CHUNKS.geeker + this._getRenderTargets() + this._getTextures() + snippets + CHUNKS.geekestStart;
         end = CHUNKS.geekestEnd;
         break;
     }
diff --git a/src/repa-texture.js b/src/repa-texture.js
index 70b77d2..cbc2d13 100644
--- a/src/repa-texture.js
+++ b/src/repa-texture.js
@@ -39,7 +39,7 @@ class RepaTexture extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['src', 'type', 'name', 'mag-filter', 'min-filter', 'wrap-s', 'wrap-t'];
+    return ['src', 'type', 'mag-filter', 'min-filter', 'wrap-s', 'wrap-t'];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
@@ -124,11 +124,10 @@ class RepaTexture extends HTMLElement {
 
   _hideInDOM(el) {
     const hiddenEl = document.createElement('div');
-    hiddenEl.setAttribute('hidden', '');
     hiddenEl.style.width = hiddenEl.style.height = '1px';
+    hiddenEl.style.top = hiddenEl.style.left = '1px';
     hiddenEl.style.overflow = 'hidden';
-    hiddenEl.style.position = 'absolute';
-    hiddenEl.style.top = hiddenEl.style.left = '-100px';
+    hiddenEl.style.position = 'fixed';
     hiddenEl.style.zIndex = '-100';
     hiddenEl.style.opacity = '0';
     hiddenEl.style.pointerEvents = 'none';
@@ -238,8 +237,13 @@ class RepaTexture extends HTMLElement {
     return null;
   }
 
+  update() {
+    this._forceUpdate = false;
+    return this.content;
+  }
+
   get shouldUpdate() {
-    return this._forceUpdate || (this.ref && this.ref instanceof HTMLVideoElement && this.ref.readyState === this.ref.HAVE_ENOUGH_DATA);
+    return this.ready && (this._forceUpdate || (this.ref && this.ref instanceof HTMLVideoElement && this.ref.readyState === this.ref.HAVE_ENOUGH_DATA));
   }
 
   get width() {
