@woosh/meep-engine 2.96.0 → 2.98.0

package/src/engine/graphics/render/RendererPool.js

@@ -5,7 +5,7 @@ export class WebGLRendererPool {
 
     used = new Set();
 
-    get(options) {
+    get() {
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('webgl2', { antialias: true });
 
@@ -40,5 +40,47 @@ export class WebGLRendererPool {
         return true;
     }
 
+    /**
+     * After callback returns, renderer is released back into the pool
+     * @template T
+     * @param {function(renderer:WebGLRenderer):T} callback
+     * @param {*} [thisArg]
+     */
+    use(callback, thisArg) {
+
+        const renderer = this.get();
+
+        try {
+            const result = callback.call(thisArg, renderer);
+
+            if (result instanceof Promise) {
+                console.warn("callback returned a promise, if you need async behavior - use 'useAsync' method instead");
+            }
+
+            return result;
+
+        } finally {
+
+            this.release(renderer);
+        }
+
+    }
+
+    /**
+     * @template T
+     * @param {function(renderer:WebGLRenderer):Promise<T>} callback
+     * @param {*} [thisArg]
+     */
+    async useAsync(callback, thisArg) {
+
+        const renderer = this.get();
+
+        try {
+            await callback.call(thisArg, renderer);
+        } finally {
+            this.release(renderer);
+        }
+    }
+
     static global = new WebGLRendererPool();
 }

package/src/engine/graphics/render/forward_plus/LightManager.js

@@ -23,8 +23,8 @@ import {
     bvh_query_user_data_overlaps_frustum
 } from "../../../../core/bvh2/bvh3/query/bvh_query_user_data_overlaps_frustum.js";
 import { array_copy } from "../../../../core/collection/array/array_copy.js";
+import { array_swap_one } from "../../../../core/collection/array/array_swap_one.js";
 import { arrayQuickSort } from "../../../../core/collection/array/arrayQuickSort.js";
-import { arraySwapElements } from "../../../../core/collection/array/arraySwapElements.js";
 import { read_cluster_frustum_corners } from "../../../../core/geom/3d/frustum/read_cluster_frustum_corners.js";
 import { read_three_planes_to_array } from "../../../../core/geom/3d/frustum/read_three_planes_to_array.js";
 import { slice_frustum_linear_to_points } from "../../../../core/geom/3d/frustum/slice_frustum_linear_to_points.js";
@@ -706,7 +706,7 @@ export class LightManager {
     __build_view_frustum(camera) {
         frustum_from_camera(camera, this.__view_frustum, false);
 
-        arraySwapElements(this.__view_frustum.planes, 4, 5);
+        array_swap_one(this.__view_frustum.planes, 4, 5);
 
         this.__build_view_frustum_points();
     }

package/src/engine/graphics/sh3/path_tracer/PathTracer.d.ts

@@ -61,7 +61,7 @@ export class PathTracer {
     sample_texture(out: number[], texture: Texture, u: number, v: number): void;
     /**
      *
-     * @param {number[]} out
+     * @param {number[]} out [color_r, color_g, color_b, normal_x, normal_y, normal_z]
      * @param {number[]} hit
      */
     sample_material(out: number[], hit: number[]): void;
@@ -88,6 +88,7 @@ export class PathTracer {
      * @param {number} out_offset
      * @param {number[]} ray
      * @param {number} ray_address
+     * @returns {boolean}
      */
     sample_lights(out: number[], out_offset: number, ray: number[], ray_address: number): boolean;
     path_trace(out: any, ray: any, max_distance: any, max_bounce: any, random?: () => number): void;

package/src/engine/graphics/sh3/path_tracer/PathTracer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PathTracer.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/sh3/path_tracer/PathTracer.js"],"names":[],"mappings":";AAgEA;IAGQ;;;OAGG;IACH,eAFU,GAAG,CAEiB;IAE9B;;;OAGG;IACH,QAFU,IAAI,MAAM,EAAE,cAAc,CAAC,CAEd;IAEvB;;;OAGG;IACH,UAFU,eAAe,CAEP;IAElB;;;OAGG;IACH,WAFU,IAAI,MAAM,cAAc,EAAE,kBAAkB,CAAC,CAE7B;IAE1B;;;OAGG;IACH,UAFU,IAAI,MAAM,YAAY,CAEP;IAEzB;;;;OAIG;IACH,6BAA8C;IAGlD;;;;OAIG;IACH,uBAHW,MAAM,cAAc,GACnB,kBAAkB,CAgB7B;IAED,iBAGC;IAED,uBAoCC;IAED;;;OAGG;IACH,qCAEC;IAED;;;;;OAKG;IACH,aAJW,MAAM,cAAc,YACpB,MAAM,QAAQ,aACd,IAAI,GAAC,MAAM,EAAE,QA6CvB;IAED;;;;;;OAMG;IACH,oBALW,MAAM,EAAE,uBAER,MAAM,KACN,MAAM,QA+ChB;IAED;;;;OAIG;IACH,qBAHW,MAAM,EAAE,OACR,MAAM,EAAE,QAmFlB;IAED;;;;;;;OAOG;IACH,WANW,MAAM,EAAE,OACR,MAAM,EAAE,gBACR,MAAM,gBACN,MAAM,GACL,MAAM,CAyCjB;IAED;;;;;;OAMG;IACH,uBALW,MAAM,EAAE,cACR,MAAM,aACN,MAAM,EAAE,oBACR,MAAM,QAIhB;IAED;;;;;;OAMG;IACH,mBALW,MAAM,EAAE,cACR,MAAM,OACN,MAAM,EAAE,eACR,MAAM,WAgEhB;IAED,gGAyDC;CACJ;oBAriBmB,mCAAmC;+BAexB,qBAAqB;mCAHjB,yBAAyB;qBAtBjC,WAAW"}
+{"version":3,"file":"PathTracer.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/sh3/path_tracer/PathTracer.js"],"names":[],"mappings":";AA2DA;IAGQ;;;OAGG;IACH,eAFU,GAAG,CAEiB;IAE9B;;;OAGG;IACH,QAFU,IAAI,MAAM,EAAE,cAAc,CAAC,CAEd;IAEvB;;;OAGG;IACH,UAFU,eAAe,CAEP;IAElB;;;OAGG;IACH,WAFU,IAAI,MAAM,cAAc,EAAE,kBAAkB,CAAC,CAE7B;IAE1B;;;OAGG;IACH,UAFU,IAAI,MAAM,YAAY,CAEP;IAEzB;;;;OAIG;IACH,6BAA8C;IAGlD;;;;OAIG;IACH,uBAHW,MAAM,cAAc,GACnB,kBAAkB,CAgB7B;IAED,iBAGC;IAED,uBAoCC;IAED;;;OAGG;IACH,qCAEC;IAED;;;;;OAKG;IACH,aAJW,MAAM,cAAc,YACpB,MAAM,QAAQ,aACd,IAAI,GAAC,MAAM,EAAE,QA6CvB;IAED;;;;;;OAMG;IACH,oBALW,MAAM,EAAE,uBAER,MAAM,KACN,MAAM,QA+ChB;IAED;;;;OAIG;IACH,qBAHW,MAAM,EAAE,OACR,MAAM,EAAE,QAmFlB;IAED;;;;;;;OAOG;IACH,WANW,MAAM,EAAE,OACR,MAAM,EAAE,gBACR,MAAM,gBACN,MAAM,GACL,MAAM,CAwCjB;IAED;;;;;;OAMG;IACH,uBALW,MAAM,EAAE,cACR,MAAM,aACN,MAAM,EAAE,oBACR,MAAM,QAIhB;IAED;;;;;;;OAOG;IACH,mBANW,MAAM,EAAE,cACR,MAAM,OACN,MAAM,EAAE,eACR,MAAM,GACJ,OAAO,CAmEnB;IAED,gGAqDC;CACJ;oBA/hBmB,mCAAmC;+BAexB,qBAAqB;mCAHjB,yBAAyB;qBAtBjC,WAAW"}

package/src/engine/graphics/sh3/path_tracer/PathTracer.js

@@ -10,7 +10,7 @@ import {
 } from "three";
 import { BVH } from "../../../../core/bvh2/bvh3/BVH.js";
 import { ebvh_sort_for_traversal_depth_first } from "../../../../core/bvh2/bvh3/ebvh_sort_for_traversal_depth_first.js";
-import { bvh_query_leaves_ray } from "../../../../core/bvh2/bvh3/query/bvh_query_leaves_ray.js";
+import { bvh_query_user_data_ray } from "../../../../core/bvh2/bvh3/query/bvh_query_user_data_ray.js";
 import { array_copy } from "../../../../core/collection/array/array_copy.js";
 import { linear_to_sRGB } from "../../../../core/color/sRGB/linear_to_sRGB.js";
 import { aabb3_matrix4_project } from "../../../../core/geom/3d/aabb/aabb3_matrix4_project.js";
@@ -46,11 +46,6 @@ const color = [];
 
 const irradiance = [0, 0, 0];
 
-/**
- *
- * @type {number[]|vec3}
- */
-const throughputColor = [1, 1, 1];
 const trace_result = [];
 
 const _ray_0 = [];
@@ -282,7 +277,7 @@ export class PathTracer {
 
     /**
      *
-     * @param {number[]} out
+     * @param {number[]} out [color_r, color_g, color_b, normal_x, normal_y, normal_z]
      * @param {number[]} hit
      */
     sample_material(out, hit) {
@@ -379,10 +374,11 @@ export class PathTracer {
     trace(out, ray, min_distance, max_distance) {
         const bvh = this.bvh_top_level;
 
-        const hit_count = bvh_query_leaves_ray(
+        const hit_count = bvh_query_user_data_ray(
             bvh, bvh.root,
             temp_ray_results, 0,
-            ray[0], ray[1], ray[2], ray[3], ray[4], ray[5]
+            ray[0], ray[1], ray[2],
+            ray[3], ray[4], ray[5]
         );
 
         let nearest_hit_distance = max_distance;
@@ -390,9 +386,7 @@ export class PathTracer {
 
 
         for (let i = 0; i < hit_count; i++) {
-            const node_id = temp_ray_results[i];
-
-            const node_user_data = bvh.node_get_user_data(node_id);
+            const node_user_data = temp_ray_results[i];
 
             const mesh = this.meshes.get(node_user_data);
 
@@ -434,6 +428,7 @@ export class PathTracer {
      * @param {number} out_offset
      * @param {number[]} ray
      * @param {number} ray_address
+     * @returns {boolean}
      */
     sample_lights(out, out_offset, ray, ray_address) {
         let lights_sampled = false;
@@ -462,7 +457,10 @@ export class PathTracer {
                 const light_dir_inv_y = -dir.y;
                 const light_dir_inv_z = -dir.z;
 
-                const dotNL = v3_dot(ray_direction_x, ray_direction_y, ray_direction_z, light_dir_inv_x, light_dir_inv_y, light_dir_inv_z);
+                const dotNL = v3_dot(
+                    ray_direction_x, ray_direction_y, ray_direction_z,
+                    light_dir_inv_x, light_dir_inv_y, light_dir_inv_z
+                );
 
                 if (dotNL <= 0) {
                     // no contribution, facing away from the light
@@ -508,8 +506,6 @@ export class PathTracer {
         irradiance[1] = 1;
         irradiance[2] = 1;
 
-        let got_emission = false;
-
         let i;
         for (i = 0; i < max_bounce; i++) {
 
@@ -520,14 +516,9 @@ export class PathTracer {
                 // ray didn't hit anything
 
                 // sample "environment" and terminate path as there is nothing to reflect off of
-
                 this.sample_background(tmp_0, 0, _ray_0, 3);
-
                 vec3.multiply(irradiance, irradiance, tmp_0);
 
-
-                got_emission = true;
-
                 break;
             }
 
@@ -535,47 +526,29 @@ export class PathTracer {
 
             // adjust normal on the hit
             array_copy(tmp_0, 3, trace_result, 3, 3);
+            array_copy(trace_result, 0, _ray_0, 0, 3);
 
+            // accumulate irradiance
+            vec3.multiply(irradiance, irradiance, tmp_0);
 
             // reflect ray
-            array_copy(trace_result, 0, _ray_0, 0, 3);
-
             getBiasedNormalSample(_ray_0, 3, tmp_0, 3, 1, random);
 
-            // accumulate
-            vec3.multiply(irradiance, irradiance, tmp_0);
         }
 
-
         if (i > 0) {
-
-            // directly sample light at the end of the path
+            // direct lighting
             this.sample_lights(tmp_1, 0, trace_result, 0);
 
-            vec3.multiply(irradiance, irradiance, tmp_1);
+            irradiance[0] *= tmp_1[0];
+            irradiance[1] *= tmp_1[1];
+            irradiance[2] *= tmp_1[2];
         }
 
-        array_copy(irradiance, 0, out, 0, 3);
-    }
-}
+        out[0] =  irradiance[0]
+        out[1] =  irradiance[1]
+        out[2] = irradiance[2]
 
-/**
- *
- * @param {number} material
- * @param {number} hit
- */
-function compute_hit_reaction_standard_material(material, hit) {
-
-}
-
-
-/**
- *
- * @param {number[]|vec3} out
- * @param {number} value
- */
-function vec3_set_scalar(out, value) {
-    out[0] = value;
-    out[1] = value;
-    out[2] = value;
+        // array_copy(irradiance, 0, out, 0, 3);
+    }
 }

package/src/engine/graphics/sh3/path_tracer/getBiasedNormalSample.d.ts

@@ -9,4 +9,13 @@
  * @param {function():number} random
  */
 export function getBiasedNormalSample(out: number[], out_offset: number, normal: number[], normal_offset: number, power: number, random: () => number): void;
+/**
+ * @see https://www.shadertoy.com/view/stVfWc
+ * @param {number[]} out
+ * @param {number} out_offset
+ * @param {number[]} normal
+ * @param {number} normal_offset
+ * @param {function():number} random
+ */
+export function getCosineDirection(out: number[], out_offset: number, normal: number[], normal_offset: number, random: () => number): void;
 //# sourceMappingURL=getBiasedNormalSample.d.ts.map

package/src/engine/graphics/sh3/path_tracer/getBiasedNormalSample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getBiasedNormalSample.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/sh3/path_tracer/getBiasedNormalSample.js"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,2CAPW,MAAM,EAAE,cACR,MAAM,UACN,MAAM,EAAE,iBACR,MAAM,SACN,MAAM,gBACK,MAAM,QA8C3B"}
+{"version":3,"file":"getBiasedNormalSample.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/sh3/path_tracer/getBiasedNormalSample.js"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,2CAPW,MAAM,EAAE,cACR,MAAM,UACN,MAAM,EAAE,iBACR,MAAM,SACN,MAAM,gBACK,MAAM,QAsD3B;AAED;;;;;;;GAOG;AACH,wCANW,MAAM,EAAE,cACR,MAAM,UACN,MAAM,EAAE,iBACR,MAAM,gBACK,MAAM,QAgC3B"}

package/src/engine/graphics/sh3/path_tracer/getBiasedNormalSample.js

@@ -1,3 +1,5 @@
+import { PI2 } from "../../../../core/math/PI2.js";
+
 /**
  * @see 2003 "Global Illumination Compendium" by Philip Dutré (equation 36)
  * @see http://blog.hvidtfeldts.net/index.php/2015/01/path-tracing-3d-fractals/
@@ -8,7 +10,15 @@
  * @param {number} power
  * @param {function():number} random
  */
-export function getBiasedNormalSample(out, out_offset, normal, normal_offset, power, random) {
+export function getBiasedNormalSample(
+    out,
+    out_offset,
+    normal,
+    normal_offset,
+    power,
+    random
+) {
+
     const dir_x = normal[normal_offset];
     const dir_y = normal[normal_offset + 1];
     const dir_z = normal[normal_offset + 2];
@@ -40,8 +50,8 @@ export function getBiasedNormalSample(out, out_offset, normal, normal_offset, po
     // we can skip normalizing second orthonormal vector, as it will be guaranteed to be unit length already
     // for explanation, see https://math.stackexchange.com/questions/23259/is-the-cross-product-of-two-unit-vectors-itself-a-unit-vector#:~:text=If%20you%20know%20that%20the,(a%20length%20of%20one).
 
-    const r_x = (random()) * 2 * Math.PI;
-    const r_y = Math.pow((random()), 1 / (power + 1));
+    const r_x = random() * PI2;
+    const r_y = Math.pow(random(), 1 / (power + 1));
 
     const oneminus = Math.sqrt(1.0 - r_y * r_y);
 
@@ -53,3 +63,43 @@ export function getBiasedNormalSample(out, out_offset, normal, normal_offset, po
     out[out_offset + 1] = k0 * o1_y + k1 * o2_y + r_y * dir_y;
     out[out_offset + 2] = k0 * o1_z + k1 * o2_z + r_y * dir_z;
 }
+
+/**
+ * @see https://www.shadertoy.com/view/stVfWc
+ * @param {number[]} out
+ * @param {number} out_offset
+ * @param {number[]} normal
+ * @param {number} normal_offset
+ * @param {function():number} random
+ */
+export function getCosineDirection(
+    out,
+    out_offset,
+    normal,
+    normal_offset,
+    random
+) {
+
+    const dir_x = normal[normal_offset];
+    const dir_y = normal[normal_offset + 1];
+    const dir_z = normal[normal_offset + 2];
+
+    const r_x = random() * PI2;
+    const r_y = 2 * random() - 1;
+
+    const oneminus = Math.sqrt(1.0 - r_y * r_y);
+
+    const k0 = Math.cos(r_x) * oneminus;
+    const k1 = Math.sin(r_x) * oneminus;
+
+
+    let out_dir_x = dir_x + k0;
+    let out_dir_y = dir_y + k1;
+    let out_dir_z = dir_z + r_y;
+
+    const len2 = 1 / Math.hypot(out_dir_x, out_dir_y, out_dir_z);
+
+    out[out_offset] = out_dir_x * len2;
+    out[out_offset + 1] = out_dir_y * len2;
+    out[out_offset + 2] = out_dir_z * len2;
+}

package/src/engine/graphics/sh3/path_tracer/prototypePathTracer.js

@@ -71,7 +71,7 @@ vCanvas.css({
  * How many rays to use per-pixel
  * @type {number}
  */
-const PIXEL_SAMPLE_COUNT = 4;
+const PIXEL_SAMPLE_COUNT = 64;
 
 const pt = new PathTracer();
 
@@ -476,7 +476,7 @@ function* render(target, pt, camera, progress = { current: 0, total: 0 }) {
                             ray_direction.x, ray_direction.y, ray_direction.z
                         );
 
-                        pt.path_trace(pixel_color, ray, Infinity, 4, random);
+                        pt.path_trace(pixel_color, ray, Infinity, 3, random);
 
                         pixel_accummulation[0] += pixel_color[0];
                         pixel_accummulation[1] += pixel_color[1];
@@ -533,7 +533,7 @@ async function start_renderer(camera) {
     // await prepare_scene_sphere_01(pt, camera);
     await prepare_scene_gltf(pt, camera, path);
 
-    pt.build();
+    await pt.build();
     // pt.optimize();
 
     const pixelRatio = 1;

package/src/engine/graphics/texture/sampler/convertTexture2Sampler2D.d.ts

@@ -3,7 +3,7 @@
  * @param {Texture} texture
  * @param {number} [width]
  * @param {number} [height]
- * @param {boolean} flipY
+ * @param {boolean} [flipY]
  * @return {Sampler2D}
  */
 export function convertTexture2Sampler2D(texture: Texture, width?: number, height?: number, flipY?: boolean): Sampler2D;

package/src/engine/graphics/texture/sampler/convertTexture2Sampler2D.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"convertTexture2Sampler2D.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/texture/sampler/convertTexture2Sampler2D.js"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,mEALW,MAAM,WACN,MAAM,UACN,OAAO,GACN,SAAS,CAmEpB;0BAjFyB,gBAAgB"}
+{"version":3,"file":"convertTexture2Sampler2D.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/graphics/texture/sampler/convertTexture2Sampler2D.js"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,mEALW,MAAM,WACN,MAAM,UACN,OAAO,GACN,SAAS,CAyEpB;0BArFyB,gBAAgB"}

package/src/engine/graphics/texture/sampler/convertTexture2Sampler2D.js

@@ -1,8 +1,8 @@
-import { WebGLRendererPool } from "../../render/RendererPool.js";
+import { flipArrayInPlace } from "../../filter/FlipArrayInPlace.js";
 import ImageFilter from "../../filter/ImageFilter.js";
-import { Sampler2D } from "./Sampler2D.js";
 import CopyShader from "../../postprocess/threejs/shaders/CopyShader.js";
-import { flipArrayInPlace } from "../../filter/FlipArrayInPlace.js";
+import { WebGLRendererPool } from "../../render/RendererPool.js";
+import { Sampler2D } from "./Sampler2D.js";
 
 
 const DEFAULT_TEXTURE_WIDTH = 512;
@@ -13,39 +13,47 @@ const DEFAULT_TEXTURE_HEIGHT = 512;
  * @param {Texture} texture
  * @param {number} [width]
  * @param {number} [height]
- * @param {boolean} flipY
+ * @param {boolean} [flipY]
  * @return {Sampler2D}
  */
-export function convertTexture2Sampler2D(texture, width, height, flipY = true) {
+export function convertTexture2Sampler2D(
+    texture,
+    width,
+    height,
+    flipY = true
+) {
+    let _height = height;
+    let _width = width;
+
     // TODO take channel count into account
 
-    if (width === undefined || height === undefined) {
+    if (_width === undefined || _height === undefined) {
 
         //figure out texture size
         const image = texture.image;
 
         if (image !== undefined && image !== null) {
-            if (width === undefined) {
+            if (_width === undefined) {
                 if (typeof image.width === "number") {
-                    width = image.width;
+                    _width = image.width;
                 } else {
-                    width = DEFAULT_TEXTURE_WIDTH;
+                    _width = DEFAULT_TEXTURE_WIDTH;
                 }
             }
-            if (height === undefined) {
+            if (_height === undefined) {
                 if (typeof image.height === "number") {
-                    height = image.height;
+                    _height = image.height;
                 } else {
-                    height = DEFAULT_TEXTURE_HEIGHT;
+                    _height = DEFAULT_TEXTURE_HEIGHT;
                 }
             }
         } else {
-            if (width === undefined) {
-                width = DEFAULT_TEXTURE_WIDTH;
+            if (_width === undefined) {
+                _width = DEFAULT_TEXTURE_WIDTH;
             }
 
-            if (height === undefined) {
-                height = DEFAULT_TEXTURE_HEIGHT;
+            if (_height === undefined) {
+                _height = DEFAULT_TEXTURE_HEIGHT;
             }
         }
 
@@ -53,32 +61,30 @@ export function convertTexture2Sampler2D(texture, width, height, flipY = true) {
 
     // TODO add special case for DataTexture
 
-    const renderer = WebGLRendererPool.global.get({});
+    const built = WebGLRendererPool.global.use(renderer => {
 
-    const ctx = renderer.getContext();
+        const ctx = renderer.getContext();
 
-    //support for compressed textures
-    ctx.getExtension("WEBGL_compressed_texture_s3tc");
+        //support for compressed textures
+        ctx.getExtension("WEBGL_compressed_texture_s3tc");
 
-    const built = ImageFilter(renderer, width, height, {
-        vertexShader: CopyShader.vertexShader,
-        fragmentShader: CopyShader.fragmentShader,
-        uniforms: {
-            tDiffuse: {
-                value: texture,
-                type: 't'
-            },
-            opacity: { value: 1.0 }
-        }
-    });
+        return ImageFilter(renderer, _width, _height, {
+            vertexShader: CopyShader.vertexShader,
+            fragmentShader: CopyShader.fragmentShader,
+            uniforms: {
+                tDiffuse: {
+                    value: texture,
+                    type: 't'
+                },
+                opacity: { value: 1.0 }
+            }
+        });
 
-    WebGLRendererPool.global.release(renderer);
+    });
 
     if (flipY) {
-        flipArrayInPlace(built.array, width, height);
+        flipArrayInPlace(built.array, _width, _height);
     }
 
-    const sampler = new Sampler2D(built.array, 4, width, height);
-
-    return sampler;
+    return new Sampler2D(built.array, 4, _width, _height);
 }

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler.d.ts

@@ -0,0 +1,3 @@
+export function debug_draw_sampler(engine: any, sampler: any, x?: number, y?: number): EmptyView;
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+//# sourceMappingURL=debug_draw_sampler.d.ts.map

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug_draw_sampler.d.ts","sourceRoot":"","sources":["../../../../../../../src/engine/graphics/texture/sampler/debug/debug_draw_sampler.js"],"names":[],"mappings":"AAIA,iGA6BC;sBAhCqB,2CAA2C"}

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler.js

@@ -0,0 +1,34 @@
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+import sampler2D2Canvas from "../Sampler2D2Canvas.js";
+
+export function debug_draw_sampler(engine, sampler, x = 0, y = 0) {
+
+    const view = new CanvasView();
+    view.size.set(sampler.width, sampler.height);
+    sampler2D2Canvas(sampler, 1, 0, view.el);
+
+    view.css({
+        position: 'absolute',
+        top: "0",
+        left: "0"
+    });
+
+    const container = new EmptyView({
+        css: {
+            position: 'absolute',
+            top: `${y}px`,
+            left: `${x}px`
+        }
+    });
+    container.size.set(sampler.width, sampler.height);
+    container.addChild(view);
+
+    engine.gameView.addChild(container);
+
+    container.$redraw = () => {
+        sampler2D2Canvas(sampler, 1, 0, view.el);
+    };
+
+    return container;
+}

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler_grid.d.ts

@@ -0,0 +1,10 @@
+/**
+ *
+ * @param {Engine} engine
+ * @param {Sampler2D} input
+ * @param {function(Sampler2D,Sampler2D,{label:string, skip:boolean})[]} transforms
+ * @param {Vector2} size
+ * @param {boolean} display_labels
+ */
+export function debug_draw_sampler_grid({ engine, input, transforms, size, display_labels }: Engine): void;
+//# sourceMappingURL=debug_draw_sampler_grid.d.ts.map

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler_grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug_draw_sampler_grid.d.ts","sourceRoot":"","sources":["../../../../../../../src/engine/graphics/texture/sampler/debug/debug_draw_sampler_grid.js"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,2GA0EC"}

package/src/engine/graphics/texture/sampler/debug/debug_draw_sampler_grid.js

@@ -0,0 +1,89 @@
+import Vector2 from "../../../../../core/geom/Vector2.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import LabelView from "../../../../../view/common/LabelView.js";
+import { debug_draw_sampler } from "./debug_draw_sampler.js";
+
+/**
+ *
+ * @param {Engine} engine
+ * @param {Sampler2D} input
+ * @param {function(Sampler2D,Sampler2D,{label:string, skip:boolean})[]} transforms
+ * @param {Vector2} size
+ * @param {boolean} display_labels
+ */
+export function debug_draw_sampler_grid({
+                                            engine,
+                                            input,
+                                            transforms,
+                                            size = new Vector2(input.width, input.height),
+                                            display_labels = true
+                                        }) {
+
+    const GAP_SIZE = 4;
+
+    let draw_index = 0;
+
+    const viewport_width = window.innerWidth;
+    const tiles_x = max2(1, Math.floor(viewport_width / (size.x + GAP_SIZE)));
+
+    for (let i = 0; i < transforms.length; i++) {
+        const out = input.clone();
+
+        out.resize(size.x, size.y);
+
+        const params = {
+            label: '',
+            skip: false
+        };
+
+        const t0 = performance.now();
+
+        try {
+            transforms[i](out, input, params);
+        } catch (e) {
+            // error, skip
+            console.error(`Failed '${params.label}'. Reason: ${e.message}`)
+            continue;
+        }
+
+        const t1 = performance.now();
+
+        if (params.skip) {
+            continue;
+        }
+
+        const t_duration = t1 - t0;
+
+        console.log(`Executed ${params.label} in ${t_duration}ms`);
+
+
+        const draw_x = (draw_index % tiles_x) * (size.x + GAP_SIZE);
+        const draw_y = Math.floor(draw_index / tiles_x) * (size.y + GAP_SIZE);
+
+        const view = debug_draw_sampler(engine, out, draw_x, draw_y);
+
+        if (params.label.length > 0 && display_labels) {
+            const vLabel = new LabelView(params.label, {
+                css: {
+                    position: 'absolute',
+                    fontFamily: 'sans-serif',
+                    fontWeight: 'bold',
+                    top: 0,
+                    left: 0,
+                    zIndex: 1,
+                    color: '#000000',
+                    textShadow: '1px 1px 1px white',
+                    background: 'rgba(255,255,255,0.7)',
+                    padding: '2px'
+                }
+            });
+
+            view.addChild(vLabel);
+        }
+
+        draw_index++;
+
+    }
+
+}
+