@woosh/meep-engine 2.42.7 → 2.43.0

package/engine/graphics/impostors/octahedral/util/build_cutout_from_atlas_by_alpha.js

@@ -0,0 +1,128 @@
+//
+
+import { renderSamplerFromTexture } from "../../../render/visibility/hiz/buildCanvasViewFromTexture.js";
+import { convex_hull_jarvis_2d } from "../../../../../core/geom/2d/convex-hull/convex_hull_jarvis_2d.js";
+import { fixed_convex_hull_relaxation } from "../../../../../core/geom/2d/convex-hull/fixed_convex_hull_relaxation.js";
+import { array_copy } from "../../../../../core/collection/array/copyArray.js";
+import { Sampler2D } from "../../../texture/sampler/Sampler2D.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import { sampler2d_find_pixels } from "../../../texture/sampler/search/sampler2d_find_pixels.js";
+import {
+    make_edge_condition_channel_threshold
+} from "../../../texture/sampler/search/make_edge_condition_channel_threshold.js";
+import { compute_polygon_area_2d } from "../../../../../core/geom/2d/compute_polygon_area_2d.js";
+
+/**
+ * TODO For this specific use-case with octahedral impostors we can get away tracing a circular shape in general.
+ *      A circle is a lot easier to quantize (as long as we make sure we place edges outside of the circle)
+ * @param {ImpostorDescription} impostor
+ * @param {THREE.WebGLRenderer} renderer
+ * @returns {number}
+ */
+export function build_cutout_from_atlas_by_alpha(impostor, renderer) {
+    // get impostor data first
+
+    const ctrl = renderSamplerFromTexture({
+        renderer: renderer,
+        // swizzle: ['a', 'a', 'a', 1],
+        swizzle: ['a', 'a', 'a', 1],
+        texture: impostor.rt.texture[0]
+    });
+
+    ctrl.render();
+
+    const source_canvas_data = ctrl.destination.data;
+
+    // build set of border pixels
+    const frame_size = impostor.resolution / impostor.frame_count;
+    const frame_size_i = Math.ceil(frame_size);
+
+    const accummulator = Sampler2D.uint8(1, frame_size_i, frame_size_i);
+
+    for (let i = 0; i < impostor.frame_count; i++) {
+
+        const frame_offset_y = Math.floor(frame_size * i);
+
+        for (let j = 0; j < impostor.frame_count; j++) {
+
+            const frame_offset_x = Math.floor(frame_size * j);
+
+            for (let y = 0; y < frame_size_i; y++) {
+                const global_y = frame_offset_y + y;
+
+                for (let x = 0; x < frame_size_i; x++) {
+
+                    const global_x = x + frame_offset_x;
+
+                    const global_index = global_y * impostor.resolution + global_x;
+
+                    const v = source_canvas_data[global_index * 4];
+
+
+                    if (v > 0) {
+
+                        const local_index = y * frame_size_i + x;
+
+                        accummulator.data[local_index] = max2(v, accummulator.data[local_index]);
+                    }
+                }
+            }
+        }
+    }
+
+
+    const edge_pixels = sampler2d_find_pixels(accummulator, make_edge_condition_channel_threshold(0, 5));
+
+    // filtered pixels
+    const filtered_edge_pixels = [];
+
+    const half_pixel = 0.5;
+
+    for (let i = 0; i < edge_pixels.length; i += 2) {
+        const x = edge_pixels[i];
+        const y = edge_pixels[i + 1];
+
+        filtered_edge_pixels.push(x - half_pixel, y - half_pixel);
+        filtered_edge_pixels.push(x + half_pixel, y - half_pixel);
+        filtered_edge_pixels.push(x + half_pixel, y + half_pixel);
+        filtered_edge_pixels.push(x - half_pixel, y + half_pixel);
+    }
+
+    const hull_point_indices = convex_hull_jarvis_2d(filtered_edge_pixels, filtered_edge_pixels.length / 2);
+
+    const hull_points = [];
+
+    for (let i = 0; i < hull_point_indices.length; i++) {
+        const hpi = hull_point_indices[i];
+
+        array_copy(filtered_edge_pixels, hpi * 2, hull_points, i * 2, 2);
+    }
+
+    const cutout_vertex_count = 8;
+
+    const cutout_points = new Float32Array(cutout_vertex_count * 2);
+
+    fixed_convex_hull_relaxation(cutout_points, 0, cutout_vertex_count, hull_points, hull_point_indices.length);
+
+    // normalize points
+    for (let i = 0; i < cutout_vertex_count; i++) {
+        cutout_points[i * 2] /= frame_size;
+        cutout_points[i * 2 + 1] /= frame_size;
+    }
+
+    const area = compute_polygon_area_2d(cutout_points, cutout_vertex_count);
+
+    console.log(`Cutout area: ${area}`);
+
+    if (area >= 0.99 && cutout_vertex_count >= 4) {
+        // default back to aligned quad, produced result is a degradation
+        return new Float32Array([
+            0, 0,
+            1, 0,
+            1, 1,
+            0, 1
+        ]);
+    }
+
+    return cutout_points;
+}

package/engine/graphics/impostors/octahedral/util/build_geometry_from_cutout_shape.js

@@ -0,0 +1,32 @@
+import { Matrix4, Shape, ShapeBufferGeometry } from "three";
+
+/**
+ *
+ * @param {number[]} cutout
+ * @return {THREE.BufferGeometry}
+ */
+export function build_geometry_from_cutout_shape(cutout) {
+
+    const shape = new Shape();
+
+    shape.moveTo(cutout[0], cutout[1]);
+
+    for (let i = 2; i < cutout.length; i += 2) {
+        shape.lineTo(cutout[i], cutout[i + 1]);
+    }
+
+    shape.closePath();
+
+    const geometry = new ShapeBufferGeometry(shape);
+
+    // move shape by 0.5 to center on origin
+    const attribute = geometry.getAttribute('position');
+
+    const mat = new Matrix4();
+    mat.makeTranslation(-0.5, -0.5, 0);
+
+    attribute.applyMatrix4(mat);
+    //
+
+    return geometry;
+}

package/engine/graphics/impostors/octahedral/util/load_mesh_for_bake.js

@@ -0,0 +1,31 @@
+import { GameAssetType } from "../../../../asset/GameAssetType.js";
+import { three_object_to_entity_composition } from "../../../ecs/mesh-v2/three_object_to_entity_composition.js";
+import { ShadedGeometry } from "../../../ecs/mesh-v2/ShadedGeometry.js";
+import { Transform } from "../../../../ecs/transform/Transform.js";
+
+/**
+ *
+ * @param {Engine} engine
+ * @param {string} url
+ * @return {Promise<{mesh:ShadedGeometry,transform:mat4}[]>}
+ */
+export async function load_mesh_for_bake(engine, url) {
+
+    const gltf_asset = await engine.assetManager.promise(url, GameAssetType.ModelGLTF_JSON);
+
+    const node_hierarchy = three_object_to_entity_composition(gltf_asset.create());
+
+    const objects = [];
+
+    node_hierarchy.traverse(n => {
+        const sg = n.entity.getComponent(ShadedGeometry);
+        if (sg !== null) {
+            objects.push({
+                mesh: sg,
+                transform: n.entity.getComponent(Transform).matrix
+            })
+        }
+    });
+
+    return objects;
+}

package/engine/graphics/impostors/octahedral/util/makeImpostorAtlasPreview.js

@@ -0,0 +1,107 @@
+import { buildCanvasViewFromTexture } from "../../../render/visibility/hiz/buildCanvasViewFromTexture.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
+
+/**
+ * @param {ImpostorDescription} impostor
+ * @returns {View}
+ */
+function makeGrid(impostor) {
+    const vGrid = new CanvasView();
+
+    vGrid.size.set(impostor.resolution, impostor.resolution);
+
+    const ctx = vGrid.context2d;
+
+    ctx.strokeStyle = "rgba(64,255,0,0.5)";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+
+    const frame_size = impostor.resolution / impostor.frame_count;
+
+    for (let i = 0; i < impostor.frame_count; i++) {
+
+        ctx.moveTo(0, i * frame_size);
+        ctx.lineTo(impostor.resolution, i * frame_size);
+    }
+
+    for (let i = 0; i < impostor.frame_count; i++) {
+        ctx.moveTo(i * frame_size, 0);
+        ctx.lineTo(i * frame_size, impostor.resolution);
+    }
+
+    ctx.stroke();
+
+    vGrid.css({
+
+        position: 'absolute',
+        top: '0',
+        left: '0'
+    });
+    return vGrid;
+}
+
+/**
+ *
+ * @param {ImpostorDescription} impostor
+ * @param {THREE.WebGLRenderer} renderer
+ * @param {'albedo'|'normal'|'depth'|'alpha'} [mode]
+ * @param {boolean} [show_grid]
+ * @return {View}
+ */
+export function makeImpostorAtlasPreview({
+                                             impostor,
+                                             renderer,
+                                             mode = 'albedo',
+                                             show_grid = true
+                                         }) {
+
+    const options = {};
+
+
+    switch (mode) {
+        case "normal":
+            options.swizzle = ['r', 'g', 'b', 1];
+            options.texture = impostor.rt.texture[1]
+            break
+        case "alpha":
+            options.swizzle = ['a', 'a', 'a', 1];
+            options.texture = impostor.rt.texture[0]
+            break;
+        case "depth":
+            options.swizzle = ['a', 'a', 'a', 1];
+            options.texture = impostor.rt.texture[1]
+            break;
+        default:
+            console.warn(`Unsupported mode '${mode}', defaulting to albedo`);
+        //fall-through
+        case 'albedo':
+            options.swizzle = ['r', 'g', 'b', 1];
+            options.texture = impostor.rt.texture[0]
+            break;
+    }
+
+    const ctrl = buildCanvasViewFromTexture(Object.assign({ renderer }, options));
+
+    ctrl.view.css({
+        opacity: 1,
+        position: 'absolute',
+        top: '0',
+        left: '0'
+    });
+    ctrl.render();
+
+    const vContainer = new EmptyView();
+
+    vContainer.addChild(ctrl.view);
+
+    if (show_grid) {
+
+        const vGrid = makeGrid(impostor);
+
+        vContainer.addChild(vGrid);
+    }
+
+    return vContainer;
+}

package/engine/graphics/material/manager/ManagedMaterial.js

@@ -40,6 +40,10 @@ export class ManagedMaterial {
         return this.__source;
     }
 
+    setSource(v) {
+        this.__source = v;
+    }
+
     /**
      *
      * @returns {Material}

package/engine/graphics/material/manager/MaterialManager.js

@@ -155,6 +155,7 @@ export class MaterialManager {
                 const mat = this.__compile(source);
 
                 material = new ManagedMaterial(mat);
+                material.setSource(source);
             }
 
             material.onLastReleased.addOne(this.__handle_last_reference_removed, this);

package/engine/graphics/material/optimization/MaterialOptimizationContext.js

@@ -2,7 +2,7 @@ import { traverseThreeObject } from "../../ecs/highlight/renderer/traverseThreeO
 import { TextureAttachmentsByMaterialType } from "../../../asset/loaders/material/TextureAttachmensByMaterialType.js";
 import { HashMap } from "../../../../core/collection/HashMap.js";
 import AABB2 from "../../../../core/geom/AABB2.js";
-import { MaxRectanglesPacker } from "../../../../core/geom/packing/MaxRectangles.js";
+import { MaxRectanglesPacker } from "../../../../core/geom/packing/max-rect/MaxRectangles.js";
 import { Sampler2D } from "../../texture/sampler/Sampler2D.js";
 import { array_push_if_unique } from "../../../../core/collection/array/array_push_if_unique.js";
 import { computeMaterialHash } from "../../../asset/loaders/material/computeMaterialHash.js";
@@ -21,10 +21,14 @@ import { convertTexture2Sampler2D } from "../../texture/sampler/convertTexture2S
 import { BUFFER_GEOMETRY_UVS } from "./BUFFER_GEOMETRY_UVS.js";
 import { is_compliant_mesh } from "./is_compliant_mesh.js";
 import { MaterialDescriptor } from "./MaterialDescriptor.js";
-import { computeThreeTextureTypeFromDataType } from "../../render/forward_plus/data/computeThreeTextureTypeFromDataType.js";
+import {
+    computeThreeTextureTypeFromDataType
+} from "../../render/forward_plus/data/computeThreeTextureTypeFromDataType.js";
 import { typedArrayToDataType } from "../../../../core/collection/array/typedArrayToDataType.js";
 import { DataType } from "../../../../core/collection/table/DataType.js";
-import { compute_typed_array_constructor_from_data_type } from "../../../../core/collection/table/DataType2TypedArrayConstructorMapping.js";
+import {
+    compute_typed_array_constructor_from_data_type
+} from "../../../../core/collection/table/DataType2TypedArrayConstructorMapping.js";
 import { copy_Sampler2D_channel_data } from "../../texture/sampler/copy_Sampler2D_channel_data.js";
 import { channelCountToThreeTextureFormat } from "../../texture/channelCountToThreeTextureFormat.js";
 import { prepare_atlas_texture } from "./prepare_atlas_texture.js";

package/engine/graphics/particles/particular/engine/renderers/billboard/ParticleBillboardMaterial.js

@@ -7,9 +7,9 @@ import {
     OneMinusSrcAlphaFactor,
     ShaderMaterial,
     UniformsLib,
-    UniformsUtils
+    UniformsUtils,
+    Vector2 as ThreeVector2
 } from "three";
-import { Vector2 as ThreeVector2 } from "three/src/math/Vector2.js";
 
 const CHUNK_LAMBERT_LIGHTING = `
 vec3 diffuse = vec3( 1.0 );

package/engine/graphics/render/forward_plus/plugin/ForwardPlusRenderingPlugin.js

@@ -17,13 +17,6 @@ export class ForwardPlusRenderingPlugin extends EnginePlugin {
             light_manager: this.__light_manager,
             resolution: this.__resolution
         });
-
-        /**
-         * Track lifecycle state
-         * @type {boolean}
-         * @private
-         */
-        this.__state_is_running = false;
     }
 
     /**
@@ -44,12 +37,6 @@ export class ForwardPlusRenderingPlugin extends EnginePlugin {
     }
 
     async startup() {
-        if (this.__state_is_running) {
-            throw new Error("Already running");
-        }
-
-        this.__state_is_running = true;
-
         const lm = this.__light_manager;
 
         lm.setTileMapResolution(16, 8, 8);
@@ -70,12 +57,6 @@ export class ForwardPlusRenderingPlugin extends EnginePlugin {
     }
 
     async shutdown() {
-        if (!this.__state_is_running) {
-            throw new Error("Not running");
-        }
-
-        this.__state_is_running = false;
-
         const graphics = this.engine.graphics;
 
         const is_material_removed = graphics.getMaterialManager().removeCompileStep(this.__material_transformer);

package/engine/graphics/render/forward_plus/prototype/prototypeLightManager.js

@@ -1561,10 +1561,10 @@ function draw_camera_view_planes() {
 // prepare_scene_2();
 // prepare_scene_decal_0();
 // prepare_scene_decal_1();
-prepare_scene_decal_2();
+// prepare_scene_decal_2();
 // prepare_scene_9();
 // prepare_scene_2();
-// prepare_scene_0();
+prepare_scene_0();
 animate();
 
 // draw_camera_view_planes();

package/engine/graphics/render/visibility/hiz/buildCanvasViewFromTexture.js

@@ -14,6 +14,7 @@ import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../../../geometry/FULL_SCREEN_TRI
 import { formatToChannelCount } from "../../../texture/formatToChannelCount.js";
 import { glsl_gen_swizzled_read } from "../../../shaders/glsl_gen_swizzled_read.js";
 import { assert } from "../../../../../core/assert.js";
+import { Sampler2D } from "../../../texture/sampler/Sampler2D.js";
 
 
 /**
@@ -92,6 +93,7 @@ function makeShader({ texture, alpha_override, swizzle }) {
     });
 }
 
+
 /**
  *
  * @param {number} height
@@ -100,29 +102,21 @@ function makeShader({ texture, alpha_override, swizzle }) {
  * @param {THREE.WebGLRenderer} renderer
  * @param {boolean} [flipY]
  * @param {(string|number)[]} [swizzle]
- * @return {{view: View, render: function}}
+ * @param {Sampler2D} [destination]
+ * @return {{destination: Sampler2D, render: function}}
  */
-export function buildCanvasViewFromTexture({
-                                               texture = CheckersTexture.create(),
-                                               width = texture.image.width,
-                                               height = texture.image.height,
-                                               renderer,
-                                               flipY = true,
-                                               swizzle = ['r', 'g', 'b', 'a']
-                                           }) {
-
+export function renderSamplerFromTexture({
+
+                                             texture = CheckersTexture.create(),
+                                             width = texture.image.width,
+                                             height = texture.image.height,
+                                             renderer,
+                                             flipY = true,
+                                             swizzle = ['r', 'g', 'b', 'a'],
+                                             destination = Sampler2D.uint8clamped(4, width, height)
+                                         }) {
     assert.isArray(swizzle, 'swizzle');
 
-    const canvasView = new CanvasView();
-    canvasView.css({
-        position: 'absolute',
-        left: 0,
-        top: 0
-    });
-    canvasView.size.set(width, height);
-
-    const ctx = canvasView.context2d;
-
     let copyShader = null;
 
     const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
@@ -147,8 +141,6 @@ export function buildCanvasViewFromTexture({
     };
     const renderTarget = new WebGLRenderTarget(width, height, renderTargetOptions);
 
-    const imageData = ctx.createImageData(width, height);
-
     let __texture_cached = texture;
 
     /**
@@ -172,7 +164,10 @@ export function buildCanvasViewFromTexture({
 
     const render = () => {
 
-        getShader().uniforms.tDiffuse.value = texture;
+        const shader = getShader();
+
+        shader.uniforms.tDiffuse.value = texture;
+        shader.uniformsNeedUpdate = true;
 
         const _rt = renderer.getRenderTarget();
 
@@ -180,16 +175,15 @@ export function buildCanvasViewFromTexture({
 
         renderer.render(scene, camera);
 
-        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, imageData.data);
-
+        destination.resize(width, height);
 
-        ctx.putImageData(imageData, 0, 0)
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, destination.data);
 
         renderer.setRenderTarget(_rt);
     };
 
     return {
-        view: canvasView,
+        destination,
         render,
         set texture(v) {
 
@@ -199,3 +193,65 @@ export function buildCanvasViewFromTexture({
         }
     }
 }
+
+/**
+ *
+ * @param {number} height
+ * @param {number} width
+ * @param {THREE.Texture} texture
+ * @param {THREE.WebGLRenderer} renderer
+ * @param {boolean} [flipY]
+ * @param {(string|number)[]} [swizzle]
+ * @return {{view: View, render: function}}
+ */
+export function buildCanvasViewFromTexture({
+                                               texture,
+                                               width = texture.image.width,
+                                               height = texture.image.height,
+                                               renderer,
+                                               flipY = true,
+                                               swizzle
+                                           }) {
+
+    const canvasView = new CanvasView();
+    canvasView.css({
+        position: 'absolute',
+        left: 0,
+        top: 0
+    });
+    canvasView.size.set(width, height);
+
+    const ctx = canvasView.context2d;
+
+    const imageData = ctx.createImageData(width, height);
+
+    // wrap imageData in Sampler2D
+    const sampler = new Sampler2D(imageData.data, 4, width, height);
+
+
+    const ctrl = renderSamplerFromTexture({
+        texture,
+        width,
+        height,
+        flipY,
+        renderer,
+        swizzle,
+        destination: sampler
+    });
+
+
+    function render() {
+        ctrl.render();
+
+        ctx.putImageData(imageData, 0, 0);
+    }
+
+
+    return {
+        view: canvasView,
+        render,
+        set texture(v) {
+            ctrl.texture = v;
+        }
+    }
+}

package/engine/graphics/shadows/ShadowMapRenderer.js

@@ -1,8 +1,15 @@
-import { Color, Scene, Vector2, VSMShadowMap } from "three";
-import { LinearFilter, NearestFilter, RGBAFormat } from "three/src/constants.js";
-import { WebGLRenderTarget } from "three/src/renderers/WebGLRenderTarget.js";
+import {
+    Color,
+    LinearFilter,
+    NearestFilter,
+    RGBAFormat,
+    Scene,
+    ShaderMaterial,
+    Vector2,
+    VSMShadowMap,
+    WebGLRenderTarget
+} from "three";
 import Signal from "../../../core/events/signal/Signal.js";
-import { ShaderMaterial } from "three/src/materials/ShaderMaterial.js";
 import { fragment as vsm_frag, vertex as vsm_vert } from "./vsm.glsl.js";
 import { renderScreenSpace } from "../render/utils/renderScreenSpace.js";
 

package/engine/graphics/texture/atlas/AbstractTextureAtlas.js

@@ -2,9 +2,10 @@ export class AbstractTextureAtlas {
     /**
      *
      * @param {Sampler2D} sampler
+     * @param {number} padding
      * @returns {AtlasPatch}
      */
-    add(sampler) {
+    add(sampler, padding) {
         throw new Error('Not Implemented');
     }