extracting MSAAShader/MSAAPass from Clara.io custom ThreeJS.

examples/js/postprocessing/MSAAPass.js

@@ -0,0 +1,281 @@
+/**
+ * @author bhouston / http://clara.io/
+ */
+
+THREE.MSAAPass = function ( scene, camera, params, clearColor, clearAlpha ) {
+
+  this.scene = scene;
+  this.camera = camera;
+
+  // any set of samples in equal area weighting pattern is fine (3 or +4 samples would also work as well)
+  this.sampleOffsets = [];
+  this.sampleOffsets[0] = null;
+  this.sampleOffsets[1] = this.standardDirctX11_MSAA2();
+  this.sampleOffsets[2] = this.standardDirctX11_MSAA4();
+  this.sampleOffsets[3] = this.standardDirctX11_MSAA8();
+  this.sampleOffsets[4] = this.standardDirctX11_MSAA16();
+  this.sampleOffsets[5] = this.standardDirctX11_MSAA32();
+
+  this.currentSampleLevel = 4;
+
+  this.params = params || { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+  this.params.minFilter = THREE.NearestFilter;
+  this.params.maxFilter = THREE.NearestFilter;
+
+  this.clearColor = clearColor;
+  this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
+
+  this.oldClearColor = new THREE.Color();
+  this.oldClearAlpha = 1;
+
+  this.enabled = true;
+  this.clear = false;
+  this.needsSwap = true;
+
+  var msaaShader = THREE.MSAA4Shader;
+  this.uniforms = THREE.UniformsUtils.clone( msaaShader.uniforms );
+
+  this.materialMSAA = new THREE.ShaderMaterial({
+    shaderID: msaaShader.shaderID,
+    uniforms: this.uniforms,
+    vertexShader: msaaShader.vertexShader,
+    fragmentShader: msaaShader.fragmentShader,
+    transparent: true,
+    blending: THREE.CustomBlending,
+    blendSrc: THREE.OneFactor,
+    blendDst: THREE.OneFactor,
+    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.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;
+    }
+
+  },
+
+  render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+    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 = this.sampleOffsets[ Math.max( 0, Math.min( this.currentSampleLevel, 5 ) ) ];
+
+    if( ! currentSampleOffsets ) {
+
+      renderer.render( this.scene, camera, this.renderTargets[0], true );
+
+      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;
+
+      renderer.render( this.scene2, this.camera2, writeBuffer, true );
+
+      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;
+
+        if( camera.setViewOffset ) {
+
+          camera.setViewOffset( readBuffer.width, readBuffer.height, currentSampleOffsets[i].x, currentSampleOffsets[i].y, readBuffer.width, readBuffer.height );
+
+        }
+
+        renderer.render( this.scene, camera, this.renderTargets[k], true );
+
+      }
+
+      renderer.render( this.scene2, this.camera2, writeBuffer, j === 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 );
+
+  },
+
+  // DirectX 11 standard MSAA sample pattern
+  standardDirctX11_MSAA2: function() {
+    var vectors = [
+      new THREE.Vector3(  4,  4, 0 ),
+      new THREE.Vector3( -4, -4, 0 )
+    ];
+    var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+    var vectors2 = [];
+    for( var i = 0; i < vectors.length; i ++ ) {
+      vectors2.push( vectors[i].clone().applyMatrix4( xfrm ) );
+    }
+    return vectors2;
+  },
+
+  // DirectX 11 standard MSAA sample pattern
+  standardDirctX11_MSAA4: function() {
+    var vectors = [
+      new THREE.Vector3( -2, -6, 0 ),
+      new THREE.Vector3(  6, -2, 0 ),
+      new THREE.Vector3( -6,  2, 0 ),
+      new THREE.Vector3(  2,  6, 0 )
+    ];
+    var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+    var vectors2 = [];
+    for( var i = 0; i < vectors.length; i ++ ) {
+      vectors2.push( vectors[i].clone().applyMatrix4( xfrm ) );
+    }
+    return vectors2;
+  },
+
+  // DirectX 11 standard MSAA sample pattern
+  standardDirctX11_MSAA8: function() {
+    var vectors = [
+      new THREE.Vector3(  1, -3, 0 ),
+      new THREE.Vector3( -1,  3, 0 ),
+      new THREE.Vector3(  5,  1, 0 ),
+      new THREE.Vector3( -3, -5, 0 ),
+      new THREE.Vector3( -5,  5, 0 ),
+      new THREE.Vector3( -7, -1, 0 ),
+      new THREE.Vector3(  3,  7, 0 ),
+      new THREE.Vector3(  7, -7, 0 ),
+    ];
+    var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+    var vectors2 = [];
+    for( var i = 0; i < vectors.length; i ++ ) {
+      vectors2.push( vectors[i].clone().applyMatrix4( xfrm ) );
+    }
+    return vectors2;
+  },
+
+  // DirectX 11 standard MSAA sample pattern
+  standardDirctX11_MSAA16: function() {
+    var vectors = [
+      new THREE.Vector3(  1,  1, 0 ),
+      new THREE.Vector3( -1, -3, 0 ),
+      new THREE.Vector3( -3,  2, 0 ),
+      new THREE.Vector3(  4, -1, 0 ),
+
+      new THREE.Vector3( -5, -2, 0 ),
+      new THREE.Vector3(  2,  5, 0 ),
+      new THREE.Vector3(  5,  3, 0 ),
+      new THREE.Vector3(  3, -5, 0 ),
+
+      new THREE.Vector3( -2,  6, 0 ),
+      new THREE.Vector3(  0, -7, 0 ),
+      new THREE.Vector3( -4, -6, 0 ),
+      new THREE.Vector3( -6,  4, 0 ),
+
+      new THREE.Vector3( -8,  0, 0 ),
+      new THREE.Vector3(  7, -4, 0 ),
+      new THREE.Vector3(  6,  7, 0 ),
+      new THREE.Vector3( -7, -8, 0 ),
+    ];
+    var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+    var vectors2 = [];
+    for( var i = 0; i < vectors.length; i ++ ) {
+      vectors2.push( vectors[i].clone().applyMatrix4( xfrm ) );
+    }
+    return vectors2;
+  },
+
+  // based on this: http://images.anandtech.com/reviews/video/NVIDIA/GF100/CSAA.png
+  standardDirctX11_MSAA32: function() {
+    var vectors = [
+      new THREE.Vector3( -4, -7, 0 ),
+      new THREE.Vector3( -7, -5, 0 ),
+      new THREE.Vector3( -3, -5, 0 ),
+      new THREE.Vector3( -5, -4, 0 ),
+
+      new THREE.Vector3( -1, -4, 0 ),
+      new THREE.Vector3( -2, -2, 0 ),
+      new THREE.Vector3( -6, -1, 0 ),
+      new THREE.Vector3( -4,  0, 0 ),
+
+      new THREE.Vector3( -7,  1, 0 ),
+      new THREE.Vector3( -1,  2, 0 ),
+      new THREE.Vector3( -6,  3, 0 ),
+      new THREE.Vector3( -3,  3, 0 ),
+
+      new THREE.Vector3( -7,  6, 0 ),
+      new THREE.Vector3( -3,  6, 0 ),
+      new THREE.Vector3( -5,  7, 0 ),
+      new THREE.Vector3( -1,  7, 0 ),
+
+      new THREE.Vector3(  5, -7, 0 ),
+      new THREE.Vector3(  1, -6, 0 ),
+      new THREE.Vector3(  6, -5, 0 ),
+      new THREE.Vector3(  4, -4, 0 ),
+
+      new THREE.Vector3(  2, -3, 0 ),
+      new THREE.Vector3(  7, -2, 0 ),
+      new THREE.Vector3(  1, -1, 0 ),
+      new THREE.Vector3(  4, -1, 0 ),
+
+      new THREE.Vector3(  2,  1, 0 ),
+      new THREE.Vector3(  6,  2, 0 ),
+      new THREE.Vector3(  0,  4, 0 ),
+      new THREE.Vector3(  4,  4, 0 ),
+
+      new THREE.Vector3(  2,  5, 0 ),
+      new THREE.Vector3(  7,  5, 0 ),
+      new THREE.Vector3(  5,  6, 0 ),
+      new THREE.Vector3(  3,  7, 0 ),
+    ];
+    var xfrm = new THREE.Matrix4().makeScale( 1 / 16.0, 1/ 16.0, 0 );
+    var vectors2 = [];
+    for( var i = 0; i < vectors.length; i ++ ) {
+      vectors2.push( vectors[i].clone().applyMatrix4( xfrm ) );
+    }
+    return vectors2;
+  }
+
+};

examples/js/shaders/MSAAShader.js

@@ -0,0 +1,67 @@
+/**
+ * @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

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - postprocessing manual msaa</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				margin: 0px;
+				background-color: #000000;
+				overflow: hidden;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="container"></div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - Manual Multi-Sample Anti-Aliasing (MSAA) pass by <a href="https://clara.io" target="_blank">Ben Houston</a>
+		</div>
+		<script src="../build/three.min.js"></script>
+
+		<script src="js/postprocessing/MSAAPass.js"></script>
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/MSAAShader.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+
+
+		<script>
+
+			var camera, scene, renderer, composer, pass;
+			var geometry, material, object;
+
+			var textureLoader = new THREE.TextureLoader();
+
+			textureLoader.load( "textures/brick_diffuse.jpg", function( meshTexture ) {
+				init( meshTexture );
+				animate();
+			});
+
+			function init( meshTexture ) {
+
+				renderer = new THREE.WebGLRenderer( { antialias: false } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.z = 400;
+
+				scene = new THREE.Scene();
+
+				geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				material = new THREE.MeshBasicMaterial( { map: meshTexture } );
+				meshTexture.anisotropy = 4;
+
+				object = new THREE.Mesh( geometry, material );
+
+				scene.add( object );
+
+				// postprocessing
+
+				composer = new THREE.EffectComposer( renderer );
+				//composer.addPass( new THREE.RenderPass( scene, camera ) );
+
+				var massPass = new THREE.MSAAPass( scene, camera, new THREE.Color( 1.0, 1.0, 1.0 ), 1.0 );
+				massPass.currentSampleLevel = 1;
+				composer.addPass( massPass );
+
+				var copyPass = new THREE.ShaderPass(THREE.CopyShader);
+		    copyPass.renderToScreen = true;
+				composer.addPass( copyPass );
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+				var pixelRatio = renderer.getPixelRatio();
+				var newWidth  = Math.floor( width / pixelRatio ) || 1;
+				var newHeight = Math.floor( height / pixelRatio ) || 1;
+				composer.setSize( newWidth, newHeight );
+				pass.setSize( newWidth, newHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				composer.render();
+
+			}
+
+		</script>
+
+	</body>
+</html>