@woosh/meep-engine 2.33.2 → 2.33.6

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

@@ -14,27 +14,28 @@ 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;
 }
 
-uniform vec2 u_mt_params; // [ bias, maxLevel, xx, xx ]
 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; // [ texId, level, tileX, tileY ] -> RGBA
+   return vec4( u_mt_params.y - level, texTS.xy, u_mt_tex.w ) / 255.0; // [  level, tileX, tileY, texId ] -> RGBA
 }
 
-    varying vec2 vUv;
     
 void main(){
     vec4 tile =  MTCalculateTileKeyRGBA(vUv);
     // gl_FragColor = tile;
-    gl_FragColor = vec4(mix(0.1,1.0,tile.x*255.0), tile.yz*64.0, 1.0);
+    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);
 }
@@ -44,4 +45,4 @@ void main(){
 export {
     vertex,
     fragment
-};
+};

package/engine/graphics/texture/virtual/v2/prototype.js

@@ -1,5 +1,6 @@
 import * as THREE from "three";
 import { fragment, vertex } from "./ShaderUsage.js";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 
 let camera, renderer, clock, scene;
 
@@ -22,7 +23,14 @@ function init() {
     const textureLoader = new THREE.TextureLoader();
 
     uniforms = {
-        "u_mt_params": { value: new THREE.Vector2(0.1, 5) },
+        "u_mt_params": { value: new THREE.Vector2(0.1, 6) },
+        /**
+         * Format: VT_WIDTH, VT_HEIGHT, VT_TILE_SIZE, VT_ID
+         *   - VT_WIDTH :       width of the virtual texture
+         *   - VT_HEIGHT :      height of the virtual texture
+         *   - VT_TILE_SIZE :   resolution of a single tile
+         *   - VT_ID :          multiple different virtual textures may be used, this identifies current texture
+         */
         "u_mt_tex": { value: new THREE.Vector4(16384, 16384, 256, 1) }
     };
 
@@ -30,11 +38,11 @@ function init() {
 
     const material = new THREE.ShaderMaterial({
 
-                                                  uniforms: uniforms,
-                                                  vertexShader: vertex(),
-                                                  fragmentShader: fragment()
+        uniforms: uniforms,
+        vertexShader: vertex(),
+        fragmentShader: fragment()
 
-                                              });
+    });
 
     mesh = new THREE.Mesh(new THREE.TorusGeometry(size, 0.3, 30, 30), material);
     mesh.rotation.x = 0.3;
@@ -57,6 +65,8 @@ function init() {
 
     window.addEventListener("resize", onWindowResize);
 
+    new OrbitControls(camera, renderer.domElement);
+
 }
 
 function onWindowResize() {
@@ -88,4 +98,4 @@ function render() {
     renderer.clear();
     renderer.render(scene, camera)
 
-}
+}

package/package.json

@@ -4,7 +4,7 @@
   "productName": "Meep",
   "description": "production-ready JavaScript game engine based on Entity Component System Architecture",
   "author": "Alexander Goldring",
-  "version": "2.33.2",
+  "version": "2.33.6",
   "dependencies": {
     "fast-levenshtein": "2.0.6",
     "opentype.js": "1.3.3",

package/view/elements/progress/segmented/SegmentedResourceBarView.js

@@ -11,12 +11,12 @@ import ListView from "../../../common/ListView.js";
 export class SegmentedResourceBarView extends View {
     /**
      *
-     * @param {Vector1|ObservedInteger} value
-     * @param {Vector1|ObservedInteger} [max=1]
+     * @param {(Vector1|ObservedInteger)[]} value
+     * @param {Vector1|ObservedInteger|ReactiveExpression} [max=1]
      * @param {string[]} [classList]
      */
     constructor({
-                    value,
+                    values,
                     max = Vector1.one,
                     classList = []
                 }) {
@@ -24,10 +24,10 @@ export class SegmentedResourceBarView extends View {
 
         /**
          *
-         * @type {Vector1|ObservedInteger}
+         * @type {(Vector1|ObservedInteger)[]}
          * @private
          */
-        this.__value_current = value;
+        this.__values_current = values;
 
         /**
          *
@@ -52,9 +52,18 @@ export class SegmentedResourceBarView extends View {
 
 
         // build structure
-        this.__v__fill = new EmptyView({ classList: ['fill'] });
+        this.__v__fill = new EmptyView({ classList: ['fill-container'] });
         this.addChild(this.__v__fill);
 
+        this.__value_fills = [];
+
+        for (let i = 0; i < this.__values_current.length; i++) {
+            const v_value = new EmptyView({ classList: ['fill', `value-${i}`] });
+
+            this.__v__fill.addChild(v_value);
+            this.__value_fills[i] = v_value;
+        }
+
         this.__v__ghost = new EmptyView({ classList: ['ghost'] });
         this.addChild(this.__v__ghost);
 
@@ -62,7 +71,7 @@ export class SegmentedResourceBarView extends View {
         this.__v_segments = new CanvasView();
         this.__v_segments.addClass('notch-overlay');
 
-        this.__v__fill.addChild(this.__v_segments);
+        this.addChild(this.__v_segments);
 
 
         /**
@@ -74,12 +83,13 @@ export class SegmentedResourceBarView extends View {
             elementFactory: (interval) => {
                 const v = new EmptyView({ classList: ['highlight'] });
 
-                const valueCurrent = this.__value_current;
                 const valueMax = this.__value_max;
 
                 const update = () => {
-                    const v0 = interval.min / valueMax;
-                    const span = (interval.max - interval.min) / valueMax;
+                    const m = valueMax.getValue();
+
+                    const v0 = interval.min / m;
+                    const span = (interval.max - interval.min) / m;
 
                     const style = v.el.style;
 
@@ -89,7 +99,15 @@ export class SegmentedResourceBarView extends View {
                 };
 
                 v.bindSignal(interval.onChanged, update);
-                v.bindSignal(valueCurrent.onChanged, update);
+
+                const valuesCurrent = this.__values_current;
+
+                for (let i = 0; i < valuesCurrent.length; i++) {
+                    const valueCurrent = valuesCurrent[i];
+
+                    v.bindSignal(valueCurrent.onChanged, update);
+                }
+
                 v.bindSignal(valueMax.onChanged, update);
 
                 v.on.linked.add(update);
@@ -101,8 +119,10 @@ export class SegmentedResourceBarView extends View {
         this.addChild(this.highlightViews);
 
         // subscribe to changes
+        for (let i = 0; i < this.__values_current.length; i++) {
+            this.bindSignal(this.__values_current[i].onChanged, this.updateFill, this);
+        }
 
-        this.bindSignal(this.__value_current.onChanged, this.updateFill, this);
         this.bindSignal(this.__value_max.onChanged, this.handleMaxChange, this);
 
         /**
@@ -252,14 +272,29 @@ export class SegmentedResourceBarView extends View {
     }
 
     updateFill() {
-        const c = this.__value_current.getValue();
         const m = this.__value_max.getValue();
 
-        const f = clamp(c / m, 0, 1);
+        let total_current = 0;
+
+        for (let i = 0; i < this.__values_current.length; i++) {
+            const v = this.__values_current[i];
+
+            const value = v.getValue();
+
+            total_current += value;
+
+            const v_fraction = clamp(v / m, 0, 1);
+
+            const fill_view = this.__value_fills[i];
+
+            fill_view.el.style.width = `${v_fraction * 100}%`;
+        }
+
+
+        const f = clamp(total_current / m, 0, 1);
 
         const width = `${f * 100}%`;
 
-        this.__v__fill.el.style.width = width
         this.__v__ghost.el.style.width = width;
     }
 }

package/view/minimap/gl/MinimapMarkersGL.js

@@ -1,7 +1,7 @@
 import {
     DataTexture,
-    LinearFilter,
     LinearMipMapLinearFilter,
+    NearestFilter,
     NormalBlending,
     Points,
     RGBAFormat,
@@ -82,7 +82,7 @@ function buildMaterial() {
     dataTexture.flipY = false;
     dataTexture.generateMipmaps = true;
     dataTexture.minFilter = LinearMipMapLinearFilter;
-    dataTexture.magFilter = LinearFilter;
+    dataTexture.magFilter = NearestFilter;
 
     const uniforms = {
         atlas: {

package/engine/graphics/micron/render/RefinementSpec.js

@@ -1,110 +0,0 @@
-import Vector2 from "../../../../core/geom/Vector2.js";
-import { Frustum, Matrix4 } from "three";
-import { mat4 } from "gl-matrix";
-
-
-function setFromProjectionMatrix(planes, me) {
-
-    const me0 = me[0], me1 = me[1], me2 = me[2], me3 = me[3];
-    const me4 = me[4], me5 = me[5], me6 = me[6], me7 = me[7];
-    const me8 = me[8], me9 = me[9], me10 = me[10], me11 = me[11];
-    const me12 = me[12], me13 = me[13], me14 = me[14], me15 = me[15];
-
-    planes[0].setComponents(me3 - me0, me7 - me4, me11 - me8, me15 - me12).normalize();
-    planes[1].setComponents(me3 + me0, me7 + me4, me11 + me8, me15 + me12).normalize();
-    planes[2].setComponents(me3 + me1, me7 + me5, me11 + me9, me15 + me13).normalize();
-    planes[3].setComponents(me3 - me1, me7 - me5, me11 - me9, me15 - me13).normalize();
-    planes[4].setComponents(me3 - me2, me7 - me6, me11 - me10, me15 - me14).normalize();
-    planes[5].setComponents(me3 + me2, me7 + me6, me11 + me10, me15 + me14).normalize();
-
-
-}
-
-export class RefinementSpec {
-    constructor() {
-
-        /**
-         * Viewport resolution
-         * @type {Vector2}
-         */
-        this.resolution = new Vector2();
-
-        /**
-         * Number of pixels in the viewport
-         * @type {number}
-         */
-        this.viewport_area = 0;
-
-        /**
-         * How much error to accept when deciding to subdivide a cluster
-         * Measured in pixels
-         * Higher value will result in better performance but more visible artifacts
-         * @type {number}
-         */
-        this.error_threshold = 1;
-
-        /**
-         * Object-space camera frustum
-         * @type {Frustum}
-         */
-        this.frustum = new Frustum();
-
-        /**
-         * Model world transform
-         * @type {Float32Array|number[]|mat4}
-         */
-        this.transform = new Float32Array(16);
-
-        /**
-         * Contains transformation from camera space to object space
-         * @type {Float32Array|number[]|mat4}
-         */
-        this.projection_matrix = new Float32Array(16);
-
-        /**
-         * FOV in radians
-         * @type {number}
-         */
-        this.focal_length = 0;
-
-        /**
-         * Object-space camera position
-         * @type {Float32Array}
-         */
-        this.view_position = new Float32Array(3);
-    }
-
-    /**
-     *
-     * @param {Matrix4} transform world-space object transform
-     * @param {Matrix4} matrix_world_inverse camera's world inverse matrix
-     * @param {Matrix4} matrix_projection camera's projection matrix
-     */
-    build(transform, matrix_world_inverse, matrix_projection) {
-        const _transform = this.transform;
-        _transform.set(transform.elements);
-
-        // build projection matrix
-        mat4.multiply(this.projection_matrix, matrix_world_inverse.elements, _transform);
-        mat4.multiply(this.projection_matrix, matrix_projection.elements, this.projection_matrix);
-
-        // compute view frustum in model-space
-        setFromProjectionMatrix(this.frustum.planes, this.projection_matrix);
-
-        /*
-
-        // get inverse of model view matrix
-        model_view_matrix.invert();
-
-        // get view origin position in the prjected space
-        const inv_mv = model_view_matrix.elements;
-        const view_position = this.view_position;
-
-        // extract position component from transform matrix
-        view_position[0] = inv_mv[12];
-        view_position[1] = inv_mv[13];
-        view_position[2] = inv_mv[14];
-
-         */
-    }
-}