@woosh/meep-engine 2.33.4 → 2.33.9

package/engine/graphics/render/forward_plus/data/channelCountToThreIntegerTextureType.js

@@ -0,0 +1,16 @@
+import { RedIntegerFormat, RGBAIntegerFormat, RGBIntegerFormat, RGIntegerFormat } from "three";
+
+export function channelCountToThreIntegerTextureType(channel_count) {
+    switch (channel_count) {
+        case 1:
+            return RedIntegerFormat;
+        case 2:
+            return RGIntegerFormat;
+        case 3:
+            return RGBIntegerFormat;
+        case 4:
+            return RGBAIntegerFormat;
+        default:
+            throw new Error(`Unsupported channel count '${channel_count}'`);
+    }
+}

package/engine/graphics/render/forward_plus/data/computeDataType.js

@@ -0,0 +1,36 @@
+import { NumericType } from "./NumericType.js";
+import { DataType } from "../../../../../core/collection/table/DataType.js";
+
+/**
+ *
+ * @param {NumericType} type
+ * @param {number} precision
+ * @returns {DataType}
+ */
+export function computeDataType(type, precision) {
+    if (type === NumericType.Uint) {
+        if (precision <= 8) {
+            return DataType.Uint8;
+        } else if (precision <= 16) {
+            return DataType.Uint16;
+        } else if (precision <= 32) {
+            return DataType.Uint32;
+        }
+    } else if (type === NumericType.Int) {
+        if (precision <= 8) {
+            return DataType.Int8;
+        } else if (precision <= 16) {
+            return DataType.Int16;
+        } else if (precision <= 32) {
+            return DataType.Int32;
+        }
+    } else if (type === NumericType.Float) {
+        if (precision <= 32) {
+            return DataType.Float32;
+        } else if (precision <= 64) {
+            return DataType.Float64;
+        }
+    }
+
+    throw new Error(`Unsupported numeric type(=${type}) and precision(=${precision}) combination`);
+}

package/engine/graphics/render/forward_plus/data/computeThreeTextureFormat.js

@@ -0,0 +1,18 @@
+import { NumericType } from "./NumericType.js";
+import { channelCountToThreIntegerTextureType } from "./channelCountToThreIntegerTextureType.js";
+import { channelCountToThreeTextureFormat } from "../../../texture/channelCountToThreeTextureFormat.js";
+
+/**
+ *
+ * @param {NumericType} type
+ * @param {number} channel_count
+ */
+export function computeThreeTextureFormat(type, channel_count) {
+    if (type === NumericType.Uint || type === NumericType.Int) {
+        return channelCountToThreIntegerTextureType(channel_count);
+    } else if (type === NumericType.Float) {
+        return channelCountToThreeTextureFormat(channel_count);
+    } else {
+        throw new Error(`Unsupported numeric type '${type}'`);
+    }
+}

package/engine/graphics/render/forward_plus/data/computeThreeTextureInternalFormatFromDataType.js

@@ -0,0 +1,63 @@
+import { DataType } from "../../../../../core/collection/table/DataType.js";
+
+/**
+ *
+ * @param {DataType} dt
+ * @param {number} channel_count
+ * @returns {string|THREE.PixelFormatGPU}
+ */
+export function computeThreeTextureInternalFormatFromDataType(dt, channel_count) {
+    let suffix = '';
+    switch (dt) {
+        case DataType.Uint8:
+            suffix = '8UI';
+            break;
+        case DataType.Uint16:
+            suffix = '16UI';
+            break;
+        case DataType.Uint32:
+            suffix = '32UI';
+            break;
+        case DataType.Int8:
+            suffix = '8I';
+            break;
+        case DataType.Int16:
+            suffix = '16I';
+            break;
+        case DataType.Int32:
+            suffix = '32I';
+            break;
+        case DataType.Float16:
+            suffix = '16F';
+            break;
+        case DataType.Float32:
+            suffix = '32F';
+            break;
+        case DataType.Float64:
+            suffix = '64F';
+            break;
+        default:
+            throw new Error(`Unsupported data type '${dt}'`);
+    }
+
+    let prefix = '';
+
+    switch (channel_count) {
+        case 1:
+            prefix = 'R';
+            break;
+        case 2:
+            prefix = 'RG';
+            break;
+        case 3:
+            prefix = 'RGB';
+            break;
+        case 4:
+            prefix = 'RGBA';
+            break;
+        default:
+            throw new Error(`Unsupported channel count '${channel_count}'`);
+    }
+
+    return prefix + suffix;
+}

package/engine/graphics/render/forward_plus/data/computeThreeTextureTypeFromDataType.js

@@ -0,0 +1,41 @@
+import { DataType } from "../../../../../core/collection/table/DataType.js";
+import {
+    ByteType,
+    FloatType,
+    HalfFloatType,
+    IntType,
+    ShortType,
+    UnsignedByteType,
+    UnsignedIntType,
+    UnsignedShortType
+} from "three";
+
+/**
+ *
+ * @param {DataType} dt
+ * @returns {number}
+ */
+export function computeThreeTextureTypeFromDataType(dt) {
+    switch (dt) {
+        case DataType.Uint8:
+            return UnsignedByteType;
+        case DataType.Uint16:
+            return UnsignedShortType;
+        case DataType.Uint32:
+            return UnsignedIntType;
+        case DataType.Int8:
+            return ByteType;
+        case DataType.Int16:
+            return ShortType;
+        case DataType.Int32:
+            return IntType;
+        case DataType.Float16:
+            return HalfFloatType;
+        case DataType.Float32:
+            return FloatType;
+        case DataType.Float64:
+            return FloatType;
+        default:
+            throw new Error(`Unsupported data type '${dt}'`);
+    }
+}

package/engine/graphics/render/forward_plus/plugin/ptototypeFPPlugin.js

@@ -45,7 +45,6 @@ import { SerializationMetadataSystem } from "../../../../ecs/systems/Serializati
 import { InverseKinematicsSystem } from "../../../../ecs/animation/InverseKinematicsSystem.js";
 import { PathDisplaySystem } from "../../../ecs/path/PathDisplaySystem.js";
 import { Line, LineBasicMaterial, MeshStandardMaterial, TorusKnotBufferGeometry } from "three";
-import { buildCubeURLs } from "../../../GraphicsEngine.js";
 import RenderSystem from "../../../../ecs/systems/RenderSystem.js";
 import { makeEngineOptionsModel } from "../../../../../../model/game/options/makeEngineOptionsModel.js";
 import { enableEditor } from "../../../../../editor/enableEditor.js";
@@ -77,6 +76,7 @@ import { GameAssetType } from "../../../../asset/GameAssetType.js";
 import { GLTFAssetLoader } from "../../../../asset/loaders/GLTFAssetLoader.js";
 import { ImageRGBADataLoader } from "../../../../asset/loaders/image/ImageRGBADataLoader.js";
 import { MicronRenderPlugin } from "../../../micron/plugin/MicronRenderPlugin.js";
+import { buildCubeURLs } from "../../../texture/cubemap/buildCubeURLs.js";
 
 const engineHarness = new EngineHarness();
 

package/engine/graphics/render/forward_plus/prototypeLightManager.js

@@ -233,7 +233,7 @@ function prepare_scene_0() {
 
     controls.minDistance = 2;
 
-    for (let i = 0; i < 5000; i++) {
+    for (let i = 0; i < 500; i++) {
         const radius = randomFloatBetween(random, 4, 4);
         const intensity = randomFloatBetween(random, 2, 2);
         addPointLight([

package/engine/graphics/render/visibility/hiz/buffer/HierarchicalZBuffer.js

@@ -0,0 +1,198 @@
+import { max2 } from "../../../../../../core/math/max2.js";
+import { ceilPowerOfTwo } from "../../../../../../core/binary/operations/ceilPowerOfTwo.js";
+import { ClampToEdgeWrapping, FloatType, NearestFilter, RedFormat, WebGLRenderTarget } from "three";
+import { renderScreenSpace } from "../../../utils/renderScreenSpace.js";
+import { makeReductionShader } from "./ReductionShader.js";
+import Vector2 from "../../../../../../core/geom/Vector2.js";
+
+export class HierarchicalZBuffer {
+    constructor() {
+        /**
+         *
+         * @type {THREE.Texture|null}
+         * @private
+         */
+        this.__input_buffer = null;
+
+        /**
+         *
+         * @type {THREE.WebGLRenderer|null}
+         * @private
+         */
+        this.__renderer = null;
+
+        /**
+         *
+         * @type {THREE.WebGLRenderTarget[]}
+         */
+        this.mips = [];
+
+        /**
+         *
+         * @type {ShaderMaterial}
+         * @private
+         */
+        this.__material = makeReductionShader();
+
+
+        /**
+         *
+         * @type {Vector2}
+         * @private
+         */
+        this.__resolution = new Vector2(0, 0);
+
+        /**
+         *
+         * @type {Vector2}
+         * @private
+         */
+        this.__limits = new Vector2(1, 1);
+    }
+
+    /**
+     *
+     * @return {Vector2}
+     */
+    get mip_limits() {
+        return this.__limits;
+    }
+
+    /**
+     * @param {THREE.WebGLRenderer} v
+     */
+    set renderer(v) {
+        this.__renderer = v;
+    }
+
+    /**
+     * @param {THREE.Texture} v
+     */
+    set input(v) {
+        this.__input_buffer = v;
+    }
+
+    build_mip_chain() {
+        const size_max = ceilPowerOfTwo(max2(this.__resolution.x, this.__resolution.y));
+        const mip_depth = Math.log2(size_max);
+
+        const mips = this.mips;
+        const existing_mip_depth = mips.length;
+
+        if (existing_mip_depth > mip_depth) {
+
+            for (let i = mip_depth; i < existing_mip_depth; i++) {
+                mips[i].dispose();
+            }
+
+            mips.splice(mip_depth, existing_mip_depth - mip_depth);
+
+        } else {
+
+            for (let i = existing_mip_depth; i < mip_depth; i++) {
+
+                mips[i] = new WebGLRenderTarget(1, 1, {
+                    minFilter: NearestFilter,
+                    magFilter: NearestFilter,
+                    format: RedFormat,
+                    type: FloatType,
+                    internalFormat: 'R32F',
+                    depthBuffer: false,
+                    stencilBuffer: false,
+                    wrapS: ClampToEdgeWrapping,
+                    wrapT: ClampToEdgeWrapping,
+                    generateMipmaps: false
+                });
+
+            }
+
+        }
+    }
+
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    set_resolution(x, y) {
+        this.__resolution.set(x, y);
+
+        const mips = this.mips;
+        const mip_count = mips.length;
+
+        let _x = ceilPowerOfTwo(x);
+        let _y = ceilPowerOfTwo(y);
+
+        for (let i = 0; i < mip_count; i++) {
+            const mip = mips[i];
+
+            const _nx = max2(1, _x >> 1);
+            const _ny = max2(1, _y >> 1);
+
+            if (mip.width !== _nx || mip.height !== _ny) {
+                mip.setSize(_nx, _ny);
+            }
+
+            if (_nx === 1 && _x !== _nx) {
+                this.__limits.x = i;
+            }
+
+            if (_ny === 1 && _y !== _ny) {
+                this.__limits.y = i;
+            }
+
+            _x = _nx;
+            _y = _ny;
+        }
+    }
+
+    build_mips() {
+        const mips = this.mips;
+
+        let t0 = null;
+        let t1 = {
+            texture: this.__input_buffer
+        };
+
+        for (let i = 0; i < mips.length; i++) {
+            t0 = t1;
+            t1 = mips[i];
+
+            this.reduce_mip(t0.texture, t1);
+        }
+
+        this.__input_buffer.generateMipmaps = false;
+        this.__input_buffer.mips = mips.map(m => m.texture);
+    }
+
+    /**
+     * @private
+     * @param {THREE.Texture} input
+     * @param {THREE.WebGLRenderTarget} output
+     */
+    reduce_mip(input, output) {
+
+        const material = this.__material;
+        material.uniforms.source_texture.value = input;
+        material.uniforms.destination_resolution.value.set(output.width, output.height);
+        material.uniforms.source_resolution.value.set(input.image.width, input.image.height);
+
+        const renderer = this.__renderer;
+
+        const __rt = renderer.getRenderTarget();
+
+        renderer.setRenderTarget(output);
+
+        renderScreenSpace(renderer, material);
+
+        renderer.setRenderTarget(__rt);
+    }
+
+    /**
+     * Depth texture with mips
+     * @returns {THREE.Texture}
+     */
+    getTexture() {
+        return this.__input_buffer;
+    }
+}

package/engine/graphics/render/visibility/hiz/buffer/ReductionShader.js

@@ -0,0 +1,51 @@
+import { GLSL3, ShaderMaterial, Vector2 } from "three";
+
+export function makeReductionShader() {
+    return new ShaderMaterial({
+        vertexShader: `
+            void main() {
+                gl_Position = vec4( position, 1.0 );
+            }
+        `,
+        fragmentShader: `
+            uniform sampler2D source_texture;
+            
+            uniform vec2 source_resolution;
+            uniform vec2 destination_resolution;
+            
+            out highp float out_value;
+            
+            float reduce(float a, float b, float c, float d){
+                return max( a, max( b, max( c, d ) ) );
+            }
+            
+            void main() {
+                 vec2 source_uv = gl_FragCoord.xy / destination_resolution;
+                 vec2 uv_mapping = source_resolution/destination_resolution;
+                 
+                 ivec2 source_texel_uv_0 = ivec2( source_uv * source_resolution);
+                 
+                 float d0 = texelFetch(source_texture, source_texel_uv_0, 0).x;
+                 float d1 = texelFetch(source_texture, source_texel_uv_0 + ivec2( uv_mapping.x, 0 ), 0).x;
+                 float d2 = texelFetch(source_texture, source_texel_uv_0 + ivec2( 0, uv_mapping.y ), 0).x;
+                 float d3 = texelFetch(source_texture, source_texel_uv_0 + ivec2( uv_mapping.x, uv_mapping.y ), 0).x;
+                 
+                 out_value = reduce(d0, d1, d2, d3);
+            }
+        `,
+        depthTest: false,
+        depthWrite: false,
+        uniforms: {
+            source_texture: {
+                value: null
+            },
+            destination_resolution: {
+                value: new Vector2()
+            },
+            source_resolution: {
+                value: new Vector2()
+            }
+        },
+        glslVersion: GLSL3
+    });
+}

package/engine/graphics/render/visibility/hiz/buildCanvasViewFromTexture.js

@@ -0,0 +1,179 @@
+import { CanvasView } from "../../../../../view/elements/CanvasView.js";
+import {
+    DoubleSide,
+    LinearFilter,
+    Mesh as ThreeMesh,
+    OrthographicCamera,
+    Scene,
+    ShaderMaterial,
+    UnsignedByteType,
+    WebGLRenderTarget
+} from "three";
+import CheckersTexture from "../../../texture/CheckersTexture.js";
+import { FULL_SCREEN_TRIANGLE_GEOMETRY } from "../../../geometry/FULL_SCREEN_TRIANGLE_GEOMETRY.js";
+
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ * @returns {string}
+ */
+function defineSamplerType(texture) {
+    switch (texture.format) {
+        case UnsignedByteType:
+            return 'usampler2D';
+        default:
+            return 'sampler2D'
+    }
+}
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ * @param {string} name
+ * @param {string} uv
+ * @returns {string}
+ */
+function sampleTexel(texture, name, uv) {
+    switch (texture.format) {
+        default:
+            return `texture2D(${name}, ${uv})`;
+    }
+}
+
+/**
+ *
+ * @param {THREE.Texture} texture
+ */
+function makeShader(texture) {
+    return new ShaderMaterial({
+
+        vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+        fragmentShader: /* glsl */`
+
+		uniform ${defineSamplerType(texture)} tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel = ${sampleTexel(texture, 'tDiffuse', 'vUv')};
+			gl_FragColor = texel;
+			
+			gl_FragColor.a = 1.0;
+			// gl_FragColor.r *= 255.0;
+
+		}`,
+        uniforms: {
+
+            'tDiffuse': { value: null }
+
+        }
+    });
+}
+
+/**
+ *
+ * @param {number} height
+ * @param {number} width
+ * @param {THREE.Texture} texture
+ * @param {THREE.WebGLRenderer} renderer
+ * @param flipY
+ * @return {{view: View, render: render}}
+ */
+export function buildCanvasViewFromTexture({
+                                               height,
+                                               width,
+                                               texture = CheckersTexture.create(),
+                                               renderer,
+                                               flipY = true
+                                           }) {
+    const canvasView = new CanvasView();
+    canvasView.size.set(width, height);
+
+    const ctx = canvasView.context2d;
+
+    let copyShader = null;
+
+    const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const scene = new Scene();
+    scene.add(camera);
+
+    const quad = new ThreeMesh(FULL_SCREEN_TRIANGLE_GEOMETRY, null);
+
+    if (flipY) {
+        quad.scale.y = -1;
+    }
+
+    scene.add(quad);
+
+    const gl = renderer.getContext();
+
+    const renderTargetOptions = {
+        generateMipmaps: false,
+        minFilter: LinearFilter,
+        stencilBuffer: false,
+        depthBuffer: false
+    };
+    const renderTarget = new WebGLRenderTarget(width, height, renderTargetOptions);
+
+    const imageData = ctx.createImageData(width, height);
+
+    let __texture_cached = texture;
+
+    /**
+     *
+     * @return {ShaderMaterial}
+     */
+    function getShader() {
+        if (__texture_cached !== texture || copyShader === null) {
+            copyShader = makeShader(texture);
+
+            copyShader.side = DoubleSide;
+            copyShader.uniforms.tDiffuse.value = texture;
+
+            quad.material = copyShader;
+
+            __texture_cached = texture;
+        }
+
+        return copyShader;
+    }
+
+    const render = () => {
+
+        getShader().uniforms.tDiffuse.value = texture;
+
+        renderer.setRenderTarget(renderTarget);
+
+        renderer.render(scene, camera);
+
+        gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, imageData.data);
+
+
+        ctx.putImageData(imageData, 0, 0)
+
+        renderer.setRenderTarget(null);
+    };
+
+    return {
+        view: canvasView,
+        render,
+        set texture(v) {
+
+            texture = v;
+
+            getShader().uniforms.tDiffuse.value = v;
+        }
+    }
+}