@woosh/meep-engine 2.165.7 → 2.167.0

package/src/engine/graphics/composit/CompositLayer.js

@@ -1,255 +1,258 @@
-import {
-    AddEquation,
-    CustomBlending,
-    Mesh,
-    OneFactor,
-    OneMinusSrcAlphaFactor,
-    RedFormat,
-    RGBAFormat,
-    ShaderMaterial
-} from "three";
-import { assert } from "../../../core/assert.js";
-import Signal from "../../../core/events/signal/Signal.js";
-import Vector2 from "../../../core/geom/Vector2.js";
-import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
-import { ScreenSpaceQuadShader } from "../shaders/ScreenSpaceQuadShader.js";
-import { BlendingType } from "../texture/sampler/BlendingType.js";
-import { blendingType2three } from "../texture/sampler/blendingType2Three.js";
-
-/**
- *
- * @param {Material} material
- * @param {BlendingType} blending
- */
-function assignMaterialBlending(material, blending) {
-
-    if (blending === BlendingType.MultiplyAdd) {
-        material.blending = CustomBlending;
-        material.blendEquation = AddEquation;
-        material.blendSrc = OneFactor;
-        material.blendDst = OneMinusSrcAlphaFactor;
-    } else {
-        const threeBlending = blendingType2three(blending);
-
-        material.blending = threeBlending;
-    }
-
-}
-
-export class CompositLayer {
-    /**
-     *
-     * @param {THREE.WebGLRenderTarget} renderTarget
-     * @param {BlendingType} blending
-     * @param {number} renderTargetScale
-     */
-    constructor({
-                    renderTarget,
-                    blending,
-                    renderTargetScale = 1
-                }) {
-        /**
-         * Human-readable name, useful for debugging
-         * @type {string}
-         */
-        this.name = "";
-
-        /**
-         *
-         * @type {BlendingType}
-         */
-        this.__blending = blending;
-        /**
-         *
-         * @type {WebGLRenderTarget}
-         */
-        this.renderTarget = renderTarget;
-
-        /**
-         *
-         * @type {number}
-         */
-        this.renderTargetScale = renderTargetScale;
-
-        this.object = new Mesh(FULL_SCREEN_TRIANGLE_GEOMETRY, this.buildMaterial());
-
-        /**
-         * Which compositing stage this layer belongs to, stages are rendered independently
-         * @type {number}
-         */
-        this.stage = 0;
-
-        this.size = new Vector2();
-
-        /**
-         *
-         * @type {boolean}
-         */
-        this.__enabled = true;
-
-        /**
-         * Layers are composited in order from lowest to highest
-         * @type {number}
-         */
-        this.__order = 0;
-
-        this.on = {
-            preRender: new Signal()
-        };
-    }
-
-    get blending() {
-        return this.__blending;
-    }
-
-    set blending(v) {
-        if (v === this.__blending) {
-            return;
-        }
-
-        this.__blending = v;
-
-        assignMaterialBlending(this.object.material, v);
-    }
-
-    /**
-     *
-     * @param {number} v
-     */
-    set order(v) {
-        this.__order = v;
-
-        this.object.renderOrder = v;
-    }
-
-    /**
-     *
-     * @return {number}
-     */
-    get order() {
-        return this.__order;
-    }
-
-    /**
-     *
-     * @param {number} v
-     */
-    set enabled(v) {
-        if (!this.__enabled && v) {
-            this.enable();
-        } else if (this.__enabled && !v) {
-            this.disable();
-        }
-    }
-
-    /**
-     *
-     * @returns {boolean}
-     */
-    get enabled() {
-        return this.__enabled;
-    }
-
-    enable() {
-        if (!this.__enabled) {
-            this.__enabled = true;
-            this.object.visible = true;
-        }
-    }
-
-    disable() {
-        if (this.__enabled) {
-            this.__enabled = false;
-            this.object.visible = false;
-        }
-    }
-
-    /**
-     *
-     * @param {number} x
-     * @param {number} y
-     */
-    setSize(x, y) {
-        this.size.set(x, y);
-        this.updateRenderTargetSize();
-    }
-
-    updateRenderTargetSize() {
-
-        if (this.renderTarget !== null) {
-            const scale = this.renderTargetScale;
-
-            const size = this.size;
-
-            // clamp to 1: a 0-sized attachment trips GL_INVALID_FRAMEBUFFER_OPERATION on clear/draw
-            const width = Math.max(1, size.x * scale);
-            const height = Math.max(1, size.y * scale);
-
-            this.renderTarget.setSize(width, height);
-        }
-    }
-
-    /**
-     *
-     * @param {number} scale
-     */
-    setRenderTargetScale(scale) {
-        assert.isNumber(scale, 'v');
-        assert.isFinite(scale, 'v');
-
-        this.renderTargetScale = scale;
-
-        this.updateRenderTargetSize();
-    }
-
-    /**
-     * Override screen-space material of the layer. This allows you to render directly into the output buffer, bypassing the need to create an intermediate buffer
-     * NOTE: Please make sure you know what you're doing if you use this method
-     * @param {Material} material
-     */
-    setCustomMaterial(material) {
-        assignMaterialBlending(material, this.blending);
-
-        // override material
-        this.object.material = material;
-    }
-
-
-    buildMaterial() {
-
-
-        const uniforms = {
-            tTexture: {
-                type: 't',
-                value: this.renderTarget.texture
-            }
-        };
-
-        // determine swizzle for the material
-        let swizzle;
-        const texture_format = this.renderTarget.texture.format;
-        if (texture_format === RedFormat) {
-            swizzle = ['r', 'r', 'r', 1];
-        } else if (texture_format === RGBAFormat) {
-            swizzle = ['r', 'g', 'b', 'a'];
-        } else {
-            throw new Error('Unsupported format');
-        }
-
-        const material = new ShaderMaterial({
-            uniforms,
-            vertexShader: ScreenSpaceQuadShader.vertexShader(),
-            fragmentShader: ScreenSpaceQuadShader.fragmentShader(swizzle),
-            lights: false,
-            fog: false,
-            depthTest: false,
-            depthWrite: false,
-            transparent: true,
-            vertexColors: false
-        });
-
-        assignMaterialBlending(material, this.blending);
-
-        return material;
-    }
-}
+import {
+    AddEquation,
+    CustomBlending,
+    Mesh,
+    OneFactor,
+    OneMinusSrcAlphaFactor,
+    RedFormat,
+    RGBAFormat,
+    ShaderMaterial
+} from "three";
+import { assert } from "../../../core/assert.js";
+import Signal from "../../../core/events/signal/Signal.js";
+import Vector2 from "../../../core/geom/Vector2.js";
+import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
+import { ScreenSpaceQuadShader } from "../shaders/ScreenSpaceQuadShader.js";
+import { BlendingType } from "../texture/sampler/BlendingType.js";
+import { blendingType2three } from "../texture/sampler/blendingType2Three.js";
+
+/**
+ *
+ * @param {Material} material
+ * @param {BlendingType} blending
+ */
+function assignMaterialBlending(material, blending) {
+
+    if (blending === BlendingType.MultiplyAdd) {
+        material.blending = CustomBlending;
+        material.blendEquation = AddEquation;
+        material.blendSrc = OneFactor;
+        material.blendDst = OneMinusSrcAlphaFactor;
+    } else {
+        const threeBlending = blendingType2three(blending);
+
+        material.blending = threeBlending;
+    }
+
+}
+
+export class CompositLayer {
+    /**
+     *
+     * @param {THREE.WebGLRenderTarget} renderTarget
+     * @param {BlendingType} blending
+     * @param {number} renderTargetScale
+     */
+    constructor({
+                    renderTarget,
+                    blending,
+                    renderTargetScale = 1
+                }) {
+        /**
+         * Human-readable name, useful for debugging
+         * @type {string}
+         */
+        this.name = "";
+
+        /**
+         *
+         * @type {BlendingType}
+         */
+        this.__blending = blending;
+        /**
+         *
+         * @type {WebGLRenderTarget}
+         */
+        this.renderTarget = renderTarget;
+
+        /**
+         *
+         * @type {number}
+         */
+        this.renderTargetScale = renderTargetScale;
+
+        this.object = new Mesh(FULL_SCREEN_TRIANGLE_GEOMETRY, this.buildMaterial());
+
+        /**
+         * Which compositing stage this layer belongs to, stages are rendered independently
+         * @type {number}
+         */
+        this.stage = 0;
+
+        this.size = new Vector2();
+
+        /**
+         *
+         * @type {boolean}
+         */
+        this.__enabled = true;
+
+        /**
+         * Layers are composited in order from lowest to highest
+         * @type {number}
+         */
+        this.__order = 0;
+
+        this.on = {
+            preRender: new Signal()
+        };
+    }
+
+    get blending() {
+        return this.__blending;
+    }
+
+    set blending(v) {
+        if (v === this.__blending) {
+            return;
+        }
+
+        this.__blending = v;
+
+        assignMaterialBlending(this.object.material, v);
+    }
+
+    /**
+     *
+     * @param {number} v
+     */
+    set order(v) {
+        this.__order = v;
+
+        this.object.renderOrder = v;
+    }
+
+    /**
+     *
+     * @return {number}
+     */
+    get order() {
+        return this.__order;
+    }
+
+    /**
+     *
+     * @param {number} v
+     */
+    set enabled(v) {
+        if (!this.__enabled && v) {
+            this.enable();
+        } else if (this.__enabled && !v) {
+            this.disable();
+        }
+    }
+
+    /**
+     *
+     * @returns {boolean}
+     */
+    get enabled() {
+        return this.__enabled;
+    }
+
+    enable() {
+        if (!this.__enabled) {
+            this.__enabled = true;
+            this.object.visible = true;
+        }
+    }
+
+    disable() {
+        if (this.__enabled) {
+            this.__enabled = false;
+            this.object.visible = false;
+        }
+    }
+
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    setSize(x, y) {
+        this.size.set(x, y);
+        this.updateRenderTargetSize();
+    }
+
+    updateRenderTargetSize() {
+
+        if (this.renderTarget !== null) {
+            const scale = this.renderTargetScale;
+
+            const size = this.size;
+
+            // a render target is a whole number of texels; WebGL truncates fractional dimensions when
+            // it allocates, so round here too, otherwise `renderTarget.width` reports a size the
+            // texture does not have and any texel math built from it is off by up to a texel
+            // clamp to 1: a 0-sized attachment trips GL_INVALID_FRAMEBUFFER_OPERATION on clear/draw
+            const width = Math.max(1, Math.floor(size.x * scale));
+            const height = Math.max(1, Math.floor(size.y * scale));
+
+            this.renderTarget.setSize(width, height);
+        }
+    }
+
+    /**
+     *
+     * @param {number} scale
+     */
+    setRenderTargetScale(scale) {
+        assert.isNumber(scale, 'v');
+        assert.isFinite(scale, 'v');
+
+        this.renderTargetScale = scale;
+
+        this.updateRenderTargetSize();
+    }
+
+    /**
+     * Override screen-space material of the layer. This allows you to render directly into the output buffer, bypassing the need to create an intermediate buffer
+     * NOTE: Please make sure you know what you're doing if you use this method
+     * @param {Material} material
+     */
+    setCustomMaterial(material) {
+        assignMaterialBlending(material, this.blending);
+
+        // override material
+        this.object.material = material;
+    }
+
+
+    buildMaterial() {
+
+
+        const uniforms = {
+            tTexture: {
+                type: 't',
+                value: this.renderTarget.texture
+            }
+        };
+
+        // determine swizzle for the material
+        let swizzle;
+        const texture_format = this.renderTarget.texture.format;
+        if (texture_format === RedFormat) {
+            swizzle = ['r', 'r', 'r', 1];
+        } else if (texture_format === RGBAFormat) {
+            swizzle = ['r', 'g', 'b', 'a'];
+        } else {
+            throw new Error('Unsupported format');
+        }
+
+        const material = new ShaderMaterial({
+            uniforms,
+            vertexShader: ScreenSpaceQuadShader.vertexShader(),
+            fragmentShader: ScreenSpaceQuadShader.fragmentShader(swizzle),
+            lights: false,
+            fog: false,
+            depthTest: false,
+            depthWrite: false,
+            transparent: true,
+            vertexColors: false
+        });
+
+        assignMaterialBlending(material, this.blending);
+
+        return material;
+    }
+}

package/src/engine/graphics/composit/LayerCompositer.d.ts

@@ -58,6 +58,18 @@ declare class LayerCompositer {
      * @returns {number}
      */
     getPixelRatio(): number;
+    /**
+     * Size a single layer to the current output resolution, in device pixels.
+     *
+     * Every layer resolution goes through here -- on add as well as on resize -- so a layer created
+     * after the compositer has already been sized (plugins create their layers during startup, long
+     * after the first {@link LayerCompositer#setSize}) lands on exactly the same grid as the layers
+     * already registered, rather than on the unscaled size.
+     *
+     * @param {CompositLayer} layer
+     * @private
+     */
+    private __apply_resolution;
     __updateResolution(): void;
     /**
      *

package/src/engine/graphics/composit/LayerCompositer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayerCompositer.d.ts","sourceRoot":"","sources":["../../../../../src/engine/graphics/composit/LayerCompositer.js"],"names":[],"mappings":";AAaA;IAEQ;;;OAGG;IACH,cAFU,aAAa,EAAE,CAEH;IAGtB,2BAAwD;IACxD,aAAwB;IAExB,cAA6B;IAE7B;;;OAGG;IACH,qBAAqB;IAGzB;;;;OAIG;IACH,cAHW,aAAa,GACX,OAAO,CAgBnB;IAED;;;;;OAKG;IACH,mCAHW,YAAY,GACX,aAAa,CAmCxB;IAED;;;;OAIG;IACH,gBAHW,aAAa,GACX,OAAO,CAanB;IAED;;OAEG;IACH,mBAFa,OAAO,CAenB;IAED;;;;OAIG;IACH,kCAqBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,aAAa,SACnB,MAAM,QAgBhB;IAED;;;OAGG;IACH,qBAFW,MAAM,QAahB;IAED;;;OAGG;IACH,iBAFa,MAAM,CAIlB;IAED,2BAgBC;IAED;;;;OAIG;IACH,WAHW,MAAM,KACN,MAAM,QAMhB;CACJ;8BA/N6B,oBAAoB;mCAJ3C,OAAO;sBAAP,OAAO;oBAEM,+BAA+B;6BACtB,oCAAoC"}
+{"version":3,"file":"LayerCompositer.d.ts","sourceRoot":"","sources":["../../../../../src/engine/graphics/composit/LayerCompositer.js"],"names":[],"mappings":";AAaA;IAEQ;;;OAGG;IACH,cAFU,aAAa,EAAE,CAEH;IAGtB,2BAAwD;IACxD,aAAwB;IAExB,cAA6B;IAE7B;;;OAGG;IACH,qBAAqB;IAGzB;;;;OAIG;IACH,cAHW,aAAa,GACX,OAAO,CAgBnB;IAED;;;;;OAKG;IACH,mCAHW,YAAY,GACX,aAAa,CAmCxB;IAED;;;;OAIG;IACH,gBAHW,aAAa,GACX,OAAO,CAanB;IAED;;OAEG;IACH,mBAFa,OAAO,CAenB;IAED;;;;OAIG;IACH,kCAqBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,aAAa,SACnB,MAAM,QAgBhB;IAED;;;OAGG;IACH,qBAFW,MAAM,QAahB;IAED;;;OAGG;IACH,iBAFa,MAAM,CAIlB;IAED;;;;;;;;;;OAUG;IACH,2BAIC;IAED,2BAQC;IAED;;;;OAIG;IACH,WAHW,MAAM,KACN,MAAM,QAMhB;CACJ;8BAxO6B,oBAAoB;mCAJ3C,OAAO;sBAAP,OAAO;oBAEM,+BAA+B;6BACtB,oCAAoC"}

package/src/engine/graphics/composit/LayerCompositer.js

@@ -105,7 +105,7 @@ class LayerCompositer {
             return false;
         }
 
-        layer.setSize(this.size.x, this.size.y);
+        this.__apply_resolution(layer);
 
         this.layerTargets.push(layer);
 
@@ -204,20 +204,29 @@ class LayerCompositer {
         return this.__pixelRatio;
     }
 
-    __updateResolution() {
-        const x = this.size.x;
-        const y = this.size.y;
+    /**
+     * Size a single layer to the current output resolution, in device pixels.
+     *
+     * Every layer resolution goes through here -- on add as well as on resize -- so a layer created
+     * after the compositer has already been sized (plugins create their layers during startup, long
+     * after the first {@link LayerCompositer#setSize}) lands on exactly the same grid as the layers
+     * already registered, rather than on the unscaled size.
+     *
+     * @param {CompositLayer} layer
+     * @private
+     */
+    __apply_resolution(layer) {
+        const pixelRatio = this.__pixelRatio;
 
-        const h = y * this.__pixelRatio;
-        const w = x * this.__pixelRatio;
+        layer.setSize(this.size.x * pixelRatio, this.size.y * pixelRatio);
+    }
 
+    __updateResolution() {
         const layerTargets = this.layerTargets;
 
         for (let i = 0; i < layerTargets.length; i++) {
 
-            const layerTarget = layerTargets[i];
-
-            layerTarget.setSize(w, h);
+            this.__apply_resolution(layerTargets[i]);
 
         }
     }
@@ -230,7 +239,7 @@ class LayerCompositer {
     setSize(x, y) {
         this.size.set(x, y);
 
-        this.__updateResolution(x, y);
+        this.__updateResolution();
     }
 }
 

package/src/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.d.ts

@@ -43,7 +43,7 @@ export class OutlineRenderPlugin extends EnginePlugin {
      * @param {number} y
      * @private
      */
-    private __set_viewport_size;
+    private __set_render_resolution;
     /**
      *
      * @private

package/src/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlineRenderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../../src/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.js"],"names":[],"mappings":"AAYA;IAMQ,4BAAuC;IAEvC,oBAA+B;IAE/B;;;;OAIG;IACH,4BAA+B;IAE/B;;;;OAIG;IACH,iCAA0D;IAE1D;;;;OAIG;IACH,kBAAmB;IAEnB;;;;OAIG;IACH,uBASC;IAGL;;;;OAIG;IACH,iDAFa,OAAO,CAMnB;IAED;;;;OAIG;IACH,oDAFa,OAAO,CAYnB;IAED;;;;;OAKG;IACH,4BAMC;IAED;;;OAGG;IACH,iBAgCC;IAED,yBAwBC;IAED,0BAWC;IAED,uCAaC;CACJ;6BA5L4B,oCAAoC;gCAKjC,gCAAgC;oCAV5B,OAAO"}
+{"version":3,"file":"OutlineRenderPlugin.d.ts","sourceRoot":"","sources":["../../../../../../../src/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.js"],"names":[],"mappings":"AAYA;IAMQ,4BAAuC;IAEvC,oBAA+B;IAE/B;;;;OAIG;IACH,4BAA+B;IAE/B;;;;OAIG;IACH,iCAA0D;IAE1D;;;;OAIG;IACH,kBAAmB;IAEnB;;;;OAIG;IACH,uBASC;IAGL;;;;OAIG;IACH,iDAFa,OAAO,CAMnB;IAED;;;;OAIG;IACH,oDAFa,OAAO,CAYnB;IAED;;;;;OAKG;IACH,gCAMC;IAED;;;OAGG;IACH,iBAgCC;IAED,yBA0BC;IAED,0BAeC;IAED,uCAaC;CACJ;6BAlM4B,oCAAoC;gCAKjC,gCAAgC;oCAV5B,OAAO"}

package/src/engine/graphics/ecs/highlight/plugin/OutlineRenderPlugin.js

@@ -92,7 +92,7 @@ export class OutlineRenderPlugin extends EnginePlugin {
      * @param {number} y
      * @private
      */
-    __set_viewport_size(x, y) {
+    __set_render_resolution(x, y) {
         // clamp to 1: 0 cascades to several render targets whose clear() then trips GL_INVALID_FRAMEBUFFER_OPERATION
         const width = max2(1, x);
         const height = max2(1, y);
@@ -146,9 +146,11 @@ export class OutlineRenderPlugin extends EnginePlugin {
         }
 
         const graphics = this.engine.graphics;
-        const viewport_size = graphics.viewport.size;
 
-        viewport_size.process(this.__set_viewport_size, this);
+        // device pixels, not CSS pixels: the final target is handed to the compositer below, which
+        // sizes every layer in device pixels. Two owners on one render target have to agree, or each
+        // resize hands it back and forth between the two resolutions
+        graphics.output_resolution.process(this.__set_render_resolution, this);
 
         // create compositing layer
         this.__compositing_layer = graphics.layerComposer.createLayer(this.__renderer.__renderTargetFinal, BlendingType.MultiplyAdd);
@@ -170,10 +172,14 @@ export class OutlineRenderPlugin extends EnginePlugin {
 
         graphics.on.preRender.remove(this.__render, this);
 
-        graphics.viewport.size.onChanged.remove(this.__set_viewport_size, this);
+        graphics.output_resolution.onChanged.remove(this.__set_render_resolution, this);
 
+        // this also disposes `__renderTargetFinal`, which the layer was created from
         graphics.layerComposer.remove(this.__compositing_layer);
 
+        // release memory
+        this.__renderer.dispose();
+
         await super.shutdown();
     }
 

package/src/engine/graphics/ecs/highlight/renderer/OutlineRenderer.d.ts

@@ -122,6 +122,12 @@ export class OutlineRenderer {
      */
     render(group: HighlightRenderGroup): void;
     clearRenderTarget(): void;
+    /**
+     * Release every GPU resource owned by this renderer. The objects themselves stay usable: three.js
+     * re-uploads a disposed texture/target/program on next use, so the renderer can be resized and
+     * rendered again afterwards.
+     */
+    dispose(): void;
 }
 import { Scene } from "three";
 import { OrthographicCamera } from "three";