Wagner GODRAY Usage

postprocesing.js

import THREE from 'three'

import WAGNER from '@superguigui/wagner'

import Config from '../../config'

import Mediator from '../../utils/Mediator.js'

let gui = require('dat-gui').GUI
let config = Config.instance
let emitter = Mediator.instance.emitter

class PostProcessing {

    constructor(scene, camera, blackScene, renderer, vLight) {
        
        this.debug = true

        // vLight is the fake light ( in my case ) : 

        // this.lightColor = 0xbb88bb

        // this.vLight = new THREE.Mesh(
        //     new THREE.IcosahedronGeometry(140, 3),
        //     new THREE.MeshBasicMaterial({
        //         color: this.lightColor
        //     })
        // )

        this.vLight = vLight;

        this.scene = scene

        this.camera = camera

        this.renderer = renderer

        this.passes = []

        // blackScene is a duplicate of the main scene but with overrided black standard material, plus the vLight !

        // to calculate the very basic occlusion without effect in a render target

        this.blackScene = blackScene

        this.composer = new WAGNER.Composer(this.renderer);

        this.composer.setSize(window.innerWidth * config.devicePixelRatio, window.innerHeight * config.devicePixelRatio);

        // in this renderer target ! 

        this.occlusion = new THREE.WebGLRenderTarget( window.innerWidth / 2,  window.innerHeight / 2 , { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

        this.composer.renderer.autoClear = false

        this.sunPosition = new THREE.Vector3( this.vLight.position.x , this.vLight.position.y , this.vLight.position.z );

        this.screenSpacePosition = new THREE.Vector3();

        this.screenSpacePosition.copy( this.sunPosition ).project( this.camera );

        this.screenSpacePosition.x = ( this.screenSpacePosition.x + 1 ) / 2;

        this.screenSpacePosition.y = ( this.screenSpacePosition.y + 1 ) / 2;

        this.initPasses()

        this.initGUI()

        this.addEvents()

    }

    projectionOnScreen() {

        this.screenSpacePosition.copy( this.sunPosition ).project( this.camera );
        this.screenSpacePosition.x = ( this.screenSpacePosition.x + 1 ) / 2;
        this.screenSpacePosition.y = ( this.screenSpacePosition.y + 1 ) / 2;
        
    }

    initPasses() {


        let BlendPass = require('@superguigui/wagner/src/passes/blend/BlendPass')

        this.BlendPass = {

            name: 'BlendPass',
            pass: new BlendPass(),
            active: false
        }


        let godRayMultipass = require('@superguigui/wagner/src/passes/godray/godraypass');

        this.godRay = {

            name: 'godray',
            pass: new godRayMultipass(),
            active: true

        }

        this.passes = [this.godRay]

    }

    render() {

        this.composer.reset()

        this.composer.renderer.clear()

        this.composer.render(this.blackScene, this.camera)

        this.projectionOnScreen(this.vLight, this.camera);

        this.godRay.pass.params.fX = this.screenSpacePosition.x;

        this.godRay.pass.params.fY = this.screenSpacePosition.y;

        this.composer.pass( this.godRay.pass )

        this.composer.toTexture(this.occlusion)

        // The godray occlusion is calculated into the occlusion texture, now, blend it over the original scene

        this.composer.render(this.scene, this.camera)

        this.BlendPass.pass.params.tInput2 = this.occlusion

        this.composer.pass(this.BlendPass.pass)

        this.composer.toScreen()

    }


    initGUI() {

        this.GUI = new gui()

        this.passes.forEach((shaderItem, index) => {

            shaderItem.pass.name = shaderItem.name;

            var shaderFolder = this.GUI.addFolder(shaderItem.name);

            var shaderParams = shaderItem.pass.params;

            shaderFolder.add(shaderItem, 'active');

            for (var paramName in shaderParams) {

                if (shaderParams.hasOwnProperty(paramName)) {

                    var paramType = this.toType(shaderParams[paramName]);

                    if (paramType === 'number' ||
                        paramType === 'boolean' ||
                        paramType === 'string') {

                        shaderFolder.add(shaderParams, paramName);

                    } else if (paramType === 'object') {

                        var paramFolder = shaderFolder.addFolder(paramName);

                        for (var subParamName in shaderParams[paramName]) {

                            if (shaderParams[paramName].hasOwnProperty(subParamName)) {

                                var subParamType = this.toType(shaderParams[paramName][subParamName]);
                                if (subParamType === 'number' ||
                                    subParamType === 'boolean' ||
                                    subParamType === 'string') {

                                    paramFolder.add(shaderParams[paramName], subParamName);

                                }
                            }
                        }
                    }
                }
            }
        })
    }

    addEvents() {
        
        emitter.on('resize', this.resize.bind(this))

    }

    resize(w, h ) {

        this.w = w

        this.h = h

        this.composer.setSize(this.w * config.devicePixelRatio , this.h * config.devicePixelRatio);

        this.occlusion.setSize(this.w / 2 , this.h / 2 )
    }

    toType(obj) {

        return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()

    }

}

export default PostProcessing;