image-shader - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/src/index.d.ts

 export declare class ShaderImage {
+    private readonly source;
     private readonly canvas;
     private readonly gl;
-    private readonly shader;
-    private readonly texture;
+    private readonly fragment;
+    private shader?;
+    private texture?;
     constructor(source: HTMLImageElement | HTMLCanvasElement, shader: string);
+    readonly domElement: HTMLCanvasElement;
+    readonly width: number;
+    readonly height: number;
     update(): void;
+    dispose(): void;
+    private render();
+    private setup(source);
+    private isComplete(source);
 }

dist/src/index.js

@@ -16,19 +16,73 @@ "use strict";
     void main() {
-        uv = position.xy;
+        uv = vec2( 0.0, 1.0 ) + vec2( 0.5, -0.5 ) * ( position + 1.0 );
         gl_Position = vec4( position.xy, 0.0, 1.0 );
     }
 `;
+const FRAGMENT_PREPENDIX = `
+    precision highp float;
+
+    uniform sampler2D image;
+    varying vec2 uv;
+
+    vec4 getImagePixel() {
+        return texture2D( image, uv );
+    }
+`;
 class ShaderImage {
     constructor(source, shader) {
+        this.source = source;
         this.canvas = document.createElement("canvas");
         this.gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
-        this.shader = gl_shader_1.default(this.gl, VERTEX_SHADER, shader);
-        this.texture = gl_texture2d_1.default(this.gl, source);
+        this.fragment = `${FRAGMENT_PREPENDIX}\n${shader}`;
+        if (source instanceof HTMLImageElement && !this.isComplete(source)) {
+            source.onload = () => {
+                this.setup(source);
+            };
+        }
+        else {
+            this.setup(source);
+        }
     }
+    get domElement() {
+        return this.canvas;
+    }
+    get width() {
+        return this.canvas.width;
+    }
+    get height() {
+        return this.canvas.height;
+    }
     update() {
+        // @types/gl-texture2d is missing the setPixels method
+        // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/25840
+        // tslint:disable-next-line:no-any
+        this.texture.setPixels(this.source);
+        this.render();
+    }
+    dispose() {
+        if (this.shader)
+            this.shader.dispose();
+        if (this.texture)
+            this.texture.dispose();
+    }
+    render() {
+        if (!this.shader)
+            return;
         this.shader.bind();
-        this.shader.uniforms.texture = this.texture;
+        this.shader.uniforms.image = this.texture;
         a_big_triangle_1.default(this.gl);
     }
+    setup(source) {
+        this.canvas.width = source.width;
+        this.canvas.height = source.height;
+        this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+        this.texture = gl_texture2d_1.default(this.gl, source);
+        this.shader = gl_shader_1.default(this.gl, VERTEX_SHADER, this.fragment);
+        this.shader.attributes.position.location = 0;
+        this.render();
+    }
+    isComplete(source) {
+        return source.complete && source.naturalHeight !== 0 && source.naturalHeight !== 0;
+    }
 }
 exports.ShaderImage = ShaderImage;

package.json

 {
   "name": "image-shader",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Run WebGL shaders on an image or canvas.",
@@ -5,0 +5,0 @@ "main": "dist/src/index.js",

No alert changes

Improved metrics

Total package byte prevSize

7885

increased by29.99%

Lines of code

137

increased by80.26%

No dependency changes