Preview stops rendering when new image is dropped, added preview AA

jobtalle · May 30, 2023 · 91f9cec · 91f9cec
1 parent 00aa914
commit 91f9cec
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/js/gl/shaderPreview.js b/js/gl/shaderPreview.js
@@ -5,6 +5,7 @@ export class ShaderPreview extends Shader {
     // language=GLSL
     static #SHADER_FRAMGENT = `
         uniform float radius;
+        uniform float radiusPixels;
         uniform vec2 center;
         uniform float aspect;
         uniform float zoom;
@@ -20,21 +21,19 @@ export class ShaderPreview extends Shader {
             vec2 uv = vec2(vUv.x, 1. - vUv.y);
             vec2 delta = vec2(uv.x, uv.y / aspect) - center;
             
-            if (dot(delta, delta) > radius * radius)
-                discard;
-            
             vec4 pixel = texture(source, center + (uv - center) / zoom);
             
             color = vec4(
                 mix(
                     vec3(0.),
                     pixel.rgb,
                     clamp((pixel.a - .5) / max(fwidth(pixel.a) * .5, epsilon), 0., 1.)),
-                1.);
+                1. - clamp((length(delta) - radius) * radiusPixels, 0., 1.));
         }
         `;
 
     #uniformRadius;
+    #uniformRadiusPixels;
     #uniformCenter;
     #uniformAspect;
     #uniformZoom;
@@ -45,6 +44,7 @@ export class ShaderPreview extends Shader {
         this.use();
 
         this.#uniformRadius = this.uniformLocation("radius");
+        this.#uniformRadiusPixels = this.uniformLocation("radiusPixels");
         this.#uniformCenter = this.uniformLocation("center");
         this.#uniformAspect = this.uniformLocation("aspect");
         this.#uniformZoom = this.uniformLocation("zoom")
@@ -54,6 +54,10 @@ export class ShaderPreview extends Shader {
         gl.uniform1f(this.#uniformRadius, radius);
     }
 
+    setRadiusPixels(radiusPixels) {
+        gl.uniform1f(this.#uniformRadiusPixels, radiusPixels);
+    }
+
     setCenter(x, y) {
         gl.uniform2f(this.#uniformCenter, x, y);
     }

diff --git a/js/sdfMaker.js b/js/sdfMaker.js
@@ -151,22 +151,25 @@ export class SDFMaker {
 
         this.#shaderPreview.use();
         this.#shaderPreview.setRadius(SDFMaker.#PREVIEW_RADIUS / SDFMaker.#SIZE);
+        this.#shaderPreview.setRadiusPixels(SDFMaker.#SIZE);
 
         window.addEventListener("mousemove", event => {
-            const wasVisible = this.#previewVisible;
-            const previewRect = previewCanvas.getBoundingClientRect();
+            if (this.#outputImage) {
+                const wasVisible = this.#previewVisible;
+                const previewRect = previewCanvas.getBoundingClientRect();
 
-            this.#previewX = event.clientX - previewRect.left;
-            this.#previewY = event.clientY - previewRect.top;
+                this.#previewX = event.clientX - previewRect.left;
+                this.#previewY = event.clientY - previewRect.top;
 
-            this.#previewVisible =
-                this.#previewX > -SDFMaker.#PREVIEW_RADIUS &&
-                this.#previewY > -SDFMaker.#PREVIEW_RADIUS &&
-                this.#previewX < SDFMaker.#SIZE + SDFMaker.#PREVIEW_RADIUS &&
-                this.#previewY < SDFMaker.#SIZE + SDFMaker.#PREVIEW_RADIUS;
+                this.#previewVisible =
+                    this.#previewX > -SDFMaker.#PREVIEW_RADIUS &&
+                    this.#previewY > -SDFMaker.#PREVIEW_RADIUS &&
+                    this.#previewX < SDFMaker.#SIZE + SDFMaker.#PREVIEW_RADIUS &&
+                    this.#previewY < SDFMaker.#SIZE + SDFMaker.#PREVIEW_RADIUS;
 
-            if (this.#previewVisible || this.#previewVisible !== wasVisible)
-                this.#updated = true;
+                if (this.#previewVisible || this.#previewVisible !== wasVisible)
+                    this.#updated = true;
+            }
         });
 
         inputTarget.addEventListener("mousedown", () => {
@@ -222,6 +225,15 @@ export class SDFMaker {
         gl.bindTexture(gl.TEXTURE_2D, this.#input);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.#inputTarget);
 
+        if (this.#outputImage) {
+            this.#outputContainer.removeChild(this.#outputImage);
+
+            URL.revokeObjectURL(this.#outputImage.src);
+
+            this.#outputImage = null;
+            this.#updated = true;
+        }
+
         this.#loaded = true;
     }
 
@@ -288,19 +300,11 @@ export class SDFMaker {
             this.#radius,
             this.#threshold);
 
-        const outputImagePrevious = this.#outputImage;
-
         this.#outputContainer.appendChild(this.#outputImage = this.#makeOutputImage(
             this.#outputWidth,
             this.#outputHeight,
             this.#composite.pixels));
 
-        if (outputImagePrevious) {
-            this.#outputContainer.removeChild(outputImagePrevious);
-
-            URL.revokeObjectURL(outputImagePrevious.src);
-        }
-
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
         this.#updated = true;
@@ -317,7 +321,7 @@ export class SDFMaker {
     }
 
     #render() {
-        if (this.#updated && this.#outputImage) {
+        if (this.#updated) {
             gl.clear(gl.COLOR_BUFFER_BIT);
 
             if (this.#previewVisible) {