@woosh/meep-engine 2.70.0 → 2.72.0

package/src/engine/ecs/gui/parallax/GuiElementParallaxSystem.js

@@ -1,8 +1,9 @@
 import { System } from "../../System.js";
-import { GuiElementParallax } from "./GuiElementParallax.js";
 import GUIElement from "../GUIElement.js";
+import { GuiElementParallax } from "./GuiElementParallax.js";
 
 export class GuiElementParallaxSystem extends System {
+    dependencies = [GuiElementParallax, GUIElement];
 
     /**
      *
@@ -12,7 +13,6 @@ export class GuiElementParallaxSystem extends System {
     constructor({ viewport, pointer }) {
         super();
 
-        this.dependencies = [GuiElementParallax, GUIElement];
 
         /**
          *

package/src/engine/ecs/gui/position/ViewportPosition.js

@@ -2,10 +2,9 @@
  * Created by Alex on 28/01/2015.
  */
 
+import { computeHashIntegerArray } from "../../../../core/collection/array/computeHashIntegerArray.js";
 import Vector2 from "../../../../core/geom/Vector2.js";
 import ObservedBoolean from "../../../../core/model/ObservedBoolean.js";
-import { BinaryClassSerializationAdapter } from "../../storage/binary/BinaryClassSerializationAdapter.js";
-import { computeHashIntegerArray } from "../../../../core/collection/array/computeHashIntegerArray.js";
 import { computeHashFloat } from "../../../../core/primitives/numbers/computeHashFloat.js";
 
 /**
@@ -20,11 +19,9 @@ export const ViewportPositionFlags = {
 class ViewportPosition {
     /**
      *
-     * @param {Vector2} [position]
-     * @param {Vector2} [offset]
      * @constructor
      */
-    constructor({ position, offset } = {}) {
+    constructor(options) {
         /**
          * Clip-scale position, on-screen values are in range of 0 to 1
          * @type {Vector2}
@@ -70,12 +67,9 @@ class ViewportPosition {
          */
         this.enabled = new ObservedBoolean(true);
 
-        if (position !== void 0) {
-            this.position.copy(position);
-        }
-
-        if (offset !== void 0) {
-            this.offset.copy(offset);
+        if (options !== undefined) {
+            console.warn("ViewportPosition constructor options is deprecated, please use static fromJSON method instead if you need similar functionality");
+            this.fromJSON(options);
         }
     }
 
@@ -150,42 +144,3 @@ ViewportPosition.serializable = true;
 
 export default ViewportPosition;
 
-export class ViewportPositionSerializationAdapter extends BinaryClassSerializationAdapter {
-
-    version = 0;
-    klass = ViewportPosition;
-
-    /**
-     *
-     * @param {BinaryBuffer} buffer
-     * @param {ViewportPosition} value
-     */
-    serialize(buffer, value) {
-        value.position.toBinaryBufferFloat32(buffer);
-        value.offset.toBinaryBufferFloat32(buffer);
-        value.anchor.toBinaryBufferFloat32(buffer);
-
-        buffer.writeFloat32(value.screenEdgeWidth);
-
-        buffer.writeUint8(value.resolveGuiCollisions ? 1 : 0);
-        buffer.writeUint8(value.stickToScreenEdge ? 1 : 0);
-        buffer.writeUint8(value.enabled.getValue() ? 1 : 0);
-    }
-
-    /**
-     *
-     * @param {BinaryBuffer} buffer
-     * @param {ViewportPosition} value
-     */
-    deserialize(buffer, value) {
-        value.position.fromBinaryBufferFloat32(buffer);
-        value.offset.fromBinaryBufferFloat32(buffer);
-        value.anchor.fromBinaryBufferFloat32(buffer);
-
-        value.screenEdgeWidth = buffer.readFloat32();
-
-        value.resolveGuiCollisions = buffer.readUint8() !== 0;
-        value.stickToScreenEdge = buffer.readUint8() !== 0;
-        value.enabled.set(buffer.readUint8() !== 0);
-    }
-}

package/src/engine/ecs/gui/position/ViewportPositionSerializationAdapter.js

@@ -0,0 +1,42 @@
+import { BinaryClassSerializationAdapter } from "../../storage/binary/BinaryClassSerializationAdapter.js";
+import ViewportPosition from "./ViewportPosition.js";
+
+export class ViewportPositionSerializationAdapter extends BinaryClassSerializationAdapter {
+
+    version = 0;
+    klass = ViewportPosition;
+
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {ViewportPosition} value
+     */
+    serialize(buffer, value) {
+        value.position.toBinaryBufferFloat32(buffer);
+        value.offset.toBinaryBufferFloat32(buffer);
+        value.anchor.toBinaryBufferFloat32(buffer);
+
+        buffer.writeFloat32(value.screenEdgeWidth);
+
+        buffer.writeUint8(value.resolveGuiCollisions ? 1 : 0);
+        buffer.writeUint8(value.stickToScreenEdge ? 1 : 0);
+        buffer.writeUint8(value.enabled.getValue() ? 1 : 0);
+    }
+
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {ViewportPosition} value
+     */
+    deserialize(buffer, value) {
+        value.position.fromBinaryBufferFloat32(buffer);
+        value.offset.fromBinaryBufferFloat32(buffer);
+        value.anchor.fromBinaryBufferFloat32(buffer);
+
+        value.screenEdgeWidth = buffer.readFloat32();
+
+        value.resolveGuiCollisions = buffer.readUint8() !== 0;
+        value.stickToScreenEdge = buffer.readUint8() !== 0;
+        value.enabled.set(buffer.readUint8() !== 0);
+    }
+}

package/src/engine/ecs/terrain/BufferedGeometryArraysBuilder.js

@@ -3,7 +3,7 @@
  */
 
 
-import ComputeNormals from '../../graphics/geometry/buffered/ComputeNormals.js';
+import { computeVertexNormals } from '../../graphics/geometry/buffered/ComputeNormals.js';
 
 /**
  *
@@ -108,7 +108,7 @@ function buildBufferGeometry(samplerHeight, position, size, scale, totalSize, re
         }
     }
 
-    ComputeNormals.computeNormals(vertices, normals, indices);
+    computeVertexNormals(vertices, normals, indices);
 
     //CleanupGeometry(geometry);
     return {

package/src/engine/ecs/transform/TransformSerializationAdapter.js

@@ -18,16 +18,13 @@ export class TransformSerializationAdapter extends BinaryClassSerializationAdapt
     serialize(buffer, value) {
 
         const position = value.position;
+        const rotation = value.rotation;
+        const scale = value.scale;
 
-        const positionX = position.x;
-        const positionY = position.y;
-        const positionZ = position.z;
-
-        buffer.writeFloat64(positionX);
-        buffer.writeFloat64(positionY);
-        buffer.writeFloat64(positionZ);
+        buffer.writeFloat64(position.x);
+        buffer.writeFloat64(position.y);
+        buffer.writeFloat64(position.z);
 
-        const rotation = value.rotation;
         const encoded_rotation = quat_encode_to_uint32(
             rotation.x,
             rotation.y,
@@ -37,8 +34,6 @@ export class TransformSerializationAdapter extends BinaryClassSerializationAdapt
 
         buffer.writeUint32(encoded_rotation);
 
-        const scale = value.scale;
-
         v3_binary_equality_encode(buffer, scale.x, scale.y, scale.z);
     }
 

package/src/engine/graphics/geometry/buffered/ComputeNormals.js

@@ -3,28 +3,17 @@
  */
 
 
+import { v3_normalize_array } from "../../../../core/geom/vec3/v3_normalize_array.js";
+
 /**
  *
- * @param {Array.<Number>} normals
+ * @param {Array.<number>} normals
  */
 function normalizeVectors(normals) {
-    let x, y, z, n;
-
-    let i = 0;
-    const il = normals.length;
-    for (; i < il; i += 3) {
+    const count = normals.length;
+    for (let i = 0; i < count; i += 3) {
 
-        // extract vector components
-        x = normals[i];
-        y = normals[i + 1];
-        z = normals[i + 2];
-
-        // compute vector inverse magnitude
-        n = 1.0 / Math.sqrt(x * x + y * y + z * z);
-
-        normals[i] *= n;
-        normals[i + 1] *= n;
-        normals[i + 2] *= n;
+        v3_normalize_array(normals, i, normals, i);
 
     }
 }
@@ -32,11 +21,11 @@ function normalizeVectors(normals) {
 /**
  * based on code from THREE.js
  * normals need to be set to 0
- * @param {Array.<Number>} vertices
- * @param {Array.<Number>} normals
- * @param {Array.<Number>} indices
+ * @param {Array.<number>|Float32Array} vertices
+ * @param {Array.<number>|Float32Array} normals
+ * @param {Array.<number>|Uint32Array} indices
  */
-function computeVertexNormals(vertices, normals, indices) {
+export function computeVertexNormals(vertices, normals, indices) {
     let vA, vB, vC;
 
     let vAx, vAy, vAz, vBx, vBy, vBz, vCx, vCy, vCz;
@@ -94,8 +83,4 @@ function computeVertexNormals(vertices, normals, indices) {
     }
 
     normalizeVectors(normals);
-}
-
-export default {
-    computeNormals: computeVertexNormals
-};
+}

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

@@ -1,32 +1,32 @@
-import { EngineHarness } from "../../../EngineHarness.js";
-import { ImpostorBaker } from "./ImpostorBaker.js";
-import { ShadedGeometry } from "../../ecs/mesh-v2/ShadedGeometry.js";
+import Quaternion from "../../../../core/geom/Quaternion.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import Vector3 from "../../../../core/geom/Vector3.js";
+import { DEG_TO_RAD } from "../../../../core/math/DEG_TO_RAD.js";
+import { GameAssetType } from "../../../asset/GameAssetType.js";
+import { GLTFAssetLoader } from "../../../asset/loaders/GLTFAssetLoader.js";
 import Entity from "../../../ecs/Entity.js";
-import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
 import GUIElement from "../../../ecs/gui/GUIElement.js";
 import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
 import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
-import Vector2 from "../../../../core/geom/Vector2.js";
-import { GameAssetType } from "../../../asset/GameAssetType.js";
-import { Transform } from "../../../ecs/transform/Transform.js";
-import { GLTFAssetLoader } from "../../../asset/loaders/GLTFAssetLoader.js";
-import { ImpostorCaptureType } from "./ImpostorCaptureType.js";
-import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
-import { ImpostorShaderV0 } from "./shader/ImpostorShaderV0.js";
-import Quaternion from "../../../../core/geom/Quaternion.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 { Transform } from "../../../ecs/transform/Transform.js";
+import { EngineHarness } from "../../../EngineHarness.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";
-import { DEG_TO_RAD } from "../../../../core/math/DEG_TO_RAD.js";
+import { SGMesh } from "../../ecs/mesh-v2/aggregate/SGMesh.js";
+import { SGMeshSystem } from "../../ecs/mesh-v2/aggregate/SGMeshSystem.js";
+import { ShadedGeometry } from "../../ecs/mesh-v2/ShadedGeometry.js";
+import { ShadedGeometryFlags } from "../../ecs/mesh-v2/ShadedGeometryFlags.js";
+import { ShadedGeometrySystem } from "../../ecs/mesh-v2/ShadedGeometrySystem.js";
+import { ImpostorBaker } from "./ImpostorBaker.js";
+import { ImpostorCaptureType } from "./ImpostorCaptureType.js";
+import { ImpostorShaderV0 } from "./shader/ImpostorShaderV0.js";
 import { ImpostorShaderWireframeV0 } from "./shader/ImpostorShaderWireframeV0.js";
-import { makeImpostorAtlasPreview } from "./util/makeImpostorAtlasPreview.js";
-import { load_mesh_for_bake } from "./util/load_mesh_for_bake.js";
 import { build_geometry_from_cutout_shape } from "./util/build_geometry_from_cutout_shape.js";
+import { load_mesh_for_bake } from "./util/load_mesh_for_bake.js";
+import { makeImpostorAtlasPreview } from "./util/makeImpostorAtlasPreview.js";
 
 /**
  *
@@ -80,7 +80,7 @@ async function main(engine) {
     });
 
     new Entity()
-        .add(new ViewportPosition({
+        .add(ViewportPosition.fromJSON({
             offset: new Vector2(0, 0)
         }))
         .add(GUIElement.fromView(ctrl))

package/src/engine/graphics/texture/sprite/prototypeSpriteCutoutGeometry.js

@@ -1,20 +1,20 @@
-import { EngineHarness } from "../../../EngineHarness.js";
-import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
-import { ImageRGBADataLoader } from "../../../asset/loaders/image/ImageRGBADataLoader.js";
+import { compute_polygon_area_2d } from "../../../../core/geom/2d/compute_polygon_area_2d.js";
+import { convex_hull_jarvis_2d } from "../../../../core/geom/2d/convex-hull/convex_hull_jarvis_2d.js";
+import { fixed_convex_hull_humus } from "../../../../core/geom/2d/convex-hull/fixed_convex_hull_humus.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
 import EmptyView from "../../../../view/elements/EmptyView.js";
+import { ImageRGBADataLoader } from "../../../asset/loaders/image/ImageRGBADataLoader.js";
 import Entity from "../../../ecs/Entity.js";
 import GUIElement from "../../../ecs/gui/GUIElement.js";
-import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
-import { CanvasView } from "../../../../view/elements/CanvasView.js";
-import sampler2D2Canvas from "../sampler/Sampler2D2Canvas.js";
+import GUIElementSystem from "../../../ecs/gui/GUIElementSystem.js";
 import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
-import Vector2 from "../../../../core/geom/Vector2.js";
-import { convex_hull_jarvis_2d } from "../../../../core/geom/2d/convex-hull/convex_hull_jarvis_2d.js";
+import ViewportPositionSystem from "../../../ecs/gui/position/ViewportPositionSystem.js";
+import { EngineHarness } from "../../../EngineHarness.js";
 import { Sampler2D } from "../sampler/Sampler2D.js";
-import { compute_polygon_area_2d } from "../../../../core/geom/2d/compute_polygon_area_2d.js";
-import { sampler2d_find_pixels } from "../sampler/search/sampler2d_find_pixels.js";
+import sampler2D2Canvas from "../sampler/Sampler2D2Canvas.js";
 import { make_edge_condition_channel_threshold } from "../sampler/search/make_edge_condition_channel_threshold.js";
-import { fixed_convex_hull_humus } from "../../../../core/geom/2d/convex-hull/fixed_convex_hull_humus.js";
+import { sampler2d_find_pixels } from "../sampler/search/sampler2d_find_pixels.js";
 
 const edge_condition_alpha0 = make_edge_condition_channel_threshold(3, 0);
 
@@ -195,7 +195,7 @@ async function main(engine) {
 
     new Entity()
         .add(GUIElement.fromView(vContainer))
-        .add(new ViewportPosition({
+        .add(ViewportPosition.fromJSON({
             offset: new Vector2(100, 100)
         }))
         .build(engine.entityManager.dataset);

package/src/engine/graphics/texture/virtual/v2/NOTES.md

@@ -0,0 +1,17 @@
+# Sparse Virtual Texture 
+
+This tech is based on popular Megatexture technique developed for Rage by John Carmack, working at id software.
+
+The key idea boils down to having a very large texture that is impractical to keep in memory, and only load and keep in memory pieces of it that are relevant to the current view.
+
+There are 2 parts to this technique, offline and online.
+
+## Offline
+
+The original texture is mip-mapped, down to the size of a single tile, for the sake of this document let it be 128x128 pixels. Each mip level is then cut into tiles and stored on disk. A good intuition for this is to think of each tile as a separate pixel, representing non-color data.
+
+## Online
+
+This is achieved by pre-rendering the scene with a special shader that records UV and mip-level information, which we call `Usage`, this is then analysed to build a list of used tiles (mip level, x, y) and by counting occurrence of this tile in the `Usage` texture we get a much more useful data structure.
+
+Based on the `Usage` data, we populate our `Physical` texture of pages, and based on what's currently in the `Physical` texture - we populate the `Reference` texture that stores information about the entire mip pyramid, and for each tile contains a pointer to the `Physical` texture, where representative tile can be found. 

package/src/engine/graphics/texture/virtual/v2/ShaderUsage.js

@@ -1,6 +1,15 @@
 function vertex() {
     return `
-    varying vec2 vUv;
+    precision mediump float;
+    precision mediump int;
+    
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    
+    in vec2 uv;
+    in vec3 position;
+    
+    out vec2 vUv;
     void main()
     {
         vUv = uv;
@@ -13,32 +22,46 @@ function vertex() {
 
 function fragment() {
     return `
-uniform vec4 u_mt_tex; // [ width, height, tileSize, id ]
-uniform vec2 u_mt_params; // [ bias, maxLevel, xx, xx ]
-varying vec2 vUv;
-
-float MTCalculateMipLevel( const in vec2 uv, const in float bias ) {
-    vec2 dx = dFdx( uv * u_mt_tex.x );
-    vec2 dy = dFdy( uv * u_mt_tex.y );
-    return log2( max( dot( dx, dx ), dot( dy, dy ) ) ) / 2.0 + bias;
-}
-
-vec4 MTCalculateTileKeyRGBA( const in vec2 uv ) {
-   float level = clamp( floor( MTCalculateMipLevel( uv, u_mt_params.x ) ), 0.0, u_mt_params.y );
-   vec2 texIS = uv.xy * u_mt_tex.xy;                     // [0-1]x[0-1] -> [0-texwidth]x[0-texheight]
-   vec2 texLS = texIS / exp2( level );                   // -> [0-levelwidth]x[0-levelheight]
-   vec2 texTS = floor( texLS / u_mt_tex.z );             // -> [0->tileswide]x[0-tileshigh]
-   return vec4( u_mt_params.y - level, texTS.xy, u_mt_tex.w ) / 255.0; // [  level, tileX, tileY, texId ] -> RGBA
-}
-
+    precision highp float;
+    precision highp int;
     
-void main(){
-    vec4 tile =  MTCalculateTileKeyRGBA(vUv);
-    // gl_FragColor = tile;
-    gl_FragColor = vec4(mix(0.1,1.0,tile.x*255.0/u_mt_params.y), tile.yz*64.0, 1.0);
-    // gl_FragColor = MTCalculateTileKeyRGBA(vUv);
-    // gl_FragColor = vec4(1.0);
-}
+    uniform uvec4 u_mt_tex; // [ width, height, tileSize, id ]
+    uniform vec2 u_mt_params; // [ bias, maxLevel ]
+    uniform vec2 u_mt_viewport_size;
+    in vec2 vUv;
+    
+    out uvec4 out_decoded;
+    
+    float MTCalculateMipLevel( const in vec2 uv, const in float bias ) {
+        
+        float scale_x = float(u_mt_tex.x) / u_mt_viewport_size.x;
+        float scale_y = float(u_mt_tex.y) / u_mt_viewport_size.y;
+        
+        vec2 dx = dFdx( uv * scale_x);
+        vec2 dy = dFdy( uv * scale_y);
+        
+        return log2( max( dot( dx, dx ), dot( dy, dy ) ) ) * 0.5 + bias;
+    }
+    
+    uvec4 MTCalculateTileKeyRGBA( const in vec2 uv ) {
+       uint level = clamp(  uint( floor( MTCalculateMipLevel( uv, u_mt_params.x ) ) ), 0u, uint(u_mt_params.y) );
+       
+       uint mip_resolution_in_tiles = 1u << level;
+       
+       uint mip_resolution_in_texels = mip_resolution_in_tiles * u_mt_tex.z;
+              
+       vec2 texel_position = fract(uv.xy) * vec2(u_mt_tex.xy);
+            
+       uvec2 tile_position = uvec2( texel_position / float(mip_resolution_in_texels)  );
+           
+       // [ level, tileX, tileY, texId ] -> RGBA
+       return uvec4( uint(u_mt_params.y) - level, tile_position, u_mt_tex.w );
+    }
+    
+        
+    void main(){
+        out_decoded =  MTCalculateTileKeyRGBA(vUv);
+    }
 `;
 }
 

package/src/engine/graphics/texture/virtual/v2/UsageDebugView.js

@@ -0,0 +1,51 @@
+import LabelView from "../../../../../view/common/LabelView.js";
+import EmptyView from "../../../../../view/elements/EmptyView.js";
+
+export class UsageDebugView extends EmptyView {
+    #tileCount = new LabelView("")
+    #tiles = new EmptyView();
+
+
+    constructor(opt) {
+        super(opt);
+
+        this.addChild(this.#tileCount);
+        this.addChild(this.#tiles);
+
+        this.css({
+            position: "absolute",
+            left: "0",
+            top: "0",
+            background: "rgba(255,255,255,0.5)",
+            fontFamily: "monospace",
+            fontSize: "10px"
+        });
+    }
+
+    /**
+     *
+     * @param {UsageMetadata} usage
+     */
+    set usage(usage) {
+
+        const tileCount = usage.tile_count;
+
+        this.#tileCount.updateText(`Tile Count: ${tileCount}`);
+
+        this.#tiles.removeAllChildren();
+
+        for (let i = 0; i < tileCount; i++) {
+            const finger_print = usage.getTile(i);
+            const count = usage.getCount(i);
+
+            const level = (finger_print >> 24) & 0xFF;
+            const x = (finger_print >> 16) & 0xFF;
+            const y = (finger_print >> 8) & 0xFF;
+            const texture_id = (finger_print) & 0xFF;
+
+            this.#tiles.addChild(new LabelView(`ID: ${texture_id} Level: ${level} X: ${x} Y: ${y} USAGE: ${count}`));
+        }
+    }
+
+
+}