@woosh/meep-engine 2.106.1 → 2.107.0

package/src/engine/graphics/postprocess/Postprocess.js

@@ -1,284 +0,0 @@
-/**
- * Created by Alex on 11/09/2015.
- */
-import Vector2 from "../../../core/geom/Vector2.js";
-
-import {
-    FloatType,
-    LinearFilter,
-    MeshDepthMaterial,
-    NearestFilter,
-    NoBlending,
-    RGBADepthPacking,
-    RGBAFormat,
-    WebGLRenderTarget
-} from 'three';
-import EffectComposer from "./threejs/postprocessing/EffectComposer.js";
-import RenderPass from "./threejs/postprocessing/RenderPass.js";
-import ShaderPass from "./threejs/postprocessing/ShaderPass.js";
-import AdaptiveToneMappingPass from "./threejs/postprocessing/AdaptiveToneMappingPass.js";
-import BloomPass from "./threejs/postprocessing/BloomPass.js";
-import BokehPass from "./threejs/postprocessing/BokehPass.js";
-import SMAAPass from "./threejs/postprocessing/SMAAPass.js";
-import CopyShader from "./threejs/shaders/CopyShader.js";
-import SSAOShader from "./threejs/shaders/SSAOShader.js";
-import FXAAShader from "./threejs/shaders/FXAAShader.js";
-
-const PostProcess = function (scene, camera, renderer) {
-    this.scene = scene;
-    this.camera = camera;
-    this.graphics = renderer;
-
-    this.size = new Vector2(800, 600);
-};
-
-function makeUniformAccessor(uniforms) {
-    const t = {};
-
-    function bindUniform(propName) {
-        Object.defineProperty(t, propName, {
-            get: function () {
-                return uniforms[propName].value;
-            },
-            set: function (val) {
-                return uniforms[propName].value = val;
-            }
-        })
-    }
-
-    for (let p in uniforms) {
-        if (uniforms.hasOwnProperty(p)) {
-            bindUniform(p);
-        }
-    }
-    return t;
-}
-
-PostProcess.prototype.initializeGUI = function (gui) {
-    const fPostProcess = gui.addFolder("Post-processing");
-    fPostProcess.open();
-    if (this.effectSSAO !== undefined) {
-        const aSSAO = makeUniformAccessor(this.effectSSAO.uniforms);
-        const ssao = fPostProcess.addFolder("SSAO");
-        ssao.add(this.effectSSAO, "enabled");
-
-        ssao.add(aSSAO, "onlyAO");
-        ssao.add(aSSAO, "strength", 0, 1, 0.05);
-        ssao.add(aSSAO, "lumInfluence", 0, 1, 0.05);
-        ssao.add(aSSAO, "aoClamp", 0, 1, 0.05);
-
-        ssao.open();
-    }
-    if (this.effectFXAA !== undefined) {
-        const fxaa = fPostProcess.addFolder("FXAA");
-        fxaa.add(this.effectFXAA, "enabled");
-        fxaa.open();
-    }
-    if (this.effectSMAA !== undefined) {
-        const smaa = fPostProcess.addFolder("SMAA");
-        smaa.add(this.effectSMAA, "enabled");
-        smaa.open();
-    }
-    if (this.effectBloom !== undefined) {
-        const bloom = fPostProcess.addFolder("Bloom");
-        bloom.add(this.effectBloom, "enabled");
-        bloom.open();
-    }
-    if (this.effectToneMap !== undefined) {
-        const toneMap = fPostProcess.addFolder("Tone Mapping");
-        toneMap.add(this.effectToneMap, "enabled");
-
-        const aMTM = makeUniformAccessor(this.effectToneMap.materialToneMap.uniforms);
-        toneMap.add(aMTM, "maxLuminance", 0, 30, 0.05);
-        toneMap.add(aMTM, "middleGrey", 0, 30, 0.05);
-        toneMap.add(aMTM, "averageLuminance", 0, 30, 0.05);
-
-        const aATM = makeUniformAccessor(this.effectToneMap.materialAdaptiveLum.uniforms);
-        toneMap.add(aATM, "tau", 0, 10, 0.1).name('Adaption time');
-
-        toneMap.open();
-    }
-};
-
-PostProcess.prototype.getFinalRenderTarget = function () {
-    const composer = this.composer;
-    const passes = composer.passes;
-
-    let firstRT = true;
-    for (let i = passes.length - 1; i > 0; i--) {
-        //render to screen last pass only
-        const pass = passes[i];
-        if (pass.enabled && pass.needsSwap) {
-            firstRT = !firstRT;
-        }
-    }
-
-    if (firstRT) {
-        return composer.renderTarget1;
-    } else {
-        return composer.renderTarget2;
-    }
-};
-
-PostProcess.prototype.init = function (layer) {
-    const self = this;
-
-    const scene = this.scene;
-    const camera = this.camera;
-    const renderer = this.graphics;
-
-    const gl = renderer.getContext();
-    const parameters = {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBAFormat,
-        stencilBuffer: false
-    };
-
-
-    if (gl.getExtension('OES_texture_half_float_linear') !== null) {
-        parameters.type = FloatType;
-    }
-
-    let renderTarget;
-    if (layer === undefined) {
-        renderTarget = new WebGLRenderTarget(this.size.x, this.size.y, parameters);
-    } else {
-        renderTarget = layer.renderTarget;
-    }
-
-    const composer = this.composer = new EffectComposer(renderer, renderTarget);
-
-    const renderPass = new RenderPass(scene, camera, null, false);
-    renderPass.clear = true;
-    //SSAO
-    const effectSSAO = this.effectSSAO = new ShaderPass(SSAOShader);
-
-    const width = this.size.x;
-    const height = this.size.y;
-
-    // Setup depth pass
-    const depthMaterial = this.depthMaterial = new MeshDepthMaterial();
-    depthMaterial.depthPacking = RGBADepthPacking;
-    depthMaterial.blending = NoBlending;
-    depthMaterial.skinning = false;
-
-
-    const depthTarget = this.depthTarget = new WebGLRenderTarget(width, height, {
-        minFilter: NearestFilter,
-        magFilter: NearestFilter,
-        format: RGBAFormat
-    });
-
-    effectSSAO.uniforms['tDepth'].value = depthTarget;
-    effectSSAO.uniforms['size'].value.set(width, height);
-    effectSSAO.uniforms['cameraNear'].value = camera.near;
-    effectSSAO.uniforms['cameraFar'].value = camera.far;
-    effectSSAO.uniforms['onlyAO'].value = false;
-    effectSSAO.uniforms['strength'].value = 0.5;
-    effectSSAO.uniforms['lumInfluence'].value = 0.5;
-//        effectSSAO.uniforms[ 'fogNear' ].value = scene.fog.near;
-//        effectSSAO.uniforms[ 'fogFar' ].value = scene.fog.far;
-//    effectSSAO.uniforms['fogEnabled'].value = 0;
-    effectSSAO.uniforms['aoClamp'].value = 0.5;
-//        effectSSAO.renderToScreen = true;
-    effectSSAO.material.defines = { "FLOAT_DEPTH": true };
-    //FXAA
-    const effectFXAA = this.effectFXAA = new ShaderPass(FXAAShader);
-    effectFXAA.enabled = false;
-    effectFXAA.uniforms['resolution'].value.set(1 / (width), 1 / (height));
-
-    const effectSMAA = this.effectSMAA = new SMAAPass(width, height);
-    effectSMAA.needsSwap = true;
-
-    //BOKEH
-    let bokehPass = new BokehPass(scene, camera, {
-        focus: 1.0,
-        aperture: 0.025,
-        maxblur: 1.0,
-
-        width: width,
-        height: height
-    });
-    //BLOOM
-    const effectBloom = this.effectBloom = new BloomPass();
-    effectBloom.enabled = false;
-
-    //dynamic tone mapping
-    const adaptToneMappingPass = this.effectToneMap = new AdaptiveToneMappingPass(true, 256);
-    adaptToneMappingPass.enabled = true;
-    adaptToneMappingPass.setMaxLuminance(16);
-    adaptToneMappingPass.setMiddleGrey(7);
-    adaptToneMappingPass.needsSwap = true;
-
-    //Gamma correction
-    const outputCorrectionPass = new ShaderPass(CopyShader);
-    outputCorrectionPass.renderToScreen = true;
-
-    //build up passes
-    composer.addPass(renderPass);
-    // composer.addPass(effectFXAA);
-    composer.addPass(effectSMAA);
-    composer.addPass(effectSSAO);
-    //composer.addPass(bokehPass);
-    composer.addPass(adaptToneMappingPass);
-    composer.addPass(effectBloom);
-    composer.addPass(outputCorrectionPass);
-
-    function update() {
-        let renderToScreenFlagged = false;
-        const passes = composer.passes;
-        for (let i = passes.length - 1; i > 0; i--) {
-            //render to screen last pass only
-            const pass = passes[i];
-            if (pass.enabled && !renderToScreenFlagged) {
-                // pass.renderToScreen = true;
-                renderToScreenFlagged = true;
-                pass.renderToScreen = false;
-            } else {
-                pass.renderToScreen = false;
-            }
-        }
-        //specify if composer should be used at all
-        if (layer !== undefined) {
-            layer.renderTarget = self.getFinalRenderTarget();
-        }
-    }
-
-    update();
-};
-PostProcess.prototype.setViewPortSize = function (width, height) {
-    try {
-        this.size.set(width, height);
-        this.composer.setSize(width, height);
-        //effects
-
-        this.depthTarget = new WebGLRenderTarget(width, height, {
-            minFilter: NearestFilter,
-            magFilter: NearestFilter,
-            format: RGBAFormat
-        });
-//
-        this.effectFXAA.uniforms['resolution'].value.set(1 / width, 1 / height);
-
-        this.effectSMAA.setSize(width, height);
-
-        this.effectSSAO.uniforms['size'].value.set(width, height);
-//
-        this.effectSSAO.uniforms['tDepth'].value = this.depthTarget;
-    } catch (e) {
-        console.error(e);
-    }
-};
-PostProcess.prototype.render = function (renderer, camera, scene, delta) {
-    renderer.gammaInput = true;
-    renderer.gammaOutput = false;
-    renderer.autoClear = false;
-    scene.overrideMaterial = this.depthMaterial;
-    renderer.render(scene, this.camera, this.depthTarget, true);
-
-    //effects render
-    scene.overrideMaterial = null;
-    this.composer.render(delta);
-};
-export default PostProcess;

package/src/engine/graphics/postprocess/threejs/Mirror.js

@@ -1,330 +0,0 @@
-/**
- * @author Slayvin / http://slayvin.net
- */
-import {
-    ArrowHelper,
-    Color,
-    Geometry,
-    Line,
-    LinearFilter,
-    LineBasicMaterial,
-    Math as ThreeMath,
-    Matrix4,
-    Object3D,
-    PerspectiveCamera,
-    Plane,
-    RGBFormat,
-    Scene,
-    ShaderMaterial,
-    UniformsUtils,
-    Vector3,
-    Vector4,
-    WebGLRenderTarget
-} from 'three';
-
-const Shader = {
-
-    uniforms: {
-        "mirrorColor": { value: new Color(0x7F7F7F) },
-        "mirrorSampler": { value: null },
-        "textureMatrix": { value: new Matrix4() }
-    },
-
-    vertexShader: [
-
-        "uniform mat4 textureMatrix;",
-
-        "varying vec4 mirrorCoord;",
-
-        "void main() {",
-
-        "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
-        "vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
-        "mirrorCoord = textureMatrix * worldPosition;",
-
-        "gl_Position = projectionMatrix * mvPosition;",
-
-        "}"
-
-    ].join("\n"),
-
-    fragmentShader: [
-
-        "uniform vec3 mirrorColor;",
-        "uniform sampler2D mirrorSampler;",
-
-        "varying vec4 mirrorCoord;",
-
-        "float blendOverlay(float base, float blend) {",
-        "return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );",
-        "}",
-
-        "void main() {",
-
-        "vec4 color = texture2DProj(mirrorSampler, mirrorCoord);",
-        "color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);",
-
-        "gl_FragColor = color;",
-
-        "}"
-
-    ].join("\n")
-
-};
-
-const Mirror = function (renderer, camera, options) {
-
-    Object3D.call(this);
-
-    this.name = 'mirror_' + this.id;
-
-    options = options || {};
-
-    this.matrixNeedsUpdate = true;
-
-    const width = options.textureWidth !== undefined ? options.textureWidth : 512;
-    const height = options.textureHeight !== undefined ? options.textureHeight : 512;
-
-    this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
-
-    const mirrorColor = options.color !== undefined ? new Color(options.color) : new Color(0x7F7F7F);
-
-    this.graphics = renderer;
-    this.mirrorPlane = new Plane();
-    this.normal = new Vector3(0, 0, 1);
-    this.mirrorWorldPosition = new Vector3();
-    this.cameraWorldPosition = new Vector3();
-    this.rotationMatrix = new Matrix4();
-    this.lookAtPosition = new Vector3(0, 0, -1);
-    this.clipPlane = new Vector4();
-
-    // For debug only, show the normal and plane of the mirror
-    const debugMode = options.debugMode !== undefined ? options.debugMode : false;
-
-    if (debugMode) {
-
-        const arrow = new ArrowHelper(new Vector3(0, 0, 1), new Vector3(0, 0, 0), 10, 0xffff80);
-        const planeGeometry = new Geometry();
-        planeGeometry.vertices.push(new Vector3(-10, -10, 0));
-        planeGeometry.vertices.push(new Vector3(10, -10, 0));
-        planeGeometry.vertices.push(new Vector3(10, 10, 0));
-        planeGeometry.vertices.push(new Vector3(-10, 10, 0));
-        planeGeometry.vertices.push(planeGeometry.vertices[0]);
-        const plane = new Line(planeGeometry, new LineBasicMaterial({ color: 0xffff80 }));
-
-        this.add(arrow);
-        this.add(plane);
-
-    }
-
-    if (camera instanceof PerspectiveCamera) {
-
-        this.camera = camera;
-
-    } else {
-
-        this.camera = new PerspectiveCamera();
-        console.log(this.name + ': camera is not a Perspective Camera!');
-
-    }
-
-    this.textureMatrix = new Matrix4();
-
-    this.mirrorCamera = this.camera.clone();
-    this.mirrorCamera.matrixAutoUpdate = true;
-
-    const parameters = {
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        format: RGBFormat,
-        stencilBuffer: false
-    };
-
-    this.renderTarget = new WebGLRenderTarget(width, height, parameters);
-    this.renderTarget2 = new WebGLRenderTarget(width, height, parameters);
-
-    const mirrorShader = Shader;
-    const mirrorUniforms = UniformsUtils.clone(mirrorShader.uniforms);
-
-    this.material = new ShaderMaterial({
-
-        fragmentShader: mirrorShader.fragmentShader,
-        vertexShader: mirrorShader.vertexShader,
-        uniforms: mirrorUniforms
-
-    });
-
-    this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
-    this.material.uniforms.mirrorColor.value = mirrorColor;
-    this.material.uniforms.textureMatrix.value = this.textureMatrix;
-
-    if (!ThreeMath.isPowerOfTwo(width) || !ThreeMath.isPowerOfTwo(height)) {
-
-        this.renderTarget.texture.generateMipmaps = false;
-        this.renderTarget2.texture.generateMipmaps = false;
-
-    }
-
-};
-
-Mirror.prototype = Object.create(Object3D.prototype);
-Mirror.prototype.constructor = Mirror;
-
-Mirror.prototype.renderWithMirror = function (otherMirror) {
-
-    // update the mirror matrix to mirror the current view
-    this.updateTextureMatrix();
-    this.matrixNeedsUpdate = false;
-
-    // set the camera of the other mirror so the mirrored view is the reference view
-    const tempCamera = otherMirror.camera;
-    otherMirror.camera = this.mirrorCamera;
-
-    // render the other mirror in temp texture
-    otherMirror.renderTemp();
-    otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture;
-
-    // render the current mirror
-    this.render();
-    this.matrixNeedsUpdate = true;
-
-    // restore material and camera of other mirror
-    otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
-    otherMirror.camera = tempCamera;
-
-    // restore texture matrix of other mirror
-    otherMirror.updateTextureMatrix();
-
-};
-
-Mirror.prototype.updateTextureMatrix = function () {
-
-    this.updateMatrixWorld();
-    this.camera.updateMatrixWorld();
-
-    this.mirrorWorldPosition.setFromMatrixPosition(this.matrixWorld);
-    this.cameraWorldPosition.setFromMatrixPosition(this.camera.matrixWorld);
-
-    this.rotationMatrix.extractRotation(this.matrixWorld);
-
-    this.normal.set(0, 0, 1);
-    this.normal.applyMatrix4(this.rotationMatrix);
-
-    const view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition);
-    view.reflect(this.normal).negate();
-    view.add(this.mirrorWorldPosition);
-
-    this.rotationMatrix.extractRotation(this.camera.matrixWorld);
-
-    this.lookAtPosition.set(0, 0, -1);
-    this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-    this.lookAtPosition.add(this.cameraWorldPosition);
-
-    const target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition);
-    target.reflect(this.normal).negate();
-    target.add(this.mirrorWorldPosition);
-
-    this.up.set(0, -1, 0);
-    this.up.applyMatrix4(this.rotationMatrix);
-    this.up.reflect(this.normal).negate();
-
-    this.mirrorCamera.position.copy(view);
-    this.mirrorCamera.up = this.up;
-    this.mirrorCamera.lookAt(target);
-
-    this.mirrorCamera.updateProjectionMatrix();
-    this.mirrorCamera.updateMatrixWorld();
-    this.mirrorCamera.matrixWorldInverse.getInverse(this.mirrorCamera.matrixWorld);
-
-    // Update the texture matrix
-    this.textureMatrix.set(0.5, 0.0, 0.0, 0.5,
-        0.0, 0.5, 0.0, 0.5,
-        0.0, 0.0, 0.5, 0.5,
-        0.0, 0.0, 0.0, 1.0);
-    this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix);
-    this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse);
-
-    // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-    this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition);
-    this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse);
-
-    this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant);
-
-    const q = new Vector4();
-    const projectionMatrix = this.mirrorCamera.projectionMatrix;
-
-    q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-    q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-    q.z = -1.0;
-    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-
-    // Calculate the scaled plane vector
-    let c = new Vector4();
-    c = this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q));
-
-    // Replacing the third row of the projection matrix
-    projectionMatrix.elements[2] = c.x;
-    projectionMatrix.elements[6] = c.y;
-    projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias;
-    projectionMatrix.elements[14] = c.w;
-
-};
-
-Mirror.prototype.render = function (scene) {
-
-    if (this.matrixNeedsUpdate) this.updateTextureMatrix();
-
-    this.matrixNeedsUpdate = true;
-
-
-    if (scene !== undefined && scene instanceof Scene) {
-
-        // We can't render ourself to ourself
-        const visible = this.material.visible;
-        this.material.visible = false;
-
-        const renderer = this.graphics;
-
-        const currentVrEnabled = renderer.vr.enabled;
-        const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
-
-        renderer.vr.enabled = false; // Avoid camera modification and recursion
-        renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-
-        renderer.render(scene, this.mirrorCamera, this.renderTarget, true);
-
-        renderer.vr.enabled = currentVrEnabled;
-        renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-
-        this.material.visible = visible;
-
-    }
-
-};
-
-Mirror.prototype.renderTemp = function () {
-
-    if (this.matrixNeedsUpdate) this.updateTextureMatrix();
-
-    this.matrixNeedsUpdate = true;
-
-    // Render the mirrored view of the current scene into the target texture
-    let scene = this;
-
-    while (scene.parent !== null) {
-
-        scene = scene.parent;
-
-    }
-
-    if (scene !== undefined && scene instanceof Scene) {
-
-        this.graphics.render(scene, this.mirrorCamera, this.renderTarget2, true);
-
-    }
-
-};
-
-
-export default Mirror;