generated texture example

demo/3dt.html

@@ -26,11 +26,13 @@
   <repa-shader id="demoshader" fs-input="fsinput" alpha mouse width=512 height=512>
     <repa-texture src="avatar.png" name="tex_avatar" wrap="mirrored_repeat"></repa-texture>
     <repa-texture t3d src="3dt.png" name="test3d" filter="linear" width=32 height=32 depth=32></repa-texture>
+    <repa-texture t3d name="generated" filter="linear" width=32 height=32 depth=32></repa-texture>
 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;
+  col *= texture(generated, vec3(uv.xy, mouse.y)).rgb;
 
   float dist = distance(uv, mouse.xy);
   float circle = smoothstep(.025, .026, dist) * .5 + .5;
@@ -49,6 +51,26 @@ updateButton.addEventListener('click', () => {
   const shader = document.querySelector('repa-shader');
   shader.render(fsinput.value);
 });
+
+setTimeout(() => {
+  // generate texture data
+  const generated3DT = document.querySelector('repa-texture[name="generated"]');
+  const size = 32;
+  const t3data = new Uint8Array(size * size * size * 4);
+  for (let i = 0; i < size; i++) {
+    for (let j = 0; j < size; j++) {
+      for (let k = 0; k < size; k++) {
+        let index = i * size * size + j * size + k;
+        t3data[index*4] = i * 4 % 255;
+        t3data[index*4+1] = j * 4 % 255;
+        t3data[index*4+2] = k * 4 % 255;
+        t3data[index*4+3] = 255;
+      }
+    }
+  }
+
+  generated3DT.content = t3data;
+}, 100);
 </script>
 </body>
 </html>

src/repa-shader.js

@@ -304,6 +304,10 @@ class RepaShader extends HTMLElement {
     return (format && this._gl[format.toUpperCase().replaceAll('-', '_')]) || this._gl.RGBA;
   }
 
+  _getType(type) {
+    return (type && this._gl[type.toUpperCase().replaceAll('-', '_')]) || this._gl.UNSIGNED_BYTE;
+  }
+
   _collectTextures() {
     this._textures = [];
     this._textures3d = [];
@@ -464,9 +468,12 @@ class RepaShader extends HTMLElement {
       // update if needed
       if (t.texElement.shouldUpdate) {
         const format = this._getFormat(t.texElement.format);
+        const internalFormat = this._getFormat(t.texElement.internalFormat);
+        const type = this._getType(t.texElement.dataType);
+
         this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, t.texElement.flipY);
 
-        this._gl.texImage2D(this._gl.TEXTURE_2D, 0, format, t.texElement.width, t.texElement.height, 0, format, this._gl.UNSIGNED_BYTE, t.texElement.update());
+        this._gl.texImage2D(this._gl.TEXTURE_2D, 0, internalFormat, t.texElement.width, t.texElement.height, 0, format, type, t.texElement.update());
       }
 
       this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt);
@@ -480,9 +487,12 @@ class RepaShader extends HTMLElement {
       // update if needed
       if (t.texElement.shouldUpdate) {
         const format = this._getFormat(t.texElement.format);
+        const internalFormat = this._getFormat(t.texElement.internalFormat);
+        const type = this._getType(t.texElement.dataType);
+
         this._gl.pixelStorei(this._gl.UNPACK_FLIP_Y_WEBGL, 0);
 
-        this._gl.texImage3D(this._gl.TEXTURE_3D, 0, format, t.texElement.width, t.texElement.height, t.texElement.depth, 0, format, this._gl.UNSIGNED_BYTE, t.texElement.update());
+        this._gl.texImage3D(this._gl.TEXTURE_3D, 0, internalFormat, t.texElement.width, t.texElement.height, t.texElement.depth, 0, format, type, t.texElement.update());
       }
 
       this._gl.uniform1i(this._uniLocation[t.texElement.name], i + this.mrt + this._textures.length);

src/repa-texture.js

@@ -86,29 +86,8 @@ class RepaTexture extends HTMLElement {
       this._forceUpdate = true;
     } else if (this.textContent) {
       this.simpleContent(JSON.parse(this.textContent));
-    } else if (this.t3d) { // TODO 3d texture experiment
-      let size = 32;
-      this._width = size;
-      this._height = size;
-      this._depth = size;
-
-      let t3data = new Uint8Array(size * size * size);
-
-      for (let i = 0; i < size; i++) {
-        for (let j = 0; j < size; j++) {
-          for (let k = 0; k < size; k++) {
-            let index = i * size * size + j * size + k;
-            t3data[index] = (i * j * k) % 255;
-          }
-        }
-      }
-
-      this._content = t3data;
-      this._forceUpdate = true;
-      this._format = 'luminance';
-      this.ready = true;
     } else {
-      this.logger.error('Texture content cannot be loaded!');
+      this.logger.warn('Texture content cannot be loaded!');
     }
   }
 
@@ -388,6 +367,14 @@ class RepaTexture extends HTMLElement {
     return this._format || this.getAttribute('format') || 'rgba';
   }
 
+  get internalFormat() {
+    return this._internalFormat || this.getAttribute('internal-format') || this.format;
+  }
+
+  get dataType() {
+    return this._dataType || this.getAttribute('data-type') || 'unsigned-byte';
+  }
+
   get name() {
     if (!this._name) {
       let name = this.getAttribute('name');