@woosh/meep-engine/src/engine/ecs/parent/testHuDPerf.js

Pure JavaScript game engine. Fully featured and production ready.

import { EngineHarness } from "../../EngineHarness.js";
import { ShadedGeometrySystem } from "../../graphics/ecs/mesh-v2/ShadedGeometrySystem.js";
import { Transform } from "../transform/Transform.js";
import { EngineConfiguration } from "../../EngineConfiguration.js";
import { AttachmentSystem } from "../attachment/AttachmentSystem.js";
import { GameAssetType } from "../../asset/GameAssetType.js";
import { Sampler2D } from "../../graphics/texture/sampler/Sampler2D.js";
import Entity from "../Entity.js";
import HeadsUpDisplay from "../gui/hud/HeadsUpDisplay.js";
import ViewportPosition from "../gui/position/ViewportPosition.js";
import GUIElement from "../gui/GUIElement.js";
import EmptyView from "../../../view/elements/EmptyView.js";
import HeadsUpDisplaySystem from "../gui/hud/HeadsUpDisplaySystem.js";
import ViewportPositionSystem from "../gui/position/ViewportPositionSystem.js";
import GUIElementSystem from "../gui/GUIElementSystem.js";
import { ImageRGBADataLoader } from "../../asset/loaders/image/ImageRGBADataLoader.js";
import LightSystem from "../../graphics/ecs/light/LightSystem.js";
import { CameraSystem } from "../../graphics/ecs/camera/CameraSystem.js";

const eh = new EngineHarness();

/**
 *
 * @param {Engine} engine
 * @return {EngineConfiguration}
 */
function makeConfig(engine) {
    const r = new EngineConfiguration();

    r.addSystem(new ShadedGeometrySystem(engine));
    r.addSystem(new AttachmentSystem());
    r.addSystem(new HeadsUpDisplaySystem(engine.graphics));
    r.addSystem(new ViewportPositionSystem(engine.gameView.size));
    r.addSystem(new GUIElementSystem(engine.gui.view, engine));
    r.addSystem(new LightSystem(engine, {
        shadowResolution: 1024
    }));

    r.addLoader(GameAssetType.Image, new ImageRGBADataLoader());

    return r;
}

/**
 *
 * @param {Engine} engine
 */
async function main(engine) {


    EngineHarness.buildBasics({ engine, enableWater: false })


    const ecd = engine.entityManager.dataset;

    const active_camera = CameraSystem.getFirstActiveCamera(ecd);
    const camera_component = active_camera.component;

    camera_component.autoClip = false;
    camera_component.object.far = 100;

    const asset = await engine.assetManager.promise('data/textures/icons/Sci-Fi Ability Icons 1/134.PNG', GameAssetType.Image);

    const sampler = asset.create();

    const sampler2D = new Sampler2D(sampler.data, sampler.itemSize, sampler.width, sampler.height);

    const sample = [];
    const res = 128;

    const texel_size = 5;
    const grid_size = 18;

    for (let i = 0; i < res; i++) {
        const u = i / (res - 1);
        for (let j = 0; j < res; j++) {
            const v = j / (res - 1);

            sampler2D.sampleBicubicUV(u, v, sample);

            const view = new EmptyView({
                css: {
                    background: `rgb(${sample[0]}, ${sample[1]}, ${sample[2]})`,
                    height: texel_size + 'px',
                    width: texel_size + 'px',
                    willChange: 'transform'
                }
            });

            const transform = new Transform();

            transform.position.set(
                u * grid_size + 1,
                1,
                v * grid_size + 1
            );

            new Entity()
                .add(transform)
                .add(new HeadsUpDisplay())
                .add(new ViewportPosition())
                .add(GUIElement.fromView(view))
                .build(ecd);
        }
    }

}

/**
 *
 * @param {EngineHarness} harness
 */
async function init(harness) {
    const engine = eh.engine;

    await makeConfig(engine).apply(engine);

    await eh.initialize();

    main(engine);
}

init(eh);