Merge pull request #8129 from bhouston/msaa

Manual MSAA pass for WebGL 1.x.  Supports 1, 2, 4, 8, 16, and 32 sample patterns.

examples/files.js

@@ -177,6 +177,7 @@ var files = {
 		"webgl_postprocessing_glitch",
 		"webgl_postprocessing_godrays",
 		"webgl_postprocessing_masking",
+		"webgl_postprocessing_msaa",
 		"webgl_postprocessing_nodes",
 		"webgl_postprocessing_smaa",
 		"webgl_postprocessing_ssao",

examples/js/postprocessing/MSAAPass.js

@@ -0,0 +1,224 @@
+/**
+ * @author bhouston / http://clara.io/ *
+ */
+
+THREE.MSAAPass = function ( scene, camera, params ) {
+
+  this.scene = scene;
+  this.camera = camera;
+
+  this.sampleLevel = 4; // specified as n, where the number of samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
+
+  this.params = params || { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
+  this.params.minFilter = THREE.NearestFilter;
+  this.params.maxFilter = THREE.NearestFilter;
+  console.log( 'this.params', this.params );
+  this.enabled = true;
+
+  this.needsSwap = true;
+
+  if ( THREE.CompositeShader === undefined ) {
+		console.error( "THREE.MSAAPass relies on THREE.CompositeShader" );
+	}
+
+  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,
+    blendDst: THREE.OneMinusSrcAlphaFactor,
+    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 ), this.materialComposite );
+  this.scene2.add( this.quad2 );
+
+};
+
+THREE.MSAAPass.prototype = {
+
+  dispose: function() {
+
+    if( this.sampleRenderTarget ) {
+
+      this.sampleRenderTarget.dispose();
+      this.sampleRenderTarget = null;
+
+    }
+
+  },
+
+
+	setSize: function ( width, height ) {
+
+		this.sampleRenderTarget.setSize( width, height );
+
+	},
+
+  render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+    if( ! this.sampleRenderTarget ) {
+
+      this.sampleRenderTarget = new THREE.WebGLRenderTarget( readBuffer.width, readBuffer.height, this.params, "msaa.renderTarget0" );
+
+    }
+
+    var camera = ( this.camera || this.scene.camera );
+
+    var jitterOffsets = THREE.MSAAPass.JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
+
+    var autoClear = renderer.autoClear;
+    renderer.autoClear = false;
+
+    this.uniforms[ "tForeground" ].value = this.sampleRenderTarget;
+
+    // render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
+    for( var i = 0; i < jitterOffsets.length; i ++ ) {
+
+      // only jitters perspective cameras.  TODO: add support for jittering orthogonal cameras
+      if( camera.setViewOffset ) camera.setViewOffset( readBuffer.width, readBuffer.height, jitterOffsets[i].x, jitterOffsets[i].y, readBuffer.width, readBuffer.height );
+
+      // on first sample, no need to accumulate
+      if( i == 0 ) {
+
+        renderer.render( this.scene, camera, writeBuffer, true );
+
+      }
+      else {
+
+        renderer.render( this.scene, camera, this.sampleRenderTarget, true );
+
+        // this accumulation strategy is used to prevent decimation at low bit depths with lots of samples.
+        this.uniforms[ "scale" ].value = 1.0 / ( i + 1 );
+
+        renderer.render( this.scene2, this.camera2, writeBuffer, false );
+
+      }
+
+    }
+
+    // reset jitter to nothing.  TODO: add support for orthogonal cameras
+    if( camera.setViewOffset ) camera.setViewOffset( undefined, undefined, undefined, undefined, undefined, undefined );
+    renderer.autoClear = true;
+
+  }
+
+};
+
+THREE.MSAAPass.normalizedJitterOffsets = function( jitterVectors ) {
+
+  var scaledJitterOffsets = [];
+
+  for( var i = 0; i < jitterVectors.length; i ++ ) {
+
+    scaledJitterOffsets.push( new THREE.Vector2( jitterVectors[i][0], jitterVectors[i][1] ).multiplyScalar( 1.0 / 16.0 ) );
+
+  }
+
+  return scaledJitterOffsets;
+
+},
+
+// These jitter vectors are specified in integers because it is easier.
+// I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
+// before being used, thus these integers need to be scaled by 1/16.
+//
+// Sample patterns reference: https://msdn.microsoft.com/en-us/library/windows/desktop/ff476218%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
+THREE.MSAAPass.JitterVectors = [
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [  0,  0 ]
+  ] ),
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [  4,  4 ],
+    [ -4, -4 ]
+  ] ),
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [ -2, -6 ],
+    [  6, -2 ],
+    [ -6,  2 ],
+    [  2,  6 ]
+  ] ),
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [  1, -3 ],
+    [ -1,  3 ],
+    [  5,  1 ],
+    [ -3, -5 ],
+    [ -5,  5 ],
+    [ -7, -1 ],
+    [  3,  7 ],
+    [  7, -7 ]
+  ] ),
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [  1,  1 ],
+    [ -1, -3 ],
+    [ -3,  2 ],
+    [  4, -1 ],
+
+    [ -5, -2 ],
+    [  2,  5 ],
+    [  5,  3 ],
+    [  3, -5 ],
+
+    [ -2,  6 ],
+    [  0, -7 ],
+    [ -4, -6 ],
+    [ -6,  4 ],
+
+    [ -8,  0 ],
+    [  7, -4 ],
+    [  6,  7 ],
+    [ -7, -8 ]
+  ] ),
+  THREE.MSAAPass.normalizedJitterOffsets( [
+    [ -4, -7 ],
+    [ -7, -5 ],
+    [ -3, -5 ],
+    [ -5, -4 ],
+
+    [ -1, -4 ],
+    [ -2, -2 ],
+    [ -6, -1 ],
+    [ -4,  0 ],
+
+    [ -7,  1 ],
+    [ -1,  2 ],
+    [ -6,  3 ],
+    [ -3,  3 ],
+
+    [ -7,  6 ],
+    [ -3,  6 ],
+    [ -5,  7 ],
+    [ -1,  7 ],
+
+    [  5, -7 ],
+    [  1, -6 ],
+    [  6, -5 ],
+    [  4, -4 ],
+
+    [  2, -3 ],
+    [  7, -2 ],
+    [  1, -1 ],
+    [  4, -1 ],
+
+    [  2,  1 ],
+    [  6,  2 ],
+    [  0,  4 ],
+    [  4,  4 ],
+
+    [  2,  5 ],
+    [  7,  5 ],
+    [  5,  6 ],
+    [  3,  7 ]
+  ] )
+];

examples/js/shaders/CompositeShader.js

@@ -0,0 +1,48 @@
+/**
+ * @author bhouston / http://clara.io/
+ *
+ * Multi-Sample Anti-aliasing shader - for blending together sample buffers
+ */
+
+THREE.CompositeShader = {
+
+  shaderID: "composite",
+
+	uniforms: {
+
+		"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 tForeground;",
+		"uniform float scale;",
+
+		"void main() {",
+
+      "vec4 foreground = texture2D( tForeground, vUv );",
+
+			"gl_FragColor = foreground * scale;",
+
+		"}"
+
+	].join("\n")
+
+};

examples/webgl_postprocessing_msaa.html

@@ -0,0 +1,176 @@
+<!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: #000;
+				overflow: hidden;
+				font-family:Monospace;
+				font-size:13px;
+				margin: 0px;
+				text-align:center;
+				overflow: hidden;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				display:block;
+			}
+		</style>
+	</head>
+	<body>
+		<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><br/><br/>
+			Texture interpolation, mipmapping and anistropic sampling is disabled to emphasize<br/> the effect MSAA levels have one the resulting render quality.
+		</div>
+
+		<div id="container"></div>
+
+		<script src="../build/three.min.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script src="js/postprocessing/MSAAPass.js"></script>
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/CompositeShader.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, copyPass, msaaPass;
+			var geometry, material, gui, object, stats, texture;
+
+			var param = { MSAASampleLevel: 2 };
+
+			var textureLoader = new THREE.TextureLoader();
+
+			container = document.getElementById( "container" );
+
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '0px';
+			container.appendChild( stats.domElement );
+
+			textureLoader.load( "./textures/brick_diffuse.jpg", function( meshTexture ) {
+				init( meshTexture );
+				texture = meshTexture;
+				animate();
+				clearGui();
+
+
+			});
+
+
+			function clearGui() {
+
+				if ( gui ) gui.destroy();
+
+				gui = new dat.GUI();
+
+				var example = gui.add( param, 'MSAASampleLevel', {
+					'Level 0: 1 Sample': 0,
+					'Level 1: 2 Samples': 1,
+					'Level 2: 4 Samples': 2,
+					'Level 3: 8 Samples': 3,
+					'Level 4: 16 Samples': 4,
+					'Level 5: 32 Samples': 5
+				} ).onFinishChange( function() {
+
+					if( massPass ) {
+						massPass.sampleLevel = param.MSAASampleLevel;
+					}
+
+				} );
+
+				gui.open();
+
+			}
+
+			function init( meshTexture ) {
+
+				meshTexture.minFilter = THREE.NearestFilter;
+				meshTexture.magFilter = THREE.NearestFilter;
+				meshTexture.anisotropy = 1;
+				meshTexture.generateMipmaps = false;
+
+				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 } );
+
+				object = new THREE.Mesh( geometry, material );
+
+				scene.add( object );
+
+				// postprocessing
+
+				composer = new THREE.EffectComposer( renderer );
+
+				massPass = new THREE.MSAAPass( scene, camera );
+				massPass.sampleLevel = param.MSAASampleLevel;
+				composer.addPass( massPass );
+
+				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 );
+				if( msaaPass ) msaaPass.setSize( newWidth, newHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				object.rotation.x += 0.005;
+				object.rotation.y += 0.01;
+
+				composer.render();
+
+				stats.update();
+
+			}
+
+		</script>
+		<div>
+	</body>
+</html>

examples/webgl_postprocessing_smaa.html

@@ -14,7 +14,10 @@
 	</head>
 	<body>
 
+		<div id="container"></div>
+
 		<script src="../build/three.min.js"></script>
+		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/postprocessing/SMAAPass.js"></script>
 		<script src="js/shaders/CopyShader.js"></script>
@@ -28,12 +31,19 @@
 
 		<script>
 
-			var camera, scene, renderer, composer, pass;
+			var camera, scene, renderer, composer, pass, stats;
 			var geometry, material, object;
 
 			var textureLoader = new THREE.TextureLoader();
 
-			textureLoader.load( "textures/brick_diffuse.jpg", function( meshTexture ) {
+			container = document.getElementById( "container" );
+
+			stats = new Stats();
+			stats.domElement.style.position = 'absolute';
+			stats.domElement.style.top = '0px';
+			container.appendChild( stats.domElement );
+
+			textureLoader.load( "./textures/brick_diffuse.jpg", function( meshTexture ) {
 				init( meshTexture );
 				animate();
 			});
@@ -100,9 +110,11 @@
 
 				composer.render();
 
+				stats.update();
+
 			}
 
 		</script>
-
+	</div>
 	</body>
 </html>