@woosh/meep-engine 2.41.0 → 2.42.1

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

@@ -1,42 +1,45 @@
-import { vec3 } from "gl-matrix";
-import { max2 } from "../../../../../core/math/max2.js";
+import { Miniball } from "../../../../../core/geom/packing/miniball/Miniball.js";
+import { PointSet } from "../../../../../core/geom/packing/miniball/PointSet.js";
+import { apply_mat4_transform_to_v3_array } from "../../../../../core/geom/3d/apply_mat4_transform_to_v3_array.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;
+    let total_point_count = 0;
+    const object_count = objects.length;
 
-    const v3 = [];
-    const n = objects.length;
-    for (let i = 0; i < n; i++) {
+    for (let i = 0; i < object_count; i++) {
         const object = objects[i];
 
-        const attribute = object.mesh.geometry.getAttribute('position');
+        const geometry = object.mesh.geometry;
 
-        const array = attribute.array;
+        const attribute = geometry.getAttribute('position');
 
-        const transform = object.transform;
+        total_point_count += attribute.count;
+    }
+
+    const final_buffer = new Float32Array(total_point_count * 3);
+
+    let pointer = 0;
+
+    for (let i = 0; i < object_count; i++) {
+        const object = objects[i];
 
-        const n = array.length;
+        const geometry = object.mesh.geometry;
 
-        for (let j = 0; j < n; j += 3) {
-            v3[0] = array[j];
-            v3[1] = array[j + 1];
-            v3[2] = array[j + 2];
+        const attribute = geometry.getAttribute('position');
 
-            vec3.transformMat4(v3, v3, transform);
+        const source_length = attribute.array.length;
 
-            distance = max2(distance, vec3.length(v3));
-        }
+        apply_mat4_transform_to_v3_array(attribute.array, 0, final_buffer, pointer, attribute.count, object.transform);
 
+        pointer += source_length;
     }
 
+    const points = new PointSet(total_point_count, 3, final_buffer);
+    const miniball = new Miniball(points);
 
-    return distance;
+    return [...miniball.center(), miniball.radius()];
 }

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

@@ -0,0 +1,37 @@
+import { max2 } from "../../../../../core/math/max2.js";
+import {
+    sphere_radius_sqr_from_v3_array_transformed
+} from "../../../../../core/geom/3d/sphere/sphere_radius_sqr_from_v3_array_transformed.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_radius_only(objects) {
+    let distance_sqr = 0;
+
+    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;
+
+        const radius2 = sphere_radius_sqr_from_v3_array_transformed(array, n, transform);
+
+        distance_sqr = max2(distance_sqr, radius2);
+
+    }
+
+
+    return Math.sqrt(distance_sqr);
+}

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

@@ -18,13 +18,20 @@ function onePixelTexture(contents, cleanup_signal) {
     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) {
+export function prepare_bake_material({
+                                          bake_material,
+                                          source_material,
+                                          cleanup_signal,
+                                          anisotropy
+                                      }) {
 
 
     const target_uniforms = bake_material.uniforms;
@@ -70,6 +77,28 @@ export function prepare_bake_material(bake_material, source_material, cleanup_si
         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;

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

@@ -9,7 +9,7 @@ export class HemiOctahedralUvEncoder extends UvEncoder {
         const abs_x = Math.abs(px);
         const abs_z = Math.abs(pz);
 
-        const r_y = 1 - abs_x - abs_z;
+        const r_y = 1 - (abs_x + abs_z);
 
         output[0] = px;
         output[1] = r_y;

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

@@ -17,8 +17,18 @@ 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";
+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 "../../../intelligence/behavior/util/RotationBehavior.js";
 
 /**
  *
@@ -27,7 +37,9 @@ import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js"
  */
 async function main(engine) {
     await EngineHarness.buildBasics({
-        engine
+        engine,
+        enableWater: false,
+        cameraFieldOfView: 45
     });
 
     const baker = new ImpostorBaker();
@@ -35,16 +47,18 @@ async function main(engine) {
     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 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());
 
@@ -74,23 +88,26 @@ async function main(engine) {
     //     }
     // );
 
+    console.profile('bake');
     const id = baker.bake({
         objects,
-        frames: 12,
-        resolution: 1024,
-        type: ImpostorCaptureType.Hemisphere
+        frames: 16,
+        resolution: 2048,
+        type: ImpostorCaptureType.FullSphere
     });
+    console.profileEnd('bake');
 
     console.log(id);
 
     const ctrl = buildCanvasViewFromTexture({
-        texture: id.rt.texture[1],
+        texture: id.rt.texture[0],
         renderer: renderer,
         // swizzle: ['a', 'a', 'a', 1]
-        swizzle: ['r', 'g', 'b', 1]
+        // swizzle: ['r', 'g', 'b', 1]
+        swizzle: ['r', 'g', 'b', 'a']
     });
     ctrl.view.css({
-        opacity: 0.2
+        opacity: 1
     });
     ctrl.render();
 
@@ -115,13 +132,92 @@ async function main(engine) {
             offset: new Vector2(0, 0)
         }))
         .add(GUIElement.fromView(ctrl.view))
-        .build(ecd);
+    // .build(ecd);
 
+    const t0 = Transform.fromJSON({
+        position: { x: 10, y: 0.5, z: 10 },
+        scale: 3,
+        rotation: Quaternion.fromEulerAngles(0, 90 * DEG2RAD, 0)
+    });
 
-    new EntityBuilder()
-        .add(new Transform())
-        .add(ShadedGeometry.from(new PlaneBufferGeometry(1, 1, 1), new ImpostorShaderStandard()))
+    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({
@@ -129,6 +225,9 @@ new EngineHarness().initialize({
         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();
 

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

@@ -1,6 +1,6 @@
 //
 
-import { Color, GLSL3, RawShaderMaterial, Vector4 } from "three";
+import { Color, GLSL3, RawShaderMaterial, Vector2, Vector4 } from "three";
 
 const shader_vx = `
     in vec3 position;
@@ -68,6 +68,9 @@ const shader_fg = `
     uniform sampler2D tOcclusion;
     uniform sampler2D tEmissive;
     
+    uniform float uTextureLODBias;
+    uniform vec2 uAtlasResolution;
+    
     uniform vec2 repeat;
 
     in vec3 vNormal;
@@ -75,10 +78,37 @@ const shader_fg = `
     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( tDiffuse, vUv);
+        vec4 diffuse_texture_sample = texture_supersample_4( tDiffuse, vUv, uTextureLODBias);
         
         if(diffuse_texture_sample.a < 0.5){
             // alpha masking
@@ -91,15 +121,15 @@ const shader_fg = `
 
         // 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_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(tRoughness, vUv).g;
-        float metalness = texture(tMetalness, vUv).b;
-        float occlusion = texture(tOcclusion, vUv).r;
-        vec3 emissive = texture(tEmissive, vUv).rgb;
+        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);
     }
@@ -146,6 +176,15 @@ export class BakeShaderStandard extends RawShaderMaterial {
                  */
                 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)
                 }
             }
         });