@woosh/meep-engine 2.40.0 → 2.41.0

package/engine/graphics/impostors/octahedral/README.md

@@ -0,0 +1,29 @@
+# Octahedral Impostor system
+
+This system is based on the idea presented by Ryan Brucks
+
+Conceptually, the system has 2 parts:
+1. Baking. This is where we take the source mesh, and prepare assets for impostor. These assets are mainly textures, copied from materials of the source meshes as well as depth fields.
+2. Drawing. Assets prepared during "Baking" part are being rendered, using a simple geometry (6 triangles), and performing ray marching as well as shading inside the pixel shader. 
+
+This is inherently a deferred rendering technique, where an impostor asset is represented as a collection of pre-rendered G-Buffers from different view angles, those "frames" are looked up at runtime in the shader to create the best approximation of a G-Buffer for the given projection transform, and the shading is performed. Depth is written out as well, this allows impostors to not only exist in color space, but also in depth space. The fact that impostors write depth gives them ability to be used for shadow mapping as well.
+
+## Limitations
+* Materials. Currently only PBR rendering is supported with the following attributes recorded
+  * Albedo (vertex colors are included as well)
+  * Normal
+  * Metalness
+  * Roughness
+  * Ambient Occlusion
+* Animations are not supported, neither vertex, nor pixel-shader based ones. The whole impostor can move around and be transformed, but the contents are static and pre-baked.
+* When camera moves too close to the impostor, or an extreme projection is applied - artefacts will become visible. In case of camera getting too close - parts of the mesh that are occluded by outer shell will not become visible in the impostor, as that information is simply not captured. In cases of extreme projection - certain parts of the captured G-Buffer may undergo warping and stretching converting a handful of baked pixel to a larger number of on-screen pixels, creating pixelation and smearing. Note that impostors are not a replacement for your meshes, so use them sensibly.
+
+
+---
+references:
+
+- [2018] [Octahedral Impostors](https://shaderbits.com/blog/octahedral-impostors) by Ryan Brucks
+- [2018] https://github.com/xraxra/IMP
+- [2018] https://github.com/wojtekpil/Godot-Octahedral-Impostors
+- [2011] BN11 : "Real-time Realistic Rendering and Lighting of Forests" by Eric Bruneton, Fabrice Neyret
+- [2007] TSK07: "Fast (Spherical) Light Field Rendering with Per-Pixel Depth." by Severin Todt, Christof Rezk-Salama and Andreas Kolb

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

@@ -0,0 +1,42 @@
+import { vec3 } from "gl-matrix";
+import { max2 } from "../../../../../core/math/max2.js";
+
+/**
+ * Computes radius of bounding sphere around origin for given group of objects
+ *
+ * NOTE: This may seem pointless, but by doing this computation on per-vertex basis we get the tightest possible bounds,
+ * allowing us to get the best possible texture space utilization.
+ * @param {{mesh:ShadedGeometry, transform:mat4}[]} objects
+ * @returns {number}
+ */
+export function compute_bounding_sphere(objects) {
+    let distance = 0;
+
+    const v3 = [];
+    const n = objects.length;
+    for (let i = 0; i < n; i++) {
+        const object = objects[i];
+
+        const attribute = object.mesh.geometry.getAttribute('position');
+
+        const array = attribute.array;
+
+        const transform = object.transform;
+
+        const n = array.length;
+
+        for (let j = 0; j < n; j += 3) {
+            v3[0] = array[j];
+            v3[1] = array[j + 1];
+            v3[2] = array[j + 2];
+
+            vec3.transformMat4(v3, v3, transform);
+
+            distance = max2(distance, vec3.length(v3));
+        }
+
+    }
+
+
+    return distance;
+}

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

@@ -0,0 +1,88 @@
+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
+ */
+export function prepare_bake_material(bake_material, source_material, cleanup_signal) {
+
+
+    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);
+    }
+
+    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,138 @@
+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 { ImpostorShaderStandard } from "./shader/ImpostorShaderStandard.js";
+import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {Promise<void>}
+ */
+async function main(engine) {
+    await EngineHarness.buildBasics({
+        engine
+    });
+
+    const baker = new ImpostorBaker();
+    const renderer = engine.graphics.renderer;
+    baker.renderer = renderer;
+
+
+    // const gltf_asset = await engine.assetManager.promise('data/models/RTS_Buildings_Humans/18/Building_R_18_out/Building_R_18.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Barrel/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Town_Hall/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/LowPolyTownshipSet/Small_house/Small_house.gltf', GameAssetType.ModelGLTF_JSON);
+    const gltf_asset = await engine.assetManager.promise('data/models/MOBA and Tower Defense/Tree_03.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/samples/transform-hierarchy.glb', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('data/models/sponza-pbr/gltf/sponza.glb', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/gnutti_not_optimized/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/isiflow_Oct_15_21/2/model.gltf', GameAssetType.ModelGLTF_JSON);
+    // const gltf_asset = await engine.assetManager.promise('moicon/Kople/EVCharger1.gltf', 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()
+    //     }
+    // );
+
+    const id = baker.bake({
+        objects,
+        frames: 12,
+        resolution: 1024,
+        type: ImpostorCaptureType.Hemisphere
+    });
+
+    console.log(id);
+
+    const ctrl = buildCanvasViewFromTexture({
+        texture: id.rt.texture[1],
+        renderer: renderer,
+        // swizzle: ['a', 'a', 'a', 1]
+        swizzle: ['r', 'g', 'b', 1]
+    });
+    ctrl.view.css({
+        opacity: 0.2
+    });
+    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);
+
+
+    new EntityBuilder()
+        .add(new Transform())
+        .add(ShadedGeometry.from(new PlaneBufferGeometry(1, 1, 1), new ImpostorShaderStandard()))
+        .build(ecd);
+}
+
+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));
+
+        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,157 @@
+//
+
+import { Color, GLSL3, RawShaderMaterial, 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 vec2 repeat;
+
+    in vec3 vNormal;
+    in vec2 vUv;
+    in mat3 TBN;
+    in vec3 vColor;
+    in float depth;
+
+    void main() {    
+        // write color to G-Buffer
+        vec4 diffuse_texture_sample = texture( tDiffuse, vUv);
+        
+        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(tNormal, vUv).rgb*2.0 - 1.0;
+        vec3 normal = normalize(TBN * normal_sample);
+        
+        gNormal = vec4( normal*0.5 + 0.5, depth);
+        
+        float roughness = texture(tRoughness, vUv).g;
+        float metalness = texture(tMetalness, vUv).b;
+        float occlusion = texture(tOcclusion, vUv).r;
+        vec3 emissive = texture(tEmissive, vUv).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)
+                }
+            }
+        });
+
+        this.defaultAttributeValues.tangent = [
+            1, 0, 0, 1
+        ];
+    }
+}