@woosh/meep-engine 2.33.4 → 2.33.5

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;
+        }
+    }
+}