Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Help! Safari bug!

BlackMojito

By BlackMojito,
in Questions & Answers

 Share

Recommended Posts

BlackMojito Newbie

BlackMojito

Posted
Posted

Hi Folks,

I have got a disgusting safari bug as below 

[Error] WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete', or it is a float/half-float type with linear filtering and without the relevant float/half-float linear extension enabled.
    drawElements
    draw (bimernetviewer.bundle.js:11031)
    _finalizeFrame (bimernetviewer.bundle.js:33801)
    _renderForCamera (bimernetviewer.bundle.js:21799)
    _processSubCameras (bimernetviewer.bundle.js:21808)
    render (bimernetviewer.bundle.js:22011)
    (anonymous function) (bimernetviewer.bundle.js:119017)
    _renderLoop (bimernetviewer.bundle.js:10266)
    (anonymous function)

The relative code is  

private _createOverlayRenderTarget(): void {
        let canvas = this.internalScene.getEngine().getRenderingCanvas();

        this._selectionGroupRenderTarget = new BABYLON.RenderTargetTexture('overlayRenderTarget', { width: canvas.width, height: canvas.height },
            this.internalScene, false, false, BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

        this._selectionGroupRenderTarget.hasAlpha = true;

        this._selectionGroupRenderTarget.clearColor = new BABYLON.Color4(0.0, 0.0, 0.0, 0.0);
        this.internalScene.customRenderTargets.push(this._selectionGroupRenderTarget);

        this._selectionGroupRenderTarget.onBeforeRender = () => {
            let overlayMeshes = this._renderScene.secondarySceneRoot.getChildMeshes().slice();
            overlayMeshes = overlayMeshes.filter(e => e.renderingGroupId === 2);
            this._selectionGroupRenderTarget.renderList = [];
            for (let mesh of overlayMeshes) {
                this._selectionGroupRenderTarget.renderList.push(mesh);
            }

            let secondaryMeshes = this._renderScene.secondarySceneRoot.getChildMeshes(false);
            for (let mesh of secondaryMeshes) {
                if (mesh.renderingGroupId === 2) {
                    mesh.visibility = 1.0;
                }
            }
        };

        this._selectionGroupRenderTarget.onAfterRender = () => {
            let secondaryMeshes = this._renderScene.secondarySceneRoot.getChildMeshes(false);
            for (let mesh of secondaryMeshes) {
                if (mesh.renderingGroupId === 2) {
                    mesh.visibility = 0.0;
                }
            }
        };
    }

I tried to hard code the target size to something like 1024 x 1024 and I did not get the error anymore. But the result was not what I expected. Well does anyone know a solution please?

Link to comment
Share on other sites
BlackMojito Newbie

BlackMojito

Posted
  • Author
Posted
16 hours ago, aWeirdo said:

Hi @BlackMojito

If the error is caused by texture being non-power-of-2,
try using CLAMP_ADDRESSMODE;

I can't say for sure it'll work, but it might. 


material.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
material.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;

 

@aWeirdo, thanks, it did solve my problem. But I still have very weird safari problem. When I zoom in (my model covers more pixels), the fps becomes crazily low. I don't have this problem with Chrome. 

I don't any special things in my rendering pipeline. All I have is a customized post processing pipeline. 

import * as BABYLON from 'babylonjs'
import * as Capabilities from '../Device/Capabilities'
import { RenderOptions, SceneOptions } from '../../Preferences'
import { RenderScene } from '../../Scene/RenderScene'
import { MAX_CUTPLANE_COUNT, CUTPLANES_UNIFORM_NAME, CUTPLANE_COUNT_UNIFORM_NAME } from '../../Material/MaterialCommonDefinitions'

import * as ssao_frag from '../Shaders/glsl/ssao_frag.glsl'
import * as gamma_correction_frag from '../Shaders/glsl/gamma_correction_frag.glsl'
import * as final_merge_frag from '../Shaders/glsl/final_merge_frag.glsl'

export class AdvancedPostProcessRenderPipeline extends BABYLON.PostProcessRenderPipeline {

    private _renderScene: RenderScene;
    private _firstUpdate: boolean = true;

    private _selectionGroupRenderTarget: BABYLON.RenderTargetTexture;

    // SSAO
    readonly SSAOOriginalSceneColorEffect: string = "SSAOOriginalSceneColorEffect";
    readonly SSAORenderEffect: string = "SSAORenderEffect";
    readonly SSAOBlurHRenderEffect: string = "SSAOBlurHRenderEffect";
    readonly SSAOBlurVRenderEffect: string = "SSAOBlurVRenderEffect";
    readonly SSAOCombineRenderEffect: string = "SSAOCombineRenderEffect";

    public _ssaoRadius: number = 10;
    public _ssaoBase: number = 0.5;
    public _ssaoTotalStrength: number = 1.0;
    public _ssaoMaxZ: number = 100.0;
    public _ssaoMinZAspect: number = 0.2;

    private _ssaoSamples: number = 16;
    private _ssaoSampleSphere: number[];
    private _ssaoSamplerOffsets: number[];

    private _ssaoExpensiveBlur: boolean = true;

    private _depthTexture: BABYLON.Texture;
    private _normalTexture: BABYLON.Texture;
    private _positionTexture: BABYLON.Texture;

    private _randomTexture: BABYLON.DynamicTexture;

    private _originalColorPostProcess: BABYLON.PassPostProcess;
    private _ssaoPostProcess: BABYLON.PostProcess;
    private _blurHPostProcess: BABYLON.PostProcess;
    private _blurVPostProcess: BABYLON.PostProcess;
    private _ssaoCombinePostProcess: BABYLON.PostProcess;

    private _ssaoRatio: any;

    // FXAA
    readonly FxaaPostProcessId: string = 'FxaaPostProcessEffect';
    private _fxaaEnabled: boolean = true;
    private _fxaa: BABYLON.FxaaPostProcess;

    // Tone Mapping
    readonly ToneMappingPostProcessId: string = 'ToneMappingPostProcessEffect';
    private _toneMappingEnabled: boolean = true;
    private _toneMapping: BABYLON.TonemapPostProcess;

    // Final Merge
    readonly FinalMergePostProcessId: string = 'FinalMergePostProcessEffect';
    private _finalMerge: BABYLON.PostProcess;

    // Gamma Correction
    readonly GammaCorrectionPostProcessId: string = 'GammaCorrectionPostProcessEffect';
    private _gammaCorrection: BABYLON.PostProcess;

    private _defaultPipelineTextureType: number;
    private _hdr: boolean = false;

    constructor(name: string, renderScene: RenderScene, ratio: any, cameras?: BABYLON.Camera[], hdr?: boolean) {
        super(renderScene.scene.getEngine(), name);

        this._renderScene = renderScene;

        if (!Capabilities.isMRTSupported()) {
            BABYLON.Tools.Error("SSAO 2 needs WebGL 2 support.");
            return;
        }

        var caps = this._renderScene.scene.getEngine().getCaps();
        if (hdr) {
            this._hdr = hdr && (caps.textureHalfFloatRender || caps.textureFloatRender);
        }

        if (this._hdr) {
            if (caps.textureHalfFloatRender) {
                this._defaultPipelineTextureType = BABYLON.Engine.TEXTURETYPE_HALF_FLOAT;
            }
            else if (caps.textureFloatRender) {
                this._defaultPipelineTextureType = BABYLON.Engine.TEXTURETYPE_FLOAT;
            }
        } else {
            this._defaultPipelineTextureType = BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT;
        }

        this._ssaoRadius = RenderOptions.ssao2Radius;
        this._ssaoBase = RenderOptions.ssao2Base;
        this._ssaoTotalStrength = RenderOptions.ssao2TotalStrength;
        this._ssaoMaxZ = RenderOptions.ssao2MaxZ;
        this._ssaoMinZAspect = RenderOptions.ssao2MinZ;
        this._ssaoSamples = RenderOptions.ssao2Samples;

        var ssaoRatio = ratio.ssaoRatio || ratio;
        var blurRatio = ratio.blurRatio || ratio;
        this._ssaoRatio = {
            ssaoRatio: ssaoRatio,
            blurRatio: blurRatio
        };

        // Set up assets
        let geometryBufferRenderer = <BABYLON.GeometryBufferRenderer>renderScene.scene.enableGeometryBufferRenderer();
        this._createRandomTexture();
        this._depthTexture = geometryBufferRenderer.getGBuffer().textures[0];
        this._normalTexture = geometryBufferRenderer.getGBuffer().textures[1];

        this._createColorBufferPostProcess();
        this._createSSAOPostProcess(1.0);
        this._createBlurPostProcess(ssaoRatio, blurRatio);
        this._createSSAOCombinePostProcess(blurRatio);

        this._createToneMappingPostProcess();
        this._createFinalMergePostProcess();
        this._createFXAAPostProcess();
        this._createGammaCorrectionPostProcess();

        // Set up pipeline
        this._setupPipeline();

        // Finish
        renderScene.scene.postProcessRenderPipelineManager.addPipeline(this);
        if (cameras)
            renderScene.scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);

        this._createOverlayRenderTarget();
    }

    dispose(disableGeometryBufferRenderer: boolean = false): void {
        for (var i = 0; i < this.internalScene.cameras.length; i++) {
            var camera = this.internalScene.cameras[i];

            this._originalColorPostProcess.dispose(camera);
            this._ssaoPostProcess.dispose(camera);
            this._blurHPostProcess.dispose(camera);
            this._blurVPostProcess.dispose(camera);
            this._ssaoCombinePostProcess.dispose(camera);
            this._fxaa.dispose(camera);
            this._toneMapping.dispose(camera);
            this._finalMerge.dispose(camera);
            this._gammaCorrection.dispose(camera);
        }

        this._randomTexture.dispose();
        this._selectionGroupRenderTarget.dispose();

        if (disableGeometryBufferRenderer)
            this.internalScene.disableGeometryBufferRenderer();

        this.internalScene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this.internalScene.cameras);

        super.dispose();
    }

    private get internalScene(): BABYLON.Scene {
        return this._renderScene.scene;
    }

    private _createOverlayRenderTarget(): void {
        let canvas = this.internalScene.getEngine().getRenderingCanvas();

        this._selectionGroupRenderTarget = new BABYLON.RenderTargetTexture('overlayRenderTarget', { width: canvas.width, height: canvas.height },
            this.internalScene, false, false, this._defaultPipelineTextureType, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

        this._selectionGroupRenderTarget.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
        this._selectionGroupRenderTarget.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;

        this._selectionGroupRenderTarget.hasAlpha = true;

        this._selectionGroupRenderTarget.clearColor = new BABYLON.Color4(0.0, 0.0, 0.0, 0.0);
        this.internalScene.customRenderTargets.push(this._selectionGroupRenderTarget);

        this._selectionGroupRenderTarget.onBeforeRender = () => {
            let overlayMeshes = this._renderScene.secondarySceneRoot.getChildMeshes().slice();
            overlayMeshes = overlayMeshes.filter(e => e.renderingGroupId === 2);
            this._selectionGroupRenderTarget.renderList = [];
            for (let mesh of overlayMeshes) {
                this._selectionGroupRenderTarget.renderList.push(mesh);
            }

            let secondaryMeshes = this._renderScene.secondarySceneRoot.getChildMeshes(false);
            for (let mesh of secondaryMeshes) {
                if (mesh.renderingGroupId === 2) {
                    mesh.visibility = 1.0;
                }
            }
        };

        this._selectionGroupRenderTarget.onAfterRender = () => {
            let secondaryMeshes = this._renderScene.secondarySceneRoot.getChildMeshes(false);
            for (let mesh of secondaryMeshes) {
                if (mesh.renderingGroupId === 2) {
                    mesh.visibility = 0.0;
                }
            }
        };
    }

    private _setupPipeline(): void {
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.SSAOOriginalSceneColorEffect, () => { return this._originalColorPostProcess; }, true));
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.SSAORenderEffect, () => { return this._ssaoPostProcess; }, true));
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.SSAOBlurHRenderEffect, () => { return this._blurHPostProcess; }, true));
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.SSAOBlurVRenderEffect, () => { return this._blurVPostProcess; }, true));
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.SSAOCombineRenderEffect, () => { return this._ssaoCombinePostProcess; }, true));

        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.ToneMappingPostProcessId, () => { return this._toneMapping; }, true));
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.FinalMergePostProcessId, () => { return this._finalMerge; }, true));

        if (this.fxaaEnabled) {
            this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.FxaaPostProcessId, () => { return this._fxaa; }, true));
            //this._fxaa.autoClear = !this._hdr;
        }
        this.addEffect(new BABYLON.PostProcessRenderEffect(this.internalScene.getEngine(), this.GammaCorrectionPostProcessId, () => { return this._gammaCorrection; }, true));
    }

    resize(): void {
        let canvas = this.internalScene.getEngine().getRenderingCanvas();
        this._selectionGroupRenderTarget.resize({ width: canvas.width, height: canvas.height });
    }

    _rebuild() {
        this._firstUpdate = true;
        super._rebuild();
    }

    enableSSAO(enabled: boolean): void {
        if (enabled) {
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.SSAORenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.SSAOBlurHRenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.SSAOBlurVRenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.SSAOCombineRenderEffect, this.internalScene.activeCamera);
        } else {
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.SSAORenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.SSAOBlurHRenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.SSAOBlurVRenderEffect, this.internalScene.activeCamera);
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.SSAOCombineRenderEffect, this.internalScene.activeCamera);
        }
    }

    enableToneMapping(enabled: boolean): void {
        if (enabled) {
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.ToneMappingPostProcessId, this.internalScene.activeCamera);
        } else {
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.ToneMappingPostProcessId, this.internalScene.activeCamera);
        }
    }

    enableGammaCorrection(enabled: boolean): void {
        if (enabled) {
            this.internalScene.postProcessRenderPipelineManager.enableEffectInPipeline(this._name, this.GammaCorrectionPostProcessId, this.internalScene.activeCamera);
        } else {
            this.internalScene.postProcessRenderPipelineManager.disableEffectInPipeline(this._name, this.GammaCorrectionPostProcessId, this.internalScene.activeCamera);
        }
    }

    set ssaoSamples(n: number) {
        this._ssaoPostProcess.updateEffect("#define SAMPLES " + n + "\n#define SSAO");
        this._ssaoSamples = n;
        this._ssaoSampleSphere = this._generateHemisphere();

        this._firstUpdate = true;
    }

    get ssaoSamples(): number {
        return this._ssaoSamples;
    }

    set ssaoExpensiveBlur(b: boolean) {
        this._blurHPostProcess.updateEffect("#define BILATERAL_BLUR\n#define BILATERAL_BLUR_H\n#define SAMPLES 16\n#define EXPENSIVE " + (b ? "1" : "0") + "\n",
            null, ["textureSampler", "depthSampler"]);
        this._blurVPostProcess.updateEffect("#define BILATERAL_BLUR\n#define SAMPLES 16\n#define EXPENSIVE " + (b ? "1" : "0") + "\n",
            null, ["textureSampler", "depthSampler"]);
        this._ssaoExpensiveBlur = b;
        this._firstUpdate = true;
    }

    get ssaoExpensiveBlur(): boolean {
        return this._ssaoExpensiveBlur;
    }

    // Private Methods
    private _createBlurPostProcess(ssaoRatio: number, blurRatio: number): void {
        this._ssaoSamplerOffsets = [];
        var expensive = this._ssaoExpensiveBlur;

        for (var i = -8; i < 8; i++) {
            this._ssaoSamplerOffsets.push(i * 2 + 0.5);
        }

        this._blurHPostProcess = new BABYLON.PostProcess("BlurH", "ssao2", ["outSize", "samplerOffsets", "near", "far", "radius"], ["depthSampler"], 
                                                        ssaoRatio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this.internalScene.getEngine(), 
                                                        false, "#define BILATERAL_BLUR\n#define BILATERAL_BLUR_H\n#define SAMPLES 16\n#define EXPENSIVE " + (expensive ? "1" : "0") + "\n", 
                                                        this._defaultPipelineTextureType);

        this._blurHPostProcess.onApply = (effect: BABYLON.Effect) => {
            if (!this.internalScene.activeCamera) {
                return;
            }

            effect.setFloat("outSize", this._ssaoCombinePostProcess.width > 0 ? this._ssaoCombinePostProcess.width : this._originalColorPostProcess.width);
            effect.setFloat("near", this.internalScene.activeCamera.minZ);
            effect.setFloat("far", this.internalScene.activeCamera.maxZ);
            effect.setFloat("radius", this._ssaoRadius);
            effect.setTexture("depthSampler", this._depthTexture);

            if (this._firstUpdate) {
                effect.setArray("samplerOffsets", this._ssaoSamplerOffsets);
            }
        };

        this._blurVPostProcess = new BABYLON.PostProcess("BlurV", "ssao2", ["outSize", "samplerOffsets", "near", "far", "radius"], ["depthSampler"], 
                                                        blurRatio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this.internalScene.getEngine(), 
                                                        false, "#define BILATERAL_BLUR\n#define BILATERAL_BLUR_V\n#define SAMPLES 16\n#define EXPENSIVE " + (expensive ? "1" : "0") + "\n", 
                                                        this._defaultPipelineTextureType);
                                                        
        this._blurVPostProcess.onApply = (effect: BABYLON.Effect) => {
            if (!this.internalScene.activeCamera) {
                return;
            }

            effect.setFloat("outSize", this._ssaoCombinePostProcess.height > 0 ? this._ssaoCombinePostProcess.height : this._originalColorPostProcess.height);
            effect.setFloat("near", this.internalScene.activeCamera.minZ);
            effect.setFloat("far", this.internalScene.activeCamera.maxZ);
            effect.setFloat("radius", this._ssaoRadius);
            effect.setTexture("depthSampler", this._depthTexture);

            if (this._firstUpdate) {
                effect.setArray("samplerOffsets", this._ssaoSamplerOffsets);
                this._firstUpdate = false;
            }
        };
    }

    private _generateHemisphere(): number[] {
        var numSamples = this._ssaoSamples;
        var result = [];
        var vector, scale;

        var rand = (min: number, max: number) => {
            return Math.random() * (max - min) + min;
        }

        var i = 0;
        while (i < numSamples) {
            vector = new BABYLON.Vector3(
                rand(-1.0, 1.0),
                rand(-1.0, 1.0),
                rand(0.3, 1.0));
            vector.normalize();
            scale = i / numSamples;
            scale = BABYLON.Scalar.Lerp(0.1, 1.0, scale * scale);
            vector.scaleInPlace(scale);

            result.push(vector.x, vector.y, vector.z);
            i++;
        }

        return result;
    }

    private _createColorBufferPostProcess(): void {
        this._originalColorPostProcess = new BABYLON.PassPostProcess("SSAOOriginalSceneColor", 1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this.internalScene.getEngine(), false, this._defaultPipelineTextureType);
    }

    private _createSSAOPostProcess(ratio: number): void {
        var numSamples = this._ssaoSamples;

        this._ssaoSampleSphere = this._generateHemisphere();

        let shader = BABYLON.Effect.ShadersStore['custom_ssao2' + 'FragmentShader'];
        if (!shader) {
            let ssao_frag_shader: string = ssao_frag;
            BABYLON.Effect.ShadersStore['custom_ssao2' + 'FragmentShader'] = ssao_frag_shader;
        }

        this._ssaoPostProcess = new BABYLON.PostProcess("ssao2", "custom_ssao2",
            [
                "sampleSphere", "samplesFactor", "randTextureTiles", "totalStrength", "radius",
                "base", "range", "projection", "near", "far", "texelSize",
                "xViewport", "yViewport", "maxZ", "minZAspect"//, "cutPlaneCount", "cutPlanes", "viewMatrixInv"
            ],
            ["randomSampler", "normalSampler"],
            ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE,
            this.internalScene.getEngine(), false,
            "#define MAX_CUTPLANE_COUNT " + MAX_CUTPLANE_COUNT + "\n#define SAMPLES " + numSamples + "\n#define SSAO", this._defaultPipelineTextureType);

        this._ssaoPostProcess.onApply = (effect: BABYLON.Effect) => {
            if (this._firstUpdate) {
                effect.setArray3("sampleSphere", this._ssaoSampleSphere);
                effect.setFloat("randTextureTiles", 4.0);
            }

            if (!this.internalScene.activeCamera) {
                return;
            }

            effect.setFloat("samplesFactor", 1 / this._ssaoSamples);
            effect.setFloat("totalStrength", this._ssaoTotalStrength);
            effect.setFloat2("texelSize", 1 / this._ssaoPostProcess.width, 1 / this._ssaoPostProcess.height);
            effect.setFloat("radius", this._ssaoRadius);
            effect.setFloat("maxZ", this._ssaoMaxZ);
            effect.setFloat("minZAspect", this._ssaoMinZAspect);
            effect.setFloat("base", this._ssaoBase);
            effect.setFloat("near", this.internalScene.activeCamera.minZ);
            effect.setFloat("far", this.internalScene.activeCamera.maxZ);
            effect.setFloat("xViewport", Math.tan(this.internalScene.activeCamera.fov / 2) * this.internalScene.getEngine().getAspectRatio(this.internalScene.activeCamera, true));
            effect.setFloat("yViewport", Math.tan(this.internalScene.activeCamera.fov / 2));
            effect.setMatrix("projection", this.internalScene.getProjectionMatrix());

            let viewMatrixInv = BABYLON.Matrix.Identity();
            this.internalScene.getViewMatrix().invertToRef(viewMatrixInv);
            effect.setMatrix("viewMatrixInv", viewMatrixInv);

            effect.setTexture("textureSampler", this._depthTexture);
            effect.setTexture("normalSampler", this._normalTexture);
            effect.setTexture("randomSampler", this._randomTexture);
        };
    }

    private _createSSAOCombinePostProcess(ratio: number): void {
        this._ssaoCombinePostProcess = new BABYLON.PostProcess("ssaoCombine", "ssaoCombine", [], ["originalColor"],
            ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE,
            this.internalScene.getEngine(), false, '', this._defaultPipelineTextureType);

        this._ssaoCombinePostProcess.onApply = (effect: BABYLON.Effect) => {
            effect.setTextureFromPostProcess("originalColor", this._originalColorPostProcess);
        };
    }

    private _createRandomTexture(): void {
        var size = 512;

        this._randomTexture = new BABYLON.DynamicTexture("SSAORandomTexture", size, this.internalScene, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
        this._randomTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
        this._randomTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;

        var context = this._randomTexture.getContext();

        var rand = (min: number, max: number) => {
            return Math.random() * (max - min) + min;
        }

        var randVector = BABYLON.Vector3.Zero();

        for (var x = 0; x < size; x++) {
            for (var y = 0; y < size; y++) {
                randVector.x = rand(0.0, 1.0);
                randVector.y = rand(0.0, 1.0);
                randVector.z = 0.0;

                randVector.normalize();

                randVector.scaleInPlace(255);
                randVector.x = Math.floor(randVector.x);
                randVector.y = Math.floor(randVector.y);

                context.fillStyle = 'rgb(' + randVector.x + ', ' + randVector.y + ', ' + randVector.z + ')';
                context.fillRect(x, y, 1, 1);
            }
        }

        this._randomTexture.update(false);
    }

    // FXAA
    get fxaaEnabled(): boolean {
        return this._fxaaEnabled;
    }

    set fxaaEnabled(enabled: boolean) {
        if (this._fxaaEnabled === enabled) {
            return;
        }
        this._fxaaEnabled = enabled;

        this._setupPipeline();
    }

    private _createFXAAPostProcess(): void {
        this._fxaa = new BABYLON.FxaaPostProcess("fxaa", 1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this.internalScene.getEngine(), false, this._defaultPipelineTextureType);
    }

    // Gamma Correction
    private _createGammaCorrectionPostProcess(): void {
        let shader = BABYLON.Effect.ShadersStore['gamma_correction' + 'FragmentShader'];
        if (!shader) {
            let gamma_correction_frag_shader: string = gamma_correction_frag;
            BABYLON.Effect.ShadersStore['gamma_correction' + 'FragmentShader'] = gamma_correction_frag_shader;
        }
        this._gammaCorrection = new BABYLON.PostProcess("gamma_correction", "gamma_correction",
            [
                "gamma"
            ],
            [],
            1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE,
            this.internalScene.getEngine(), false, '', this._defaultPipelineTextureType);

        this._gammaCorrection.onApply = (effect: BABYLON.Effect) => {
            effect.setFloat('gamma', RenderOptions.gammaValue);
        };
    }

    // Tone Mapping
    private _createToneMappingPostProcess(): void {
        this._toneMapping = new BABYLON.TonemapPostProcess('tone_mapping', RenderOptions.toneMappingMethod, RenderOptions.toneMappingExposureAdjustment,
            null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this.internalScene.getEngine(), this._defaultPipelineTextureType);
    }

    // Final Merge
    private _createFinalMergePostProcess(): void {
        let shader = BABYLON.Effect.ShadersStore['final_merge' + 'FragmentShader'];
        if (!shader) {
            let final_merge_frag_shader: string = final_merge_frag;
            BABYLON.Effect.ShadersStore['final_merge' + 'FragmentShader'] = final_merge_frag_shader;
        }
        this._finalMerge = new BABYLON.PostProcess("final_merge", "final_merge",
            [
                'selectionColor', 'resolution'
            ],
            [
                'selectionSampler'
            ],
            1.0, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE,
            this.internalScene.getEngine(), false, '', this._defaultPipelineTextureType);

        this._finalMerge.onApply = (effect: BABYLON.Effect) => {
            effect.setFloat3('selectionColor', SceneOptions.selectionColor.r, SceneOptions.selectionColor.g, SceneOptions.selectionColor.b);
            effect.setFloat2("resolution", 1.0 / this._finalMerge.width, 1.0 / this._finalMerge.height);
            effect.setTexture('selectionSampler', this._selectionGroupRenderTarget);
        };
    }

    private supportsMultiSampleRenderTargets(): boolean {
        return Capabilities.WebGLVersion(this.internalScene.getEngine()) >= 2.0;
    }
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...