Support backgrounds (cube, texture, color) via passes

examples/files.js

@@ -189,6 +189,7 @@ var files = {
 		"webgl_points_sprites",
 		"webgl_postprocessing",
 		"webgl_postprocessing_advanced",
+		"webgl_postprocessing_backgrounds",
 		"webgl_postprocessing_crossfade",
 		"webgl_postprocessing_dof",
 		"webgl_postprocessing_dof2",

examples/js/postprocessing/CubeTexturePass.js

@@ -0,0 +1,57 @@
+/**
+ * @author bhouston / http://clara.io/
+ */
+
+THREE.CubeTexturePass = function ( camera, envMap, opacity ) {
+
+	THREE.Pass.call( this );
+
+	this.camera = camera;
+
+	this.needsSwap = false;
+
+	this.cubeShader = THREE.ShaderLib[ 'cube' ];
+	this.cubeMesh = new THREE.Mesh(
+		new THREE.BoxBufferGeometry( 10, 10, 10 ),
+		new THREE.ShaderMaterial( {
+			uniforms: this.cubeShader.uniforms,
+			vertexShader: this.cubeShader.vertexShader,
+			fragmentShader: this.cubeShader.fragmentShader,
+			depthTest: false,
+			depthWrite: false,
+			side: THREE.BackSide
+		} )
+	);
+
+	this.envMap = envMap;
+	this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
+
+	this.cubeScene = new THREE.Scene();
+	this.cubeCamera = new THREE.PerspectiveCamera();
+	this.cubeScene.add( this.cubeMesh );
+
+};
+
+THREE.CubeTexturePass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
+
+	constructor: THREE.CubeTexturePass,
+
+	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
+
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		this.cubeCamera.projectionMatrix.copy( this.camera.projectionMatrix );
+		this.cubeCamera.quaternion.setFromRotationMatrix( this.camera.matrixWorld );
+
+		this.cubeMesh.material.uniforms[ "tCube" ].value = this.envMap;
+		this.cubeMesh.material.uniforms[ "opacity" ].value = this.opacity;
+		this.cubeMesh.material.transparent = ( this.opacity < 1.0 );
+
+		renderer.render( this.cubeScene, this.cubeCamera, this.renderToScreen ? null : readBuffer, this.clear );
+
+		renderer.autoClear = oldAutoClear;
+
+	}
+
+} );

examples/js/postprocessing/RenderPass.js

@@ -25,6 +25,9 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
 		this.scene.overrideMaterial = this.overrideMaterial;
 
 		var oldClearColor, oldClearAlpha;
@@ -47,7 +50,7 @@ THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 		}
 
 		this.scene.overrideMaterial = null;
-
+		renderer.autoClear = oldAutoClear;
 	}
 
 } );

examples/js/postprocessing/TexturePass.js

@@ -2,7 +2,7 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.TexturePass = function ( texture, opacity ) {
+THREE.TexturePass = function ( map, opacity ) {
 
 	THREE.Pass.call( this );
 
@@ -11,16 +11,18 @@ THREE.TexturePass = function ( texture, opacity ) {
 
 	var shader = THREE.CopyShader;
 
-	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+	this.map = map;
+	this.opacity = ( opacity !== undefined ) ? opacity : 1.0;
 
-	this.uniforms[ "opacity" ].value = ( opacity !== undefined ) ? opacity : 1.0;
-	this.uniforms[ "tDiffuse" ].value = texture;
+	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
 	this.material = new THREE.ShaderMaterial( {
 
 		uniforms: this.uniforms,
 		vertexShader: shader.vertexShader,
-		fragmentShader: shader.fragmentShader
+		fragmentShader: shader.fragmentShader,
+		depthTest: false,
+		depthWrite: false
 
 	} );
 
@@ -40,10 +42,18 @@ THREE.TexturePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
 
 	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
 
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
 		this.quad.material = this.material;
 
-		renderer.render( this.scene, this.camera, readBuffer, this.clear );
+		this.uniforms[ "opacity" ].value = this.opacity;
+		this.uniforms[ "tDiffuse" ].value = this.map;
+		this.material.transparent = ( this.opacity < 1.0 );
+
+		renderer.render( this.scene, this.camera, this.renderToScreen ? null : readBuffer, this.clear );
 
+		renderer.autoClear = oldAutoClear;
 	}
 
 } );