debugging minor issues.

examples/js/postprocessing/EffectComposer.js

@@ -12,7 +12,7 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
 
 		var width  = Math.floor( renderer.context.canvas.width  / pixelRatio ) || 1;
 		var height = Math.floor( renderer.context.canvas.height / pixelRatio ) || 1;
-		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
+		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
 
 		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
 

examples/js/postprocessing/MSAAPass.js

@@ -7,7 +7,7 @@ THREE.MSAAPass = function ( scene, camera, params, clearColor, clearAlpha ) {
   this.scene = scene;
   this.camera = camera;
 
-  this.currentSampleLevel = 4;
+  this.sampleLevel = 4;
 
   this.params = params || { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
   this.params.minFilter = THREE.NearestFilter;
@@ -23,14 +23,18 @@ THREE.MSAAPass = function ( scene, camera, params, clearColor, clearAlpha ) {
   this.clear = false;
   this.needsSwap = true;
 
-  var msaaShader = THREE.MSAA4Shader;
-  this.uniforms = THREE.UniformsUtils.clone( msaaShader.uniforms );
+  if ( THREE.CompositeShader === undefined ) {
+		console.error( "THREE.MSAAPass relies on THREE.CompositeShader" );
+	}
 
-  this.materialMSAA = new THREE.ShaderMaterial({
-    shaderID: msaaShader.shaderID,
-    uniforms: this.uniforms,
-    vertexShader: msaaShader.vertexShader,
-    fragmentShader: msaaShader.fragmentShader,
+  var compositeShader = THREE.CompositeShader;
+  this.uniforms = THREE.UniformsUtils.clone( compositeShader.uniforms );
+
+  this.materialComposite = new THREE.ShaderMaterial(  {
+
+		uniforms: this.uniforms,
+		vertexShader: compositeShader.vertexShader,
+		fragmentShader: compositeShader.fragmentShader,
     transparent: true,
     blending: THREE.CustomBlending,
     blendSrc: THREE.OneFactor,
@@ -38,133 +42,83 @@ THREE.MSAAPass = function ( scene, camera, params, clearColor, clearAlpha ) {
     blendEquation: THREE.AddEquation,
     depthTest: false,
     depthWrite: false
-  });
+
+	} );
 
   this.camera2 = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
   this.scene2  = new THREE.Scene();
-
-  this.quad2 = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), null );
+  this.quad2 = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), this.materialComposite );
   this.scene2.add( this.quad2 );
 
-  this.devicePixelRatio = 1;
-
 };
 
 THREE.MSAAPass.prototype = {
 
   dispose: function() {
 
-    if( this.renderTargets ) {
-      for( var i = 0; i < this.renderTargets.length; i ++ ) {
-        this.renderTargets[i].dispose();
-      }
-      this.renderTargets = null;
-    }
-
-  },
+    if( this.sampleRenderTarget ) {
 
-  render: function ( renderer, writeBuffer, readBuffer, delta ) {
+      this.sampleRenderTarget.dispose();
+      this.sampleRenderTarget = null;
 
-    if( ! this.renderTargets ) {
-      this.renderTargets = [];
-      for( var i = 0; i < 2; i ++ ) {
-        this.renderTargets.push( new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params, "msaa.renderTarget" + i ) );
-      }
     }
 
-    var camera = ( this.camera || this.scene.camera );
-
-    var currentSampleOffsets = THREE.MSAAPass.JitterVectors[ Math.max( 0, Math.min( this.currentSampleLevel, 5 ) ) ];
-
-    if( ! currentSampleOffsets ) {
+  },
 
-      renderer.render( this.scene, camera, this.renderTargets[0], true );
+  render: function ( renderer, writeBuffer, readBuffer, delta ) {
 
-      this.uniforms[ "tBackground" ].value = readBuffer;
-      this.uniforms[ "scale" ].value = 1.0;
-      for( var k = 0; k < this.renderTargets.length; k ++ ) {
-        this.uniforms[ "tSample" + k ].value = this.renderTargets[0];
-      }
-      this.quad2.material = this.materialMSAA;
+    if( ! this.sampleRenderTarget ) {
 
-      renderer.render( this.scene2, this.camera2, writeBuffer, true );
+      this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params, "msaa.renderTarget0" );
 
-      return;
     }
 
-    this.scene.overrideMaterial = null;
-
-    this.oldClearColor.copy( renderer.getClearColor() );
-    this.oldClearAlpha = renderer.getClearAlpha();
-
-    renderer.setClearColor( new THREE.Color( 0, 0, 0 ), 0 );
-
-    for( var j = 0; j < currentSampleOffsets.length; j += this.renderTargets.length ) {
-
-      this.uniforms[ "tBackground" ].value = readBuffer;
-      this.uniforms[ "scale" ].value = 1.0 / currentSampleOffsets.length;
-      for( var k = 0; k < this.renderTargets.length; k ++ ) {
-        this.uniforms[ "tSample" + k ].value = this.renderTargets[k];
-      }
-      this.quad2.material = this.materialMSAA;
-
-      for( var k = 0; k < Math.min( currentSampleOffsets.length - j, this.renderTargets.length ); k ++ ) {
-        var i = j + k;
+    var camera = ( this.camera || this.scene.camera );
 
-        if( camera.setViewOffset ) {
+    var jitterOffsets = THREE.MSAAPass.JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
 
-          camera.setViewOffset( readBuffer.width, readBuffer.height, currentSampleOffsets[i].x, currentSampleOffsets[i].y, readBuffer.width, readBuffer.height );
+    this.uniforms[ "tForeground" ].value = this.sampleRenderTarget;
+    this.uniforms[ "scale" ].value = 1.0 / jitterOffsets.length;
 
-        }
+    for( var i = 0; i < jitterOffsets.length; i ++ ) {
 
-        renderer.render( this.scene, camera, this.renderTargets[k], true );
+      if( camera.setViewOffset ) camera.setViewOffset( readBuffer.width, readBuffer.height, jitterOffsets[i].x, jitterOffsets[i].y, readBuffer.width, readBuffer.height );
 
-      }
+      renderer.render( this.scene, camera, this.sampleRenderTarget, true );
 
-      renderer.render( this.scene2, this.camera2, writeBuffer, j === 0 );
+      renderer.render( this.scene2, this.camera2, writeBuffer, i === 0 );
 
     }
 
-    camera.fullWidth = undefined;
-    camera.fullHeight = undefined;
-    camera.x = undefined;
-    camera.y = undefined;
-    camera.width = undefined;
-    camera.height = undefined;
-    camera.updateProjectionMatrix();
-
-    renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
+    if( camera.setViewOffset ) camera.setViewOffset( undefined, undefined, undefined, undefined, undefined, undefined );
 
   }
-};
 
-THREE.MSAAPass.normalizedJitterVectors = function() {
-  var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+};
 
-  return function( jitterVectors ) {
-    var vectors2 = [];
-    for( var i = 0; i < jitterVectors.length; i ++ ) {
-      vectors2.push( new THREE.Vector3( jitterVectors[i][0], jitterVectors[i][0] ).applyMatrix4( xfrm ) );
-    }
-    return vectors2;
+THREE.MSAAPass.normalizedJitterOffsets = function( jitterVectors ) {
+  var vectors2 = [];
+  for( var i = 0; i < jitterVectors.length; i ++ ) {
+    vectors2.push( new THREE.Vector2( jitterVectors[i][0], jitterVectors[i][1] ).multiplyScalar( 1.0 / 16.0 ) );
   }
-}(),
+  return vectors2;
+},
 
 THREE.MSAAPass.JitterVectors = [
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [  0,  0 ]
   ] ),
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [  4,  4 ],
     [ -4, -4 ]
   ] ),
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [ -2, -6 ],
     [  6, -2 ],
     [ -6,  2 ],
     [  2,  6 ]
   ] ),
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [  1, -3 ],
     [ -1,  3 ],
     [  5,  1 ],
@@ -174,7 +128,7 @@ THREE.MSAAPass.JitterVectors = [
     [  3,  7 ],
     [  7, -7 ]
   ] ),
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [  1,  1 ],
     [ -1, -3 ],
     [ -3,  2 ],
@@ -195,7 +149,7 @@ THREE.MSAAPass.JitterVectors = [
     [  6,  7 ],
     [ -7, -8 ]
   ] ),
-  THREE.MSAAPass.normalizedJitterVectors( [
+  THREE.MSAAPass.normalizedJitterOffsets( [
     [ -4, -7 ],
     [ -7, -5 ],
     [ -3, -5 ],

examples/js/shaders/CompositeShader.js

@@ -0,0 +1,55 @@
+/**
+ * @author bhouston / http://clara.io/
+ *
+ * Multi-Sample Anti-aliasing shader - for blending together sample buffers
+ */
+
+THREE.CompositeShader = {
+
+  shaderID: "composite",
+
+	uniforms: {
+
+	//	"tBackground":   { type: "t", value: null },
+		"tForeground":   { type: "t", value: null },
+    "scale":   { type: "f", value: 1.0 }
+
+	},
+
+	vertexShader: [
+
+		"varying vec2 vUv;",
+
+		"void main() {",
+
+			"vUv = uv;",
+			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
+
+		"}"
+
+	].join("\n"),
+
+	fragmentShader: [
+
+		"varying vec2 vUv;",
+
+//		"uniform sampler2D tBackground;",
+		"uniform sampler2D tForeground;",
+		"uniform float scale;",
+
+    "vec4 composite( vec4 foreground, vec4 background ) {",
+    	"return vec4( mix( background.rgb * background.a, foreground.rgb, foreground.a ), background.a * ( 1.0 - foreground.a ) + foreground.a );",
+    "}",
+
+		"void main() {",
+
+		//	"vec4 background = texture2D( tBackground, vUv );",
+      "vec4 foreground = texture2D( tForeground, vUv );",
+
+			"gl_FragColor = foreground * scale;//composite( foreground, background ) * scale;",
+
+		"}"
+
+	].join("\n")
+
+};

examples/js/shaders/MSAAShader.js

@@ -1,67 +0,0 @@
-/**
- * @author bhouston / http://clara.io/
- *
- * Multi-Sample Anti-aliasing shader - for blending together sample buffers
- */
-
-THREE.MSAA4Shader = {
-
-  shaderID: "msaa",
-
-	uniforms: {
-
-		"tBackground":   { type: "t", value: null },
-		"tSample0":   { type: "t", value: null },
-		"tSample1":   { type: "t", value: null },
-		//"tSample2":   { type: "t", value: null },
-		//"tSample3":   { type: "t", value: null },
-		"nSamples":   { type: "i", value: 4 },
-    "scale":   { type: "f", value: 1.0 }
-
-	},
-
-	vertexShader: [
-
-		"varying vec2 vUv;",
-
-		"void main() {",
-
-			"vUv = uv;",
-			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-
-		"}"
-
-	].join("\n"),
-
-	fragmentShader: [
-
-		"varying vec2 vUv;",
-
-		"uniform sampler2D tBackground;",
-
-		"uniform sampler2D tSample0;",
-		"uniform sampler2D tSample1;",
-
-		"uniform int nSamples;",
-		"uniform float scale;",
-
-    "vec4 composite( vec4 foreground, vec4 background ) {",
-    	"return vec4( mix( background.rgb * background.a, foreground.rgb, foreground.a ), background.a * ( 1.0 - foreground.a ) + foreground.a );",
-    "}",
-
-		"void main() {",
-
-			"vec4 background = texture2D( tBackground, vUv );",
-
-			"vec4 foreground = composite( texture2D( tSample0, vUv ), background );",
-			"if( scale < 0.9 ) {",
-				"foreground += composite( texture2D( tSample1, vUv ), background );",
-			"}",
-
-			"gl_FragColor = vec4( foreground.rgb * scale, foreground.a * scale );",
-
-		"}"
-
-	].join("\n")
-
-};

examples/webgl_postprocessing_msaa.html

@@ -21,7 +21,7 @@
 
 		<script src="js/postprocessing/MSAAPass.js"></script>
 		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/MSAAShader.js"></script>
+		<script src="js/shaders/CompositeShader.js"></script>
 
 		<script src="js/postprocessing/EffectComposer.js"></script>
 		<script src="js/postprocessing/RenderPass.js"></script>
@@ -55,7 +55,7 @@
 
 				geometry = new THREE.BoxGeometry( 200, 200, 200 );
 				material = new THREE.MeshBasicMaterial( { map: meshTexture } );
-				meshTexture.anisotropy = 4;
+				meshTexture.anisotropy = 0;
 
 				object = new THREE.Mesh( geometry, material );
 
@@ -65,11 +65,11 @@
 
 				composer = new THREE.EffectComposer( renderer );
 
-				var massPass = new THREE.MSAAPass( scene, camera, new THREE.Color( 1.0, 1.0, 1.0 ), 1.0 );
-				massPass.currentSampleLevel = 4;
+				var massPass = new THREE.MSAAPass( scene, camera, new THREE.Color( 0.0, 0.0, 0.0 ), 0.0 );
+				massPass.sampleLevel = 2;
 				composer.addPass( massPass );
 
-				var copyPass = new THREE.ShaderPass(THREE.CopyShader);
+				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
 		    copyPass.renderToScreen = true;
 				composer.addPass( copyPass );