@woosh/meep-engine 2.33.3 → 2.33.8

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

@@ -0,0 +1,179 @@
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
+import {
+    DoubleSide,
+    LinearFilter,
+    Mesh as ThreeMesh,
+    OrthographicCamera,
+    Scene,
+    ShaderMaterial,
+    UnsignedByteType,
+    WebGLRenderTarget
+} from "three";
+import CheckersTexture from "../../../texture/CheckersTexture.js";
+import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../../../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
+
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ * @returns {string}
+ */
+function defineSamplerType(texture) {
+    switch (texture.format) {
+        case UnsignedByteType:
+            return 'usampler2D';
+        default:
+            return 'sampler2D'
+    }
+}
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ * @param {string} name
+ * @param {string} uv
+ * @returns {string}
+ */
+function sampleTexel(texture, name, uv) {
+    switch (texture.format) {
+        default:
+            return `texture2D(${name}, ${uv})`;
+    }
+}
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ */
+function makeShader(texture) {
+    return new ShaderMaterial({
+
+        vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+        fragmentShader: /* glsl */`
+
+		uniform ${defineSamplerType(texture)} tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel = ${sampleTexel(texture, 'tDiffuse', 'vUv')};
+			gl_FragColor = texel;
+			
+			gl_FragColor.a = 1.0;
+			// gl_FragColor.r *= 255.0;
+
+		}`,
+        uniforms: {
+
+            'tDiffuse': { value: null }
+
+        }
+    });
+}
+
+/**
+ *
+ * @param {number} height
+ * @param {number} width
+ * @param {THREE.Texture} texture
+ * @param {THREE.WebGLRenderer} renderer
+ * @param flipY
+ * @return {{view: View, render: render}}
+ */
+export function buildCanvasViewFromTexture({
+                                               height,
+                                               width,
+                                               texture = CheckersTexture.create(),
+                                               renderer,
+                                               flipY = true
+                                           }) {
+    const canvasView = new CanvasView();
+    canvasView.size.set(width, height);
+
+    const ctx = canvasView.context2d;
+
+    let copyShader = null;
+
+    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const scene = new Scene();
+    scene.add(camera);
+
+    const quad = new ThreeMesh(FULL_SCREEN_TRIANGLE_GEOMETRY, null);
+
+    if (flipY) {
+        quad.scale.y = -1;
+    }
+
+    scene.add(quad);
+
+    const gl = renderer.getContext();
+
+    const renderTargetOptions = {
+        generateMipmaps: false,
+        minFilter: LinearFilter,
+        stencilBuffer: false,
+        depthBuffer: false
+    };
+    const renderTarget = new WebGLRenderTarget(width, height, renderTargetOptions);
+
+    const imageData = ctx.createImageData(width, height);
+
+    let __texture_cached = texture;
+
+    /**
+     *
+     * @return {ShaderMaterial}
+     */
+    function getShader() {
+        if (__texture_cached !== texture || copyShader === null) {
+            copyShader = makeShader(texture);
+
+            copyShader.side = DoubleSide;
+            copyShader.uniforms.tDiffuse.value = texture;
+
+            quad.material = copyShader;
+
+            __texture_cached = texture;
+        }
+
+        return copyShader;
+    }
+
+    const render = () => {
+
+        getShader().uniforms.tDiffuse.value = texture;
+
+        renderer.setRenderTarget(renderTarget);
+
+        renderer.render(scene, camera);
+
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, imageData.data);
+
+
+        ctx.putImageData(imageData, 0, 0)
+
+        renderer.setRenderTarget(null);
+    };
+
+    return {
+        view: canvasView,
+        render,
+        set texture(v) {
+
+            texture = v;
+
+            getShader().uniforms.tDiffuse.value = v;
+        }
+    }
+}

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);