From e6f08bdace81a6c727765ba2d951e4b74e8f9e49 Mon Sep 17 00:00:00 2001 From: Tentone Date: Mon, 28 Aug 2017 19:32:36 +0100 Subject: [PATCH] Changed code and added some documentation. --- examples/js/postprocessing/SSAOPass.js | 75 +++++++++++++++++++++---- examples/webgl_postprocessing_ssao.html | 10 ++-- 2 files changed, 69 insertions(+), 16 deletions(-) diff --git a/examples/js/postprocessing/SSAOPass.js b/examples/js/postprocessing/SSAOPass.js index efef978ea1..f0daefb582 100644 --- a/examples/js/postprocessing/SSAOPass.js +++ b/examples/js/postprocessing/SSAOPass.js @@ -1,31 +1,37 @@ 'use strict'; -/* +/** * Screen-space ambient occlusion pass. * * Has the following parameters * - radius + * - Ambient occlusion shadow radius (numeric value). * - onlyAO + * - Display only ambient occlusion result (boolean value). * - aoClamp + * - Ambient occlusion clamp (numeric value). * - lumInfluence + * - Pixel luminosity influence in AO calculation (numeric value). * * To output to screen set renderToScreens true * * @author alteredq / http://alteredqualia.com/ * @author tentone + * @class SSAOPass */ THREE.SSAOPass = function ( scene, camera, width, height ) { - if ( THREE.SSAOShader === undefined) - { - console.warn('THREE.SSAOPass depends on THREE.SSAOShader'); + if ( THREE.SSAOShader === undefined) { + + console.warn( 'THREE.SSAOPass depends on THREE.SSAOShader' ); return new THREE.ShaderPass(); + } THREE.ShaderPass.call( this, THREE.SSAOShader ); this.width = ( width !== undefined ) ? width : 512; - this.height = ( height !== undefined ) ? height : 512; + this.height = ( height !== undefined ) ? height : 256; this.renderToScreen = false; @@ -39,7 +45,7 @@ THREE.SSAOPass = function ( scene, camera, width, height ) { //Depth render target this.depthRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } ); - this.depthRenderTarget.texture.name = 'SSAOShader.rt'; + //this.depthRenderTarget.texture.name = 'SSAOShader.rt'; //Shader uniforms this.uniforms[ 'tDepth' ].value = this.depthRenderTarget.texture; @@ -58,22 +64,22 @@ THREE.SSAOPass = function ( scene, camera, width, height ) { radius: { get: function() { return this.uniforms[ 'radius' ].value; }, - set: function(value) { this.uniforms[ 'radius' ].value = value; } + set: function( value ) { this.uniforms[ 'radius' ].value = value; } }, onlyAO: { get: function() { return this.uniforms[ 'onlyAO' ].value; }, - set: function(value) { this.uniforms[ 'onlyAO' ].value = value; } + set: function( value ) { this.uniforms[ 'onlyAO' ].value = value; } }, aoClamp: { get: function() { return this.uniforms[ 'aoClamp' ].value; }, - set: function(value) { this.uniforms[ 'aoClamp' ].value = value; } + set: function( value ) { this.uniforms[ 'aoClamp' ].value = value; } }, lumInfluence: { get: function() { return this.uniforms[ 'lumInfluence' ].value; }, - set: function(value) { this.uniforms[ 'lumInfluence' ].value = value; } + set: function( value ) { this.uniforms[ 'lumInfluence' ].value = value; } }, }); @@ -81,18 +87,65 @@ THREE.SSAOPass = function ( scene, camera, width, height ) { THREE.SSAOPass.prototype = Object.create( THREE.ShaderPass.prototype ); +/** + * Render using this pass. + * + * @method render + * @param {WebGLRenderer} renderer + * @param {WebGLRenderTarget} writeBuffer Buffer to write output. + * @param {WebGLRenderTarget} readBuffer Input buffer. + * @param {Number} delta Delta time in milliseconds. + * @param {Boolean} maskActive Not used in this pass. + */ THREE.SSAOPass.prototype.render = function( renderer, writeBuffer, readBuffer, delta, maskActive ) { //Render depth into depthRenderTarget this.scene2.overrideMaterial = this.depthMaterial; + renderer.render( this.scene2, this.camera2, this.depthRenderTarget, true ); - //Render renderPass and SSAO shaderPass this.scene2.overrideMaterial = null; + + + //SSAO shaderPass THREE.ShaderPass.prototype.render.call( this, renderer, writeBuffer, readBuffer, delta, maskActive ); }; +/** + * Change scene to be renderer by this render pass. + * + * @method setScene + * @param {Scene} scene + */ +THREE.SSAOPass.prototype.setScene = function(scene) { + + this.scene2 = scene; + +}; + +/** + * Set camera used by this render pass. + * + * @method setCamera + * @param {Camera} camera + */ +THREE.SSAOPass.prototype.setCamera = function( camera ) { + + this.camera2 = camera; + + this.uniforms[ 'cameraNear' ].value = this.camera2.near; + this.uniforms[ 'cameraFar' ].value = this.camera2.far; + +}; + +/** + * Set resolution of this render pass. + * + * @method setSize + * @param {Number} width + * @param {Number} height + */ THREE.SSAOPass.prototype.setSize = function( width, height ) { this.width = width; diff --git a/examples/webgl_postprocessing_ssao.html b/examples/webgl_postprocessing_ssao.html index e18c01df25..76b73d8957 100644 --- a/examples/webgl_postprocessing_ssao.html +++ b/examples/webgl_postprocessing_ssao.html @@ -121,15 +121,15 @@ Spiral sampling http://web.archive.org/web/20120421191837/http://www.cgafaq.info // Init gui var gui = new dat.GUI(); - gui.add( postprocessing, "enabled" ); + gui.add( postprocessing, 'enabled' ); - gui.add( postprocessing, "onlyAO", false ).onChange( function( value ) { ssaoPass.onlyAO = value; } ); + gui.add( postprocessing, 'onlyAO', false ).onChange( function( value ) { ssaoPass.onlyAO = value; } ); - gui.add( postprocessing, "radius" ).min( 0 ).max( 64 ).onChange( function( value ) { ssaoPass.radius = value; } ); + gui.add( postprocessing, 'radius' ).min( 0 ).max( 64 ).onChange( function( value ) { ssaoPass.radius = value; } ); - gui.add( postprocessing, "aoClamp" ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.aoClamp = value; } ); + gui.add( postprocessing, 'aoClamp' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.aoClamp = value; } ); - gui.add( postprocessing, "lumInfluence" ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.lumInfluence = value; } ); + gui.add( postprocessing, 'lumInfluence' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.lumInfluence = value; } ); window.addEventListener( 'resize', onWindowResize, false ); -- GitLab