@woosh/meep-engine 2.41.0 → 2.42.0

package/engine/graphics/geometry/buffered/computeGeometryEquality.js

@@ -1,4 +1,4 @@
-import { isArrayEqualStrict } from "../../../../core/collection/array/isArrayEqualStrict.d.ts";
+import { isArrayEqualStrict } from "../../../../core/collection/array/isArrayEqualStrict.js";
 import { is_typed_array_equals } from "../../../../core/collection/array/typed/is_typed_array_equals.js";
 
 

package/engine/graphics/geometry/buffered/computeGeometryHash.js

@@ -1,5 +1,5 @@
 import { computeBufferAttributeHash } from "./computeBufferAttributeHash.js";
-import { computeStringHash } from "../../../../core/primitives/strings/computeStringHash.d.ts";
+import { computeStringHash } from "../../../../core/primitives/strings/computeStringHash.js";
 
 /**
  *

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

@@ -3,7 +3,7 @@ import { assert } from "../../../../core/assert.js";
 import { isPowerOfTwo } from "../../../../core/math/isPowerOrTwo.js";
 import { Mesh, OrthographicCamera, Scene, Vector4, WebGLMultipleRenderTargets } from "three";
 import { ImpostorDescription } from "./ImpostorDescription.js";
-import { mat4 } from "gl-matrix";
+import { mat4, vec3 } from "gl-matrix";
 import { BakeShaderStandard } from "./shader/BakeShaderStandard.js";
 import { Sampler2D } from "../../texture/sampler/Sampler2D.js";
 import Signal from "../../../../core/events/signal/Signal.js";
@@ -14,8 +14,8 @@ import { UvEncoder } from "./grid/UvEncoder.js";
 import { OctahedralUvEncoder } from "./grid/OctahedralUvEncoder.js";
 import { HemiOctahedralUvEncoder } from "./grid/HemiOctahedralUvEncoder.js";
 import { prepare_bake_material } from "./bake/prepare_bake_material.js";
-import { compute_bounding_sphere } from "./bake/compute_bounding_sphere.js";
 import { collectIteratorValueToArray } from "../../../../core/collection/IteratorUtils.js";
+import { compute_bounding_sphere } from "./bake/compute_bounding_sphere.js";
 
 export class ImpostorBaker {
 
@@ -37,20 +37,22 @@ export class ImpostorBaker {
 
     /**
      *
-     * @param {number} distance
+     * @param {number[]|vec4} bounding_sphere
      * @param {{mesh:ShadedGeometry, transform:mat4}[]} objects
      * @param {number} resolution
      * @param {number} frames
      * @param {UvEncoder} encoder
      */
     bake_internal({
-                      distance,
+                      bounding_sphere,
                       objects,
                       resolution,
                       frames,
                       encoder
                   }) {
 
+        const distance = bounding_sphere[3];
+
         assert.isNumber(distance, 'distance');
         assert.isNonNegativeInteger(resolution, 'resolution');
         assert.isNonNegativeInteger(frames, 'frames');
@@ -66,7 +68,6 @@ export class ImpostorBaker {
         rt.texture[1].name = 'normal+depth';
         rt.texture[2].name = 'orm'; // Occlusion, Roughness, Metalness
 
-
         const renderer = this._renderer;
 
         // remember render state
@@ -74,6 +75,7 @@ export class ImpostorBaker {
         const _vp = new Vector4();
         renderer.getViewport(_vp);
         const _autoClear = renderer.autoClear;
+        const _pixelRatio = renderer.getPixelRatio();
 
         const gl = this._renderer.getContext();
 
@@ -90,6 +92,7 @@ export class ImpostorBaker {
         renderer.setRenderTarget(rt);
         renderer.setClearColor(0xFFFFFF, 0);
         renderer.clearColor();
+        renderer.setPixelRatio(1);
 
         const frame_width = resolution / frames;
         const frame_height = resolution / frames;
@@ -122,6 +125,7 @@ export class ImpostorBaker {
             keyEqualityFunction: computeMaterialEquality
         });
 
+        const max_anisotropic_filtering_level = renderer.capabilities.getMaxAnisotropy();
 
         for (let k = 0; k < object_count; k++) {
             const object = objects[k];
@@ -129,7 +133,7 @@ export class ImpostorBaker {
             const source_mesh = object.mesh;
 
             // ensure tangents are generated
-            // buffer_geometry_ensure_tangents(source_mesh.geometry);
+            //buffer_geometry_ensure_tangents(source_mesh.geometry);
 
             const source_material = source_mesh.material;
 
@@ -139,7 +143,14 @@ export class ImpostorBaker {
                 const bake_material = new BakeShaderStandard();
 
                 // prepare bake material to match the source material
-                prepare_bake_material(bake_material, source_material, cleanup_signal);
+                prepare_bake_material({
+                    bake_material: bake_material,
+                    source_material: source_material,
+                    cleanup_signal: cleanup_signal,
+                    anisotropy: max_anisotropic_filtering_level
+                });
+
+                bake_material.uniforms.uAtlasResolution.value.set(resolution, resolution);
 
                 cleanup_signal.addOne(bake_material.dispose, bake_material);
 
@@ -183,9 +194,9 @@ export class ImpostorBaker {
                 encoder.uv_to_unit(unit_sphere_direction, [octahedron_u, octahedron_v]);
 
                 // offset by the radius of the sphere
-                const camera_px = distance * unit_sphere_direction[0];
-                const camera_py = distance * unit_sphere_direction[1];
-                const camera_pz = distance * unit_sphere_direction[2];
+                const camera_px = distance * unit_sphere_direction[0] + bounding_sphere[0];
+                const camera_py = distance * unit_sphere_direction[1] + bounding_sphere[1];
+                const camera_pz = distance * unit_sphere_direction[2] + bounding_sphere[2];
 
                 // console.log(`UV:${octahedron_u.toFixed(2)},${octahedron_v.toFixed(2)}\t V3:${unit_sphere_direction.map(n => n.toFixed(2)).join(', ')}`);
 
@@ -203,7 +214,7 @@ export class ImpostorBaker {
                     camera_pz
                 );
 
-                cam.lookAt(0, 0, 0);
+                cam.lookAt(bounding_sphere[0], bounding_sphere[1], bounding_sphere[2]);
                 cam.updateProjectionMatrix();
 
                 // update materials
@@ -237,6 +248,7 @@ export class ImpostorBaker {
         renderer.setRenderTarget(_rt);
         renderer.setViewport(_vp);
         renderer.autoClear = _autoClear;
+        renderer.setPixelRatio(_pixelRatio);
         if (_enabled_antialias) {
             gl.enable(gl.SAMPLE_ALPHA_TO_COVERAGE);
         }
@@ -302,7 +314,7 @@ export class ImpostorBaker {
             throw new Error('No renderer attached. Renderer is required for baking.');
         }
 
-        const objects_radius = compute_bounding_sphere(objects);
+        const bounding_sphere = compute_bounding_sphere(objects);
 
         // we need to compute bounding sphere around origin of the object
         let encoder;
@@ -318,12 +330,13 @@ export class ImpostorBaker {
             resolution,
             frames,
             objects,
-            distance: objects_radius,
+            bounding_sphere,
             encoder
         });
 
         r.capture_type = type;
-        r.sphere_radius = objects_radius;
+        r.sphere_radius = bounding_sphere[3];
+        vec3.copy(r.offset,bounding_sphere);
 
         console.timeEnd('bake');
 

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

@@ -27,6 +27,12 @@ export class ImpostorDescription {
      */
     sphere_radius = 0;
 
+    /**
+     * Baking offset
+     * @type {number[]}
+     */
+    offset = [0, 0, 0];
+
     /**
      * Actual baked data
      * @type {Sampler2D|null}

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

@@ -22,6 +22,7 @@ This is inherently a deferred rendering technique, where an impostor asset is re
 ---
 references:
 
+- [2021] [Rendering a Sphere on a Quad](https://bgolus.medium.com/rendering-a-sphere-on-a-quad-13c92025570c) by Ben Golus
 - [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

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 "../../../../../model/game/util/behavior/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)
                 }
             }
         });