瀏覽代碼

Changed code and added some documentation.

Tentone 8 年之前
父節點
當前提交
e6f08bdace
共有 2 個文件被更改,包括 69 次插入16 次删除
  1. 64 11
      examples/js/postprocessing/SSAOPass.js
  2. 5 5
      examples/webgl_postprocessing_ssao.html

+ 64 - 11
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;

+ 5 - 5
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 );