@woosh/meep-engine 2.33.2 → 2.33.6

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

@@ -0,0 +1,435 @@
+import { EngineHarness } from "../../../../EngineHarness.js";
+import { EngineConfiguration } from "../../../../EngineConfiguration.js";
+import GUIElementSystem from "../../../../ecs/gui/GUIElementSystem.js";
+import HeadsUpDisplaySystem from "../../../../ecs/gui/hud/HeadsUpDisplaySystem.js";
+import ScriptSystem from "../../../../ecs/systems/ScriptSystem.js";
+import FacingDirectionSystem from "../../../../../../model/game/ecs/system/FacingDirectionSystem.js";
+import PathFollowingSystem from "../../../../navigation/ecs/path_following/PathFollowingSystem.js";
+import SteeringSystem from "../../../../ecs/systems/SteeringSystem.js";
+import MotionSystem from "../../../../ecs/systems/MotionSystem.js";
+import TagSystem from "../../../../ecs/systems/TagSystem.js";
+import { AttachmentSocketsSystem } from "../../../../ecs/sockets/AttachmentSocketsSystem.js";
+import { AttachmentSystem } from "../../../../ecs/attachment/AttachmentSystem.js";
+import { SoundEmitterSystem } from "../../../../sound/ecs/emitter/SoundEmitterSystem.js";
+import SoundControllerSystem from "../../../../sound/ecs/SoundControllerSystem.js";
+import SoundListenerSystem from "../../../../sound/ecs/SoundListenerSystem.js";
+import TimerSystem from "../../../../ecs/systems/TimerSystem.js";
+import AnimationSystem from "../../../../ecs/systems/AnimationSystem.js";
+import TopDownCameraControllerSystem from "../../../ecs/camera/topdown/TopDownCameraControllerSystem.js";
+import { TopDownCameraLanderSystem } from "../../../ecs/camera/topdown/TopDownCameraLanderSystem.js";
+import { CameraSystem } from "../../../ecs/camera/CameraSystem.js";
+import { MeshSystem } from "../../../ecs/mesh/MeshSystem.js";
+import ClingToTerrainSystem from "../../../../ecs/terrain/ecs/ClingToTerrainSystem.js";
+import TerrainSystem from "../../../../ecs/terrain/ecs/TerrainSystem.js";
+import WaterSystem from "../../../ecs/water/WaterSystem.js";
+import Trail2DSystem from "../../../ecs/trail2d/Trail2DSystem.js";
+import { Foliage2System } from "../../../../ecs/foliage/ecs/Foliage2System.js";
+import ViewportPositionSystem from "../../../../ecs/gui/position/ViewportPositionSystem.js";
+import { GridPosition2TransformSystem } from "../../../../grid/systems/GridPosition2TransformSystem.js";
+import { Transform2GridPositionSystem } from "../../../../grid/transform2grid/Transform2GridPositionSystem.js";
+import SynchronizePositionSystem from "../../../../ecs/systems/SynchronizePositionSystem.js";
+import GridObstacleSystem from "../../../../grid/systems/GridObstacleSystem.js";
+import GridPositionSystem from "../../../../grid/systems/GridPositionSystem.js";
+import InputControllerSystem from "../../../../input/ecs/systems/InputControllerSystem.js";
+import { InputSystem } from "../../../../input/ecs/systems/InputSystem.js";
+import MeshHighlightSystem from "../../../ecs/highlight/system/MeshHighlightSystem.js";
+import LightSystem from "../../../ecs/light/LightSystem.js";
+import AnimationControllerSystem from "../../../ecs/animation/AnimationControllerSystem.js";
+import { AnimationGraphSystem } from "../../../ecs/animation/animator/AnimationGraphSystem.js";
+import { FogOfWarSystem } from "../../../../ecs/fow/FogOfWarSystem.js";
+import { FogOfWarRevealerSystem } from "../../../../ecs/fow/FogOfWarRevealerSystem.js";
+import { BehaviorSystem } from "../../../../intelligence/behavior/ecs/BehaviorSystem.js";
+import { SerializationMetadataSystem } from "../../../../ecs/systems/SerializationMetadataSystem.js";
+import { InverseKinematicsSystem } from "../../../../ecs/animation/InverseKinematicsSystem.js";
+import Vector3 from "../../../../../core/geom/Vector3.js";
+import Vector2 from "../../../../../core/geom/Vector2.js";
+import RenderSystem from "../../../../ecs/systems/RenderSystem.js";
+import { makeEngineOptionsModel } from "../../../../../../model/game/options/makeEngineOptionsModel.js";
+import { enableEditor } from "../../../../../editor/enableEditor.js";
+import EntityBuilder from "../../../../ecs/EntityBuilder.js";
+import { Transform } from "../../../../ecs/transform/Transform.js";
+import Mesh from "../../../ecs/mesh/Mesh.js";
+import { PathDisplaySystem } from "../../../ecs/path/PathDisplaySystem.js";
+import { MicronRenderPlugin } from "../../../micron/plugin/MicronRenderPlugin.js";
+import { StandardFrameBuffers } from "../../../StandardFrameBuffers.js";
+import { HierarchicalZBuffer } from "./buffer/HierarchicalZBuffer.js";
+import ViewportPosition from "../../../../ecs/gui/position/ViewportPosition.js";
+import GUIElement from "../../../../ecs/gui/GUIElement.js";
+import { MetricCollection } from "../../../../development/performance/MetricCollection.js";
+import { MetricStatistics } from "../../../../development/performance/MetricStatistics.js";
+import { prettyPrint } from "../../../../../core/NumberFormat.js";
+import { buildCanvasViewFromTexture } from "./buildCanvasViewFromTexture.js";
+import { BatchOcclusionQuery } from "./query/BatchOcclusionQuery.js";
+import HeadsUpDisplay from "../../../../ecs/gui/hud/HeadsUpDisplay.js";
+import LabelView from "../../../../../view/common/LabelView.js";
+import { randomFloatBetween } from "../../../../../core/math/MathUtils.js";
+import { seededRandom } from "../../../../../core/math/random/seededRandom.js";
+import { Sampler2D } from "../../../texture/sampler/Sampler2D.js";
+import { RefinementSpec } from "../../../micron/render/refinement/RefinementSpec.js";
+import { Matrix4 } from "three";
+import { inverseLerp } from "../../../../../core/math/inverseLerp.js";
+import { clamp } from "../../../../../core/math/clamp.js";
+import { max2 } from "../../../../../core/math/max2.js";
+import { min2 } from "../../../../../core/math/min2.js";
+import { buildCubeURLs } from "../../../texture/cubemap/buildCubeURLs.js";
+
+const engineHarness = new EngineHarness();
+
+function makeConfig(engine) {
+
+    const config = new EngineConfiguration();
+
+    /**
+     *
+     * @type {SoundEngine}
+     */
+    const sound = engine.sound;
+    const graphics = engine.graphics;
+    const assetManager = engine.assetManager;
+    const devices = engine.devices;
+
+    const guiSystem = new GUIElementSystem(engine.gui.view, engine);
+    const headsUpDisplaySystem = new HeadsUpDisplaySystem(graphics);
+
+    config.systems.push(
+        new ScriptSystem(),
+        new FacingDirectionSystem(),
+        new PathFollowingSystem(),
+        new SteeringSystem(),
+        new MotionSystem(),
+        new TagSystem(),
+        new AttachmentSocketsSystem(),
+        new AttachmentSystem(),
+        new SoundEmitterSystem(assetManager, sound.destination, sound.context),
+        new SoundControllerSystem(),
+        new SoundListenerSystem(sound.context),
+        new TimerSystem(),
+        guiSystem,
+        new AnimationSystem(graphics.viewport.size),
+        new TopDownCameraControllerSystem(graphics),
+        new TopDownCameraLanderSystem(),
+        new CameraSystem(graphics.scene, graphics),
+        new MeshSystem(engine),
+        new ClingToTerrainSystem(),
+        new TerrainSystem(graphics, assetManager),
+        new WaterSystem(graphics),
+        new Trail2DSystem(graphics, assetManager),
+        new Foliage2System(assetManager, graphics),
+        new ViewportPositionSystem(graphics.viewport.size),
+        new GridPosition2TransformSystem(),
+        new Transform2GridPositionSystem(),
+        new SynchronizePositionSystem(),
+        new GridObstacleSystem(),
+        new GridPositionSystem(),
+        new InputControllerSystem(devices),
+        new InputSystem(devices),
+        new MeshHighlightSystem(engine),
+        new LightSystem(engine, {
+            shadowResolution: 1024
+        }),
+        new AnimationControllerSystem(),
+        new AnimationGraphSystem(graphics.viewport.size),
+        headsUpDisplaySystem,
+        new FogOfWarSystem(graphics),
+        new FogOfWarRevealerSystem(0),
+        new BehaviorSystem(engine),
+        new SerializationMetadataSystem(),
+        new InverseKinematicsSystem(),
+        new PathDisplaySystem(engine),
+    );
+
+
+    // Plugins
+    config.addPlugin(MicronRenderPlugin);
+
+
+    // Knowledge
+
+    return config;
+}
+
+
+/**
+ *
+ * @param {EngineHarness} harness
+ * @return {Promise<void>}
+ */
+async function init(harness) {
+    const engine = harness.engine;
+
+    engine.entityManager.addSystem(new RenderSystem(engine.graphics));
+
+    makeEngineOptionsModel(engine.options, engine);
+
+    await makeConfig(engine).apply(engine);
+
+    enableEditor(engine);
+
+    await engine.graphics.loadEnvironmentMap(buildCubeURLs('data/textures/cubemaps/hip_miramar/32/', '.png'));
+
+    await harness.initialize();
+
+    main(engine);
+}
+
+const metrics = new MetricCollection();
+
+metrics.create({
+    name: 'hiz_build', buffer_size: 1000
+});
+metrics.create({
+    name: 'hiz_query', buffer_size: 1000
+});
+
+function print_perf_stats() {
+
+    const values = [];
+
+    const stats = new MetricStatistics();
+    metrics.list().forEach(m => {
+        const metric = metrics.get(m);
+
+        metric.computeStats(stats);
+
+        values.push(`${m}: ${prettyPrint(stats.mean)}`);
+    });
+
+    console.log(values.join(", "));
+}
+
+/**
+ *
+ * @param {HierarchicalZBuffer} hiz
+ * @param {GraphicsEngine} graphics
+ * @param {EntityComponentDataset} ecd
+ */
+function prepare_query_test(hiz, graphics, ecd) {
+
+    const query = new BatchOcclusionQuery();
+    query.setSize(64);
+
+
+    const random = seededRandom(42);
+
+    const row_count = 8;
+
+    const entities = [];
+    const labels = [];
+
+
+    function prepare_query() {
+
+        const spec = new RefinementSpec();
+        spec.build(new Matrix4(), graphics.camera.matrixWorldInverse, graphics.camera.projectionMatrix);
+
+        for (let i = 0; i < query.getSize(); i++) {
+            const entity = entities[i];
+
+            if (entity === undefined) {
+                continue;
+            }
+
+            /**
+             * @type {Mesh}
+             */
+            const mesh = entity.getComponent(Mesh);
+            const aabb = new Float32Array(6);
+
+            mesh.bvh.writeToArray(aabb, 0);
+
+            query.setElement(i, aabb, spec.projection_matrix);
+        }
+
+    }
+
+    const ENTITY_COUNT = min2(query.getSize(), 100);
+    for (let i = 0; i < ENTITY_COUNT; i++) {
+
+        const ix = i % row_count;
+        const iy = Math.floor(i / row_count);
+
+        const v = new LabelView('a', { classList: ['__debug-plaque'] });
+        v.css({
+            position: 'absolute',
+            whiteSpace: 'pre',
+            left: 0,
+            top: 0
+        });
+
+        labels[i] = v;
+
+        const entityBuilder = new EntityBuilder();
+
+        entities[i] = entityBuilder;
+
+        const scale = randomFloatBetween(random, 0.1, 1);
+
+        entityBuilder
+            .add(Mesh.fromJSON({
+                url: 'data/models/snaps/cube_blue.gltf'
+            }))
+            .add(Transform.fromJSON({
+                position: new Vector3(102 + ix * 5, randomFloatBetween(random, -4, 3), 60 + iy * 5),
+                scale: scale
+            }))
+            .add(new HeadsUpDisplay())
+            .add(new ViewportPosition())
+            .add(GUIElement.fromView(v))
+            .build(ecd);
+    }
+
+    const rt = query.getResultTexture();
+    const result_sampler = Sampler2D.uint8(4, rt.image.width, rt.image.height);
+
+    function process_query_results() {
+
+        query.readResultTexture(renderer, result_sampler.data);
+
+
+        for (let i = 0; i < ENTITY_COUNT; i++) {
+            const value = result_sampler.readChannel(i, 0, 0);
+
+            labels[i].updateText(value);
+        }
+    }
+
+    const renderer = graphics.getRenderer();
+
+    function compute_rt_scale(v) {
+        return Math.ceil(max2(1, clamp(inverseLerp(256, 32, v), 0, 1) * 8));
+    }
+
+    const preview_query = buildCanvasViewFromTexture({
+        width: rt.image.width * compute_rt_scale(rt.image.width),
+        height: rt.image.height * compute_rt_scale(rt.image.height),
+        renderer: renderer,
+        texture: null,
+        flipY: false
+    });
+
+    graphics.on.postRender.add(() => {
+        prepare_query();
+
+        const t0 = performance.now();
+        query.execute(renderer, hiz);
+        const t1 = performance.now();
+
+        metrics.get('hiz_query').record(t1 - t0);
+
+        preview_query.texture = query.getResultTexture();
+        preview_query.render();
+
+        process_query_results();
+    });
+
+
+    new EntityBuilder()
+        .add(ViewportPosition.fromJSON({
+            offset: new Vector2(10, 276)
+        }))
+        .add(GUIElement.fromView(preview_query.view))
+        .build(ecd);
+}
+
+setInterval(print_perf_stats, 2000);
+
+/**
+ *
+ * @param {Engine} engine
+ */
+function main(engine) {
+    EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        // enableTerrain: false,
+        enableTerrain: true,
+        terrainSize: new Vector2(100, 100),
+        focus: new Vector3(102, 0, 61),
+        // pitch: -0.5,
+        // yaw: 2.2,
+        // distance: 3
+        pitch: 0.9,
+        yaw: 3.1,
+        distance: 20
+    });
+
+
+    const graphics = engine.graphics;
+
+    graphics.renderer.setClearColor('rgba(99,99,99,1)');
+
+    const ecd = engine.entityManager.dataset;
+    //
+    // for (let i = 0; i < 10; i++) {
+    //     for (let j = 0; j < 10; j++) {
+    //
+    //         new EntityBuilder()
+    //             .add(Transform.fromJSON({
+    //                 position: {
+    //                     x: 60 + i * 10,
+    //                     y: 0,
+    //                     z: 30 + j * 10
+    //                 },
+    //                 scale: {
+    //                     x: 1,
+    //                     y: 1,
+    //                     z: 1
+    //                 }
+    //             }))
+    //             .add(Mesh.fromJSON({
+    //                 url: 'data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf',
+    //                 castShadow: true,
+    //                 receiveShadow: true
+    //             }))
+    //             .build(ecd);
+    //     }
+    // }
+
+    const hiz = new HierarchicalZBuffer();
+    const depthTexture = graphics.frameBuffers.getById(StandardFrameBuffers.ColorAndDepth).getRenderTarget().depthTexture;
+    hiz.input = depthTexture;
+    hiz.renderer = graphics.renderer;
+
+
+    const renderer = graphics.getRenderer();
+
+    const preview = buildCanvasViewFromTexture({
+        width: 512,
+        height: 256,
+        renderer: renderer,
+        texture: null
+    });
+
+
+    graphics.on.postRender.add(() => {
+        hiz.set_resolution(depthTexture.image.width, depthTexture.image.height);
+        hiz.build_mip_chain();
+
+        const t0 = performance.now();
+        hiz.build_mips();
+        const t1 = performance.now();
+
+        metrics.get('hiz_build').record(t1 - t0);
+
+
+        preview.texture = hiz.mips[0].texture;
+
+        preview.render();
+
+    });
+
+    console.log(hiz);
+
+    prepare_query_test(hiz, graphics, ecd);
+
+    new EntityBuilder()
+        .add(ViewportPosition.fromJSON({
+            offset: new Vector2(10, 10)
+        }))
+        .add(GUIElement.fromView(preview.view))
+        .build(ecd);
+
+
+}
+
+init(engineHarness);

package/engine/graphics/render/visibility/hiz/query/BatchOcclusionQuery.js

@@ -0,0 +1,174 @@
+import {
+    ClampToEdgeWrapping,
+    DataTexture,
+    FloatType,
+    NearestFilter,
+    RedFormat,
+    RGBAFormat,
+    UnsignedByteType,
+    WebGLRenderTarget
+} from "three";
+import { array_copy } from "../../../../../../core/collection/array/copyArray.js";
+import { makeQueryShader } from "./QueryShader.js";
+import { renderScreenSpace } from "../../../utils/renderScreenSpace.js";
+import { assert } from "../../../../../../core/assert.js";
+import { max2 } from "../../../../../../core/math/max2.js";
+
+/**
+ * Query element contains following data:
+ *  [AABB( x0,y0,z0, x1,y1,z1 ) :: Float32], [MATRIX4( ... x16 ) :: Float32]
+ * @type {number}
+ * @readonly
+ */
+const QUERY_ELEMENT_SIZE = 22;
+
+
+export class BatchOcclusionQuery {
+    constructor() {
+        const input_texture = new DataTexture(new Float32Array(1), 1, 1);
+
+        input_texture.format = RedFormat;
+        input_texture.type = FloatType;
+        input_texture.internalFormat = 'R32F';
+        input_texture.generateMipmaps = false;
+        input_texture.wrapT = ClampToEdgeWrapping;
+        input_texture.wrapS = ClampToEdgeWrapping;
+        input_texture.minFilter = NearestFilter;
+        input_texture.magFilter = NearestFilter;
+
+        this.__input_data_texture = input_texture;
+
+        this.__output_data_texture = new WebGLRenderTarget(1, 1, {
+            minFilter: NearestFilter,
+            magFilter: NearestFilter,
+            format: RGBAFormat,
+            type: UnsignedByteType,
+            // internalFormat: 'R8',
+            depthBuffer: false,
+            stencilBuffer: false,
+            wrapS: ClampToEdgeWrapping,
+            wrapT: ClampToEdgeWrapping,
+            generateMipmaps: false
+        });
+
+        this.__size = -1;
+
+        /**
+         *
+         * @type {ShaderMaterial}
+         * @private
+         */
+        this.__material = makeQueryShader();
+        this.__material.defines.ITEM_SIZE = QUERY_ELEMENT_SIZE;
+    }
+
+    /**
+     *
+     * @return {THREE.Texture}
+     */
+    getResultTexture() {
+        return this.__output_data_texture.texture;
+    }
+
+    /**
+     *
+     * @return {number}
+     */
+    getSize() {
+        return this.__size;
+    }
+
+    /**
+     *
+     * @param {number} count
+     */
+    setSize(count) {
+        if (this.__size === count) {
+            return;
+        }
+
+        this.__size = count;
+
+        /**
+         * How many query elements are packed per texture row
+         * @type {number}
+         * @readonly
+         */
+        const TEXTURE_COLUMN_COUNT = max2(
+            Math.ceil(Math.sqrt(count)),
+            4
+        );
+
+        const input_texture = this.__input_data_texture;
+
+        input_texture.dispose();
+
+        const row_count = Math.ceil(count / TEXTURE_COLUMN_COUNT);
+
+        const input_image = input_texture.image;
+
+        input_image.width = TEXTURE_COLUMN_COUNT * QUERY_ELEMENT_SIZE;
+        input_image.height = row_count;
+        input_image.data = new Float32Array(input_image.width * input_image.height);
+
+        this.__output_data_texture.setSize(TEXTURE_COLUMN_COUNT, row_count);
+    }
+
+    /**
+     *
+     * @param {number} index
+     * @param {number[]|Float32Array} aabb bounding box of the queries region
+     * @param {number[]} transform 4x4 transform matrix
+     */
+    setElement(index, aabb, transform) {
+        assert.lessThan(index, this.__size, 'index overflow');
+        assert.isNonNegativeInteger(index, 'index');
+
+        // write query element
+        const address = index * QUERY_ELEMENT_SIZE;
+
+        const input_texture = this.__input_data_texture;
+
+        /**
+         *
+         * @type {Uint8ClampedArray}
+         */
+        const data = input_texture.image.data;
+
+        array_copy(aabb, 0, data, address, 6);
+        array_copy(transform, 0, data, address + 6, 16);
+
+        input_texture.needsUpdate = true;
+    }
+
+    /**
+     *
+     * @param {THREE.WebGLRenderer} renderer
+     * @param {Uint8Array} destination
+     */
+    readResultTexture(renderer, destination) {
+        const rt = this.__output_data_texture;
+
+        renderer.readRenderTargetPixels(rt, 0, 0, rt.width, rt.height, destination);
+    }
+
+    /**
+     *
+     * @param {THREE.WebGLRenderer} renderer
+     * @param {HierarchicalZBuffer} hiz_buffer
+     */
+    execute(renderer, hiz_buffer) {
+        const uniforms = this.__material.uniforms;
+
+        uniforms.utDepth.value = hiz_buffer.getTexture();
+        uniforms.utInput.value = this.__input_data_texture;
+        uniforms.uDepthMipLimits.value.set(hiz_buffer.mip_limits.x, hiz_buffer.mip_limits.y);
+
+        const __rt = renderer.getRenderTarget();
+        renderer.setRenderTarget(this.__output_data_texture);
+
+        renderScreenSpace(renderer, this.__material);
+
+        renderer.setRenderTarget(__rt);
+    }
+}