setSource default dims and shouldupdate (#52)

* Added shouldUpdate and getting default dimensions from source * 0.12.0
wix-incubator · Dec 4, 2024 · 592da32 · 592da32
1 parent 28b0bb4
commit 592da32
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+### 0.12.0 (2024-12-04)
+
+_New:_
+
+-   Added `shouldUpdate` flag to `kamposSource` to force/depress source resampling.
+-   Calling `kampos#setSource()` without dimensions will attempt to read dimensions from `HTMLImageElement` or `HTMLVideoElement`.
+
 ### 0.11.7 (2024-12-02)
 
 _Fixed:_

diff --git a/demo/water.html b/demo/water.html
@@ -39,6 +39,8 @@
         const width = window.innerWidth;
         const height = window.innerHeight;
 
+        source.src = `https://picsum.photos/id/606/${width}/${height}`;
+
         const ready = new Promise((resolve) => {
             const done = () => {
                 // width = source.naturalWidth;
@@ -52,8 +54,6 @@
             source.onload = done;
         });
 
-        source.src = `https://picsum.photos/id/606/${width}/${height}`;
-
         await ready;
 
         const SCALE = 15 / width;

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -2681,18 +2681,23 @@ function resize(gl, dimensions) {
  * @param {planeConfig} plane
  * @param {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} media
  * @param {kamposSceneData} data
- * @param {{width: number, height: number}} dimensions
  */
-function draw(gl, plane = {}, media, data, dimensions) {
-    const { program, source, attributes, uniforms, textures, extensions, vao } =
-        data;
+function draw(gl, plane = {}, media, data) {
+    const {
+        program,
+        source,
+        attributes,
+        uniforms,
+        textures,
+        extensions,
+        vao
+    } = data;
     const { xSegments = 1, ySegments = 1 } = plane;
 
-    if (media && source && source.texture) {
-        // bind the source texture
-        gl.bindTexture(gl.TEXTURE_2D, source.texture);
+    if (media && source && source.texture && (source.shouldUpdate || !source._sampled)) {
+        source._sampled = true;
 
-        // read source data into texture
+        gl.bindTexture(gl.TEXTURE_2D, source.texture);
         gl.texImage2D(
             gl.TEXTURE_2D,
             0,
@@ -2703,17 +2708,14 @@ function draw(gl, plane = {}, media, data, dimensions) {
         );
     }
 
-    // Tell it to use our program (pair of shaders)
     gl.useProgram(program);
 
     if (vao) {
         extensions.vao.bindVertexArrayOES(vao);
     } else {
-        // set attribute buffers with data
         _enableVertexAttributes(gl, attributes);
     }
 
-    // set uniforms with data
     _setUniforms(gl, uniforms);
 
     let startTex = gl.TEXTURE0;
@@ -2744,7 +2746,6 @@ function draw(gl, plane = {}, media, data, dimensions) {
         }
     }
 
-    // Draw the rectangles
     gl.drawArrays(gl.TRIANGLES, 0, 6 * xSegments * ySegments);
 }
 
@@ -3448,17 +3449,33 @@ class Kampos {
             if (!success) return;
         }
 
-        let media, width, height;
+        let media, width, height, shouldUpdate;
 
         if (Object.prototype.toString.call(source) === '[object Object]') {
-            ({ media, width, height } = source);
+            ({ media, width, height, shouldUpdate } = source);
         } else {
             media = source;
         }
 
+        const isVideo = typeof media === 'HTMLVideoElement';
+        const isCanvas = typeof media === 'HTMLCanvasElement';
+
         if (width && height) {
             this.dimensions = { width, height };
         }
+        else if (isVideo) {
+            this.dimensions = { width: media.videoWidth, height: media.videoHeight };
+        }
+        else if (media.naturalWidth) {
+            this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
+        }
+
+        if (typeof shouldUpdate === 'boolean') {
+            this.data.source.shouldUpdate = shouldUpdate;
+        }
+        else {
+            this.data.source.shouldUpdate = isVideo || isCanvas;
+        }
 
         // resize the target canvas if needed
         resize(this.gl, this.dimensions);
@@ -3468,6 +3485,8 @@ class Kampos {
         }
 
         this.media = media;
+
+        this.data.source._sampled = false;
     }
 
     /**
@@ -3486,7 +3505,7 @@ class Kampos {
 
         if (cb && cb(time) === false) return;
 
-        draw(this.gl, this.plane, this.media, this.data, this.dimensions);
+        draw(this.gl, this.plane, this.media, this.data);
 
         if (this.config.afterDraw) {
             this.config.afterDraw(time);
@@ -3670,6 +3689,7 @@ class Kampos {
  * @property {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} media
  * @property {number} width
  * @property {number} height
+ * @property {boolean} [shouldUpdate] whether to resample the source on each draw call
  */
 
 /**

diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset='utf-8'>
-  <title>kampos 0.11.6 | Documentation</title>
+  <title>kampos 0.11.7 | Documentation</title>
   <meta name='description' content='Tiny and fast effects compositor on WebGL'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
   <link href='assets/bass.css' rel='stylesheet'>
@@ -15,7 +15,7 @@
       <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
         <div class='py1 px2'>
           <h3 class='mb0 no-anchor'>kampos</h3>
-          <div class='mb1'><code>0.11.6</code></div>
+          <div class='mb1'><code>0.11.7</code></div>
           <input
             placeholder='Filter'
             id='filter-input'
@@ -1679,6 +1679,13 @@ <h3 class='fl m0' id='kampossource'>
 
         </div>
 
+        <div class='space-bottom0'>
+          <span class='code bold'>shouldUpdate</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>?)</code>
+          : whether to resample the source on each draw call
+
+
+        </div>
+
     </div>
 
 

diff --git a/index.umd.js b/index.umd.js
@@ -2685,18 +2685,23 @@ void main() {
      * @param {planeConfig} plane
      * @param {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} media
      * @param {kamposSceneData} data
-     * @param {{width: number, height: number}} dimensions
      */
-    function draw(gl, plane = {}, media, data, dimensions) {
-        const { program, source, attributes, uniforms, textures, extensions, vao } =
-            data;
+    function draw(gl, plane = {}, media, data) {
+        const {
+            program,
+            source,
+            attributes,
+            uniforms,
+            textures,
+            extensions,
+            vao
+        } = data;
         const { xSegments = 1, ySegments = 1 } = plane;
 
-        if (media && source && source.texture) {
-            // bind the source texture
-            gl.bindTexture(gl.TEXTURE_2D, source.texture);
+        if (media && source && source.texture && (source.shouldUpdate || !source._sampled)) {
+            source._sampled = true;
 
-            // read source data into texture
+            gl.bindTexture(gl.TEXTURE_2D, source.texture);
             gl.texImage2D(
                 gl.TEXTURE_2D,
                 0,
@@ -2707,17 +2712,14 @@ void main() {
             );
         }
 
-        // Tell it to use our program (pair of shaders)
         gl.useProgram(program);
 
         if (vao) {
             extensions.vao.bindVertexArrayOES(vao);
         } else {
-            // set attribute buffers with data
             _enableVertexAttributes(gl, attributes);
         }
 
-        // set uniforms with data
         _setUniforms(gl, uniforms);
 
         let startTex = gl.TEXTURE0;
@@ -2748,7 +2750,6 @@ void main() {
             }
         }
 
-        // Draw the rectangles
         gl.drawArrays(gl.TRIANGLES, 0, 6 * xSegments * ySegments);
     }
 
@@ -3452,17 +3453,33 @@ void main() {
                 if (!success) return;
             }
 
-            let media, width, height;
+            let media, width, height, shouldUpdate;
 
             if (Object.prototype.toString.call(source) === '[object Object]') {
-                ({ media, width, height } = source);
+                ({ media, width, height, shouldUpdate } = source);
             } else {
                 media = source;
             }
 
+            const isVideo = typeof media === 'HTMLVideoElement';
+            const isCanvas = typeof media === 'HTMLCanvasElement';
+
             if (width && height) {
                 this.dimensions = { width, height };
             }
+            else if (isVideo) {
+                this.dimensions = { width: media.videoWidth, height: media.videoHeight };
+            }
+            else if (media.naturalWidth) {
+                this.dimensions = { width: media.naturalWidth, height: media.naturalHeight };
+            }
+
+            if (typeof shouldUpdate === 'boolean') {
+                this.data.source.shouldUpdate = shouldUpdate;
+            }
+            else {
+                this.data.source.shouldUpdate = isVideo || isCanvas;
+            }
 
             // resize the target canvas if needed
             resize(this.gl, this.dimensions);
@@ -3472,6 +3489,8 @@ void main() {
             }
 
             this.media = media;
+
+            this.data.source._sampled = false;
         }
 
         /**
@@ -3490,7 +3509,7 @@ void main() {
 
             if (cb && cb(time) === false) return;
 
-            draw(this.gl, this.plane, this.media, this.data, this.dimensions);
+            draw(this.gl, this.plane, this.media, this.data);
 
             if (this.config.afterDraw) {
                 this.config.afterDraw(time);
@@ -3674,6 +3693,7 @@ void main() {
      * @property {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} media
      * @property {number} width
      * @property {number} height
+     * @property {boolean} [shouldUpdate] whether to resample the source on each draw call
      */
 
     /**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kampos",
-    "version": "0.11.7",
+    "version": "0.12.0",
     "description": "Tiny and fast effects compositor on WebGL",
     "registry": "https://registry.npmjs.org/",
     "main": "dist/index.cjs",

diff --git a/src/core.js b/src/core.js
@@ -198,18 +198,23 @@ export function resize(gl, dimensions) {
  * @param {planeConfig} plane
  * @param {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} media
  * @param {kamposSceneData} data
- * @param {{width: number, height: number}} dimensions
  */
-export function draw(gl, plane = {}, media, data, dimensions) {
-    const { program, source, attributes, uniforms, textures, extensions, vao } =
-        data;
+export function draw(gl, plane = {}, media, data) {
+    const {
+        program,
+        source,
+        attributes,
+        uniforms,
+        textures,
+        extensions,
+        vao
+    } = data;
     const { xSegments = 1, ySegments = 1 } = plane;
 
-    if (media && source && source.texture) {
-        // bind the source texture
-        gl.bindTexture(gl.TEXTURE_2D, source.texture);
+    if (media && source && source.texture && (source.shouldUpdate || !source._sampled)) {
+        source._sampled = true;
 
-        // read source data into texture
+        gl.bindTexture(gl.TEXTURE_2D, source.texture);
         gl.texImage2D(
             gl.TEXTURE_2D,
             0,
@@ -220,17 +225,14 @@ export function draw(gl, plane = {}, media, data, dimensions) {
         );
     }
 
-    // Tell it to use our program (pair of shaders)
     gl.useProgram(program);
 
     if (vao) {
         extensions.vao.bindVertexArrayOES(vao);
     } else {
-        // set attribute buffers with data
         _enableVertexAttributes(gl, attributes);
     }
 
-    // set uniforms with data
     _setUniforms(gl, uniforms);
 
     let startTex = gl.TEXTURE0;
@@ -261,7 +263,6 @@ export function draw(gl, plane = {}, media, data, dimensions) {
         }
     }
 
-    // Draw the rectangles
     gl.drawArrays(gl.TRIANGLES, 0, 6 * xSegments * ySegments);
 }