@woosh/meep-engine 2.40.1 → 2.42.0

package/engine/graphics/impostors/octahedral/bake/prepare_bake_material.js

@@ -0,0 +1,117 @@
+import { DataTexture, UnsignedByteType } from "three";
+
+/**
+ *
+ * @param contents
+ * @param {Signal} cleanup_signal
+ * @returns {DataTexture}
+ */
+function onePixelTexture(contents, cleanup_signal) {
+    const t = new DataTexture(new Uint8Array(contents), 1, 1);
+
+    t.generateMipmaps = false;
+    t.needsUpdate = true;
+    t.type = UnsignedByteType;
+
+    cleanup_signal.addOne(t.dispose, t);
+
+    return t;
+}
+
+
+/**
+ *
+ * @param {THREE.RawShaderMaterial} bake_material
+ * @param {THREE.Material | THREE.MeshStandardMaterial} source_material
+ * @param {Signal} cleanup_signal
+ * @param {number} anisotropy
+ */
+export function prepare_bake_material({
+                                          bake_material,
+                                          source_material,
+                                          cleanup_signal,
+                                          anisotropy
+                                      }) {
+
+
+    const target_uniforms = bake_material.uniforms;
+
+
+    let texture_diffuse = null;
+    let texture_normal = null;
+    let texture_roughness = null;
+    let texture_metalness = null;
+    let texture_occlusion = null;
+    let texture_emissive = null;
+
+    if (source_material.isMeshStandardMaterial) {
+        texture_diffuse = source_material.map;
+        texture_normal = source_material.normalMap;
+        texture_roughness = source_material.roughnessMap;
+        texture_metalness = source_material.metalnessMap;
+        texture_occlusion = source_material.aoMap;
+        texture_emissive = source_material.emissiveMap;
+    } else {
+        if (source_material.map !== undefined && source_material.map !== null) {
+            texture_diffuse = source_material.map;
+        }
+    }
+
+    if (texture_diffuse === null) {
+        // plug white texture
+        texture_diffuse = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+    }
+    if (texture_roughness === null) {
+        texture_roughness = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+    }
+
+    if (texture_metalness === null) {
+        texture_metalness = onePixelTexture([0, 0, 0, 0], cleanup_signal);
+    }
+
+    if (texture_occlusion === null) {
+        texture_occlusion = onePixelTexture([255, 255, 255, 255], cleanup_signal);
+    }
+
+    if (texture_emissive === null) {
+        texture_emissive = onePixelTexture([0, 0, 0, 0], cleanup_signal);
+    }
+
+    // set rendering parameters on textures
+    [
+        texture_diffuse,
+        texture_emissive,
+        texture_occlusion,
+        texture_metalness,
+        texture_roughness,
+        texture_normal
+    ].forEach(t => {
+        if (t === null) {
+            return;
+        }
+
+        const _old_a = t.anisotropy;
+
+        t.anisotropy = anisotropy;
+
+        cleanup_signal.addOne(() => {
+            t.anisotropy = _old_a;
+        });
+    });
+
+    target_uniforms.tDiffuse.value = texture_diffuse;
+    target_uniforms.tNormal.value = texture_normal;
+    target_uniforms.tRoughness.value = texture_roughness;
+    target_uniforms.tMetalness.value = texture_metalness;
+    target_uniforms.tOcclusion.value = texture_occlusion;
+    target_uniforms.tEmissive.value = texture_emissive;
+
+
+    target_uniforms.color.value.copy(source_material.color);
+
+    // TODO process texture transforms (offset, rotation, repeat)
+
+    bake_material.side = source_material.side;
+
+    bake_material.uniformsNeedUpdate = true;
+}

package/engine/graphics/impostors/octahedral/grid/HemiOctahedralUvEncoder.js

@@ -0,0 +1,20 @@
+import { UvEncoder } from "./UvEncoder.js";
+import { vec3 } from "gl-matrix";
+
+export class HemiOctahedralUvEncoder extends UvEncoder {
+    uv_to_unit(output, input) {
+        const px = input[0] - input[1];
+        const pz = -1 + input[0] + input[1];
+
+        const abs_x = Math.abs(px);
+        const abs_z = Math.abs(pz);
+
+        const r_y = 1 - (abs_x + abs_z);
+
+        output[0] = px;
+        output[1] = r_y;
+        output[2] = pz;
+
+        vec3.normalize(output, output);
+    }
+}

package/engine/graphics/impostors/octahedral/grid/OctahedralUvEncoder.js

@@ -0,0 +1,25 @@
+import { UvEncoder } from "./UvEncoder.js";
+import { vec3 } from "gl-matrix";
+
+export class OctahedralUvEncoder extends UvEncoder {
+    uv_to_unit(output, input) {
+        let px = input[0] * 2 - 1;
+        let pz = input[1] * 2 - 1;
+
+        const abs_x = Math.abs(px);
+        const abs_z = Math.abs(pz);
+        const py = 1 - abs_x - abs_z;
+
+        if (py < 0) {
+            px = (px > 0 ? 1 : -1) * (1 - abs_z);
+            pz = (pz > 0 ? 1 : -1) * (1 - abs_x);
+        }
+
+        output[0] = px;
+        output[1] = py;
+        output[2] = pz;
+
+        vec3.normalize(output, output);
+    }
+
+}

package/engine/graphics/impostors/octahedral/grid/UvEncoder.js

@@ -0,0 +1,21 @@
+export class UvEncoder {
+    /**
+     *
+     * @param {number[]|vec3} output
+     * @param {number[]|vec2} input
+     * @returns {void}
+     */
+    uv_to_unit(output, input) {
+        throw new Error('Not implemented');
+    }
+
+    /**
+     *
+     * @param {number[]|vec2} output
+     * @param {number[]|vec3} input
+     * @returns {void}
+     */
+    unit_to_uv(output, input) {
+        throw new Error('Not implemented');
+    }
+}

package/engine/graphics/impostors/octahedral/prototypeBaker.js

@@ -0,0 +1,237 @@
+import { EngineHarness } from "../../../EngineHarness.js";
+import { ImpostorBaker } from "./ImpostorBaker.js";
+import { ShadedGeometry } from "../../ecs/mesh-v2/ShadedGeometry.js";
+import sampler2D2Canvas from "../../texture/sampler/Sampler2D2Canvas.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import EntityBuilder from "../../../ecs/EntityBuilder.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
+import GUIElement from "../../../ecs/gui/GUIElement.js";
+import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
+import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
+import { WebGLRendererPool } from "../../render/RendererPool.js";
+import { buildCanvasViewFromTexture } from "../../render/visibility/hiz/buildCanvasViewFromTexture.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { GameAssetType } from "../../../asset/GameAssetType.js";
+import { three_object_to_entity_composition } from "../../ecs/mesh-v2/three_object_to_entity_composition.js";
+import { Transform } from "../../../ecs/transform/Transform.js";
+import { GLTFAssetLoader } from "../../../asset/loaders/GLTFAssetLoader.js";
+import { ImpostorCaptureType } from "./ImpostorCaptureType.js";
+import { PlaneBufferGeometry } from "three";
+import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
+import { ImpostorShaderV0 } from "./shader/ImpostorShaderV0.js";
+import Quaternion from "../../../../core/geom/Quaternion.js";
+import { DEG2RAD } from "three/src/math/MathUtils.js";
+import { SGMesh } from "../../ecs/mesh-v2/aggregate/SGMesh.js";
+import { SGMeshSystem } from "../../ecs/mesh-v2/aggregate/SGMeshSystem.js";
+import { ShadedGeometryFlags } from "../../ecs/mesh-v2/ShadedGeometryFlags.js";
+import { TransformAttachmentSystem } from "../../../ecs/transform-attachment/TransformAttachmentSystem.js";
+import { BehaviorComponent } from "../../../intelligence/behavior/ecs/BehaviorComponent.js";
+import Vector3 from "../../../../core/geom/Vector3.js";
+import { BehaviorSystem } from "../../../intelligence/behavior/ecs/BehaviorSystem.js";
+import { RotationBehavior } from "../../../../../model/game/util/behavior/RotationBehavior.js";
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {Promise<void>}
+ */
+async function main(engine) {
+    await EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        cameraFieldOfView: 45
+    });
+
+    const baker = new ImpostorBaker();
+    const renderer = engine.graphics.renderer;
+    baker.renderer = renderer;
+
+
+    const path = 'data/models/LowPolyTownshipSet/Small_house/Small_house.gltf';
+    // const path = 'data/models/LowPolyTownshipSet/Barrel/model.gltf';
+    // const path = 'data/models/LowPolyTownshipSet/Town_Hall/model.gltf';
+    // const path = 'data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf';
+    // const path = 'data/models/MOBA and Tower Defense/Tree_01.gltf';
+    // const path = 'data/models/samples/transform-hierarchy.glb';
+    // const path = 'data/models/sponza-pbr/gltf/sponza.glb';
+    // const path = 'moicon/gnutti_not_optimized/model.gltf';
+    // const path = 'moicon/isiflow_Oct_15_21/1/model.gltf';
+    // const path = 'moicon/Kople/EVCharger1.gltf';
+
+    const gltf_asset = await engine.assetManager.promise(path, 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
+            })
+            // objects.push({
+            //     mesh: ShadedGeometry.from(new BoxBufferGeometry(), sg.material),
+            //     transform: mat4.create()
+            // })
+        }
+    });
+
+    // objects.push(
+    //     {
+    //         mesh: ShadedGeometry.from(new BoxBufferGeometry(), new MeshStandardMaterial({
+    //             color: 0xFF0000
+    //         })),
+    //         transform: mat4.create()
+    //     }
+    // );
+
+    // console.profile('bake');
+    const id = baker.bake({
+        objects,
+        frames: 16,
+        resolution: 2048,
+        type: ImpostorCaptureType.FullSphere
+    });
+    // console.profileEnd('bake');
+
+    console.log(id);
+
+    const ctrl = buildCanvasViewFromTexture({
+        texture: id.rt.texture[0],
+        renderer: renderer,
+        // swizzle: ['a', 'a', 'a', 1]
+        // swizzle: ['r', 'g', 'b', 1]
+        swizzle: ['r', 'g', 'b', 'a']
+    });
+    ctrl.view.css({
+        opacity: 1
+    });
+    ctrl.render();
+
+    const cv = new CanvasView();
+    cv.size.set(id.atlas.width, id.atlas.height);
+    cv.css({
+        background: "rgba(0,0,0,0.1)"
+    });
+
+    sampler2D2Canvas(id.atlas, 255, 0, cv.el);
+
+    WebGLRendererPool.global.release(renderer);
+
+    new EntityBuilder()
+        .add(new ViewportPosition())
+        .add(GUIElement.fromView(cv))
+    // .build(engine.entityManager.dataset);
+
+    const ecd = engine.entityManager.dataset;
+    new EntityBuilder()
+        .add(new ViewportPosition({
+            offset: new Vector2(0, 0)
+        }))
+        .add(GUIElement.fromView(ctrl.view))
+    // .build(ecd);
+
+    const t0 = Transform.fromJSON({
+        position: { x: 10, y: 0.5, z: 10 },
+        scale: 3,
+        rotation: Quaternion.fromEulerAngles(0, 90 * DEG2RAD, 0)
+    });
+
+    t0.scale.setScalar(3 / (id.sphere_radius * 2));
+
+    const entity_impostor = make_impostor_entity(id, t0);
+    entity_impostor.build(ecd);
+
+    const t1 = new Transform();
+    t1.copy(t0);
+    t1.position._add(3, 0, 0);
+    // t1.scale.setScalar(1.9);
+
+    const sg_mesh = SGMesh.fromURL(path);
+
+    sg_mesh.castShadow = false;
+    sg_mesh.receiveShadow = false;
+
+    const entity_true_mesh = new EntityBuilder();
+    entity_true_mesh
+        .add(sg_mesh)
+        .add(t1)
+        .build(ecd);
+
+
+    // [entity_true_mesh, entity_impostor].forEach(e => make_spin(e));
+}
+
+/**
+ *
+ * @param {EntityBuilder} entity
+ * @param {number} [speed]
+ * @param {Vector3} [axis]
+ */
+function make_spin(entity, speed = 1, axis = Vector3.up) {
+    /**
+     *
+     * @type {Transform}
+     */
+    const t = entity.getComponent(Transform);
+
+    if (t === null) {
+        return;
+    }
+
+    entity.add(BehaviorComponent.fromOne(RotationBehavior.fromJSON({
+        axis, speed
+    })));
+}
+
+/**
+ *
+ * @param {ImpostorDescription} id
+ * @param {Transform} t
+ * @returns {EntityBuilder}
+ */
+function make_impostor_entity(id, t = new Transform()) {
+
+    const mat = new ImpostorShaderV0();
+
+    mat.uniforms.tBase.value = id.rt.texture[0];
+    mat.uniforms.tGeometry.value = id.rt.texture[1];
+    mat.uniforms.uFrames.value = id.frame_count;
+    mat.uniforms.uOffset.value.set(id.offset[0], id.offset[1], id.offset[2]);
+    mat.uniforms.uRadius.value = id.sphere_radius;
+    mat.uniforms.uIsFullSphere.value = id.capture_type === ImpostorCaptureType.FullSphere;
+
+    const transform = new Transform();
+
+    transform.copy(t);
+
+    const sg = ShadedGeometry.from(new PlaneBufferGeometry(1, 1, 1), mat);
+
+    sg.depth_material = mat;
+    sg.clearFlag(ShadedGeometryFlags.CastShadow);
+    sg.clearFlag(ShadedGeometryFlags.ReceiveShadow);
+
+    return new EntityBuilder()
+        .add(transform)
+        .add(sg)
+        ;
+}
+
+new EngineHarness().initialize({
+    configuration(config, engine) {
+        config.addSystem(new GUIElementSystem(engine.gui.view, engine));
+        config.addSystem(new ViewportPositionSystem(engine.graphics.viewport.size));
+        config.addSystem(new ShadedGeometrySystem(engine));
+        config.addSystem(new SGMeshSystem(engine));
+        config.addSystem(new TransformAttachmentSystem());
+        config.addSystem(new BehaviorSystem(engine));
+
+        const gltfAssetLoader = new GLTFAssetLoader();
+
+        config.addLoader(GameAssetType.ModelGLTF, gltfAssetLoader);
+        config.addLoader(GameAssetType.ModelGLTF_JSON, gltfAssetLoader);
+    }
+}).then(main);

package/engine/graphics/impostors/octahedral/shader/BakeShaderStandard.js

@@ -0,0 +1,196 @@
+//
+
+import { Color, GLSL3, RawShaderMaterial, Vector2, Vector4 } from "three";
+
+const shader_vx = `
+    in vec3 position;
+    in vec3 normal;
+    in vec2 uv;
+    in vec3 color;
+    in vec4 tangent;
+
+    out vec3 vNormal;
+    out vec3 vTangent;
+    out vec3 vBinormal;
+    
+    out vec2 vUv;
+    out mat3 TBN;
+    out vec3 vColor;
+    out float depth;
+
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    uniform mat3 normalMatrix;
+    uniform vec4 projection_params;
+    
+
+    void main() {
+
+        vUv = uv;
+
+        vColor = color;
+
+        // get smooth normals
+        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+
+        vec3 transformedNormal = normalMatrix * normal;
+        
+        vec3 T = normalize(vec3(modelViewMatrix * tangent) );
+        vNormal = normalize( transformedNormal );
+        vec3 N = vNormal;
+        vec3 B = cross(N,T);
+
+        // construct Tangent Bitangent Normal matrix
+        TBN = mat3(T,B,N);
+        
+
+        gl_Position = projectionMatrix * mvPosition;
+
+
+       depth = 1.0 + (mvPosition.z * projection_params.w);
+    }
+`;
+
+const shader_fg = `
+    precision highp float;
+    precision highp int;
+
+    layout(location = 0) out vec4 gColor;
+    layout(location = 1) out vec4 gNormal;
+    layout(location = 2) out vec4 gORM;
+
+    uniform vec3 color;
+
+    uniform sampler2D tDiffuse;
+    uniform sampler2D tNormal;
+    uniform sampler2D tRoughness;
+    uniform sampler2D tMetalness;
+    uniform sampler2D tOcclusion;
+    uniform sampler2D tEmissive;
+    
+    uniform float uTextureLODBias;
+    uniform vec2 uAtlasResolution;
+    
+    uniform vec2 repeat;
+
+    in vec3 vNormal;
+    in vec2 vUv;
+    in mat3 TBN;
+    in vec3 vColor;
+    in float depth;
+   
+    vec4 texture_supersample_4(in sampler2D sampler, in vec2 uv, float lod_bias){
+        vec2 half_pixel_size = vec2(0.5) / uAtlasResolution;
+        
+        // per pixel partial derivatives
+        vec2 dx = dFdx(uv.xy);
+        vec2 dy = dFdy(uv.xy);
+        // rotated grid uv offsets
+        vec2 uvOffsets = vec2(0.125, 0.375);
+        vec4 offsetUV = vec4(0.0, 0.0, 0.0, uTextureLODBias);
+        
+        float bias = -1.0 + lod_bias;
+        
+        // supersampled using 2x2 rotated grid
+        vec4 col;
+        offsetUV.xy = uv.xy + uvOffsets.x * dx + uvOffsets.y * dy;
+        col += texture(sampler, offsetUV.xy, bias);
+        offsetUV.xy = uv.xy - uvOffsets.x * dx - uvOffsets.y * dy;
+        col += texture(sampler, offsetUV.xy, bias);
+        offsetUV.xy = uv.xy + uvOffsets.y * dx - uvOffsets.x * dy;
+        col += texture(sampler, offsetUV.xy, bias);
+        offsetUV.xy = uv.xy - uvOffsets.y * dx + uvOffsets.x * dy;
+        col += texture(sampler, offsetUV.xy, bias);
+        col *= 0.25;
+
+        return col;
+    }
+
+    void main() {    
+        // write color to G-Buffer
+        vec4 diffuse_texture_sample = texture_supersample_4( tDiffuse, vUv, uTextureLODBias);
+        
+        if(diffuse_texture_sample.a < 0.5){
+            // alpha masking
+            discard;
+        }
+        
+        gColor = diffuse_texture_sample;
+        gColor.rgb *= vColor;
+        gColor.rgb *= color;
+
+        // write normals to G-Buffer
+        // see https://learnopengl.com/Advanced-Lighting/Normal-Mapping
+        vec3 normal_sample = texture_supersample_4(tNormal, vUv,uTextureLODBias).rgb*2.0 - 1.0;
+        vec3 normal = normalize(TBN * normal_sample);
+        
+        gNormal = vec4( normal*0.5 + 0.5, depth);
+        
+        float roughness = texture_supersample_4(tRoughness, vUv,uTextureLODBias).g;
+        float metalness = texture_supersample_4(tMetalness, vUv,uTextureLODBias).b;
+        float occlusion = texture_supersample_4(tOcclusion, vUv,uTextureLODBias).r;
+        vec3 emissive = texture_supersample_4(tEmissive, vUv,uTextureLODBias).rgb;
+
+        gORM = vec4(occlusion, roughness, metalness, 1.0);
+    }
+`;
+
+/**
+ * PBR shader:
+ *  - albedo + alpha
+ *  - normal
+ *  - roughness
+ *  - metalness
+ *  - ambient occlusion
+ */
+export class BakeShaderStandard extends RawShaderMaterial {
+    constructor() {
+        super({
+            vertexShader: shader_vx,
+            fragmentShader: shader_fg,
+            glslVersion: GLSL3,
+            uniforms: {
+                color: {
+                    value: new Color(1, 1, 1)
+                },
+                tDiffuse: {
+                    value: null
+                },
+                tNormal: {
+                    value: null
+                },
+                tRoughness: {
+                    value: null
+                },
+                tMetalness: {
+                    value: null
+                },
+                tOcclusion: {
+                    value: null
+                },
+                tEmissive: {
+                    value: null
+                },
+                /**
+                 * @see https://docs.unity3d.com/2020.3/Documentation/Manual/SL-UnityShaderVariables.html
+                 */
+                projection_params: {
+                    value: new Vector4(0, 0, 0, 0)
+                },
+                /**
+                 * Bias texture LOD, -0.5 pushes MIP switching a half a LOD further away, and produces more crisp-looking results
+                 */
+                uTextureLODBias:{
+                    value:-0.5
+                },
+                uAtlasResolution:{
+                    value: new Vector2(1,1)
+                }
+            }
+        });
+
+        this.defaultAttributeValues.tangent = [
+            1, 0, 0, 1
+        ];
+    }
+}