mrdoob · mrdoob · Jan 7, 2019 · Jan 7, 2019 · Jan 7, 2019 · Jan 7, 2019
diff --git a/docs/api/en/renderers/WebGLMultisampleRenderTarget.html b/docs/api/en/renderers/WebGLMultisampleRenderTarget.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p class="desc">
+			A special render target that can be used to utilize multi-sampled renderbuffers.
+			Heads up: [name] can only be used with a WebGL 2 rendering context.
+		</p>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([param:Number width], [param:Number height], [param:Object options])</h3>
+
+		<p>
+		[page:Float width] - The width of the render target. <br />
+		[page:Float height] - The height of the render target.<br />
+		[page:Object options] - (optional) object that holds texture parameters for an auto-generated target
+		texture and depthBuffer/stencilBuffer booleans.
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:number samples]</h3>
+		<p>
+		Specifies the number of samples to be used for the renderbuffer storage. However, the maximum supported
+		size for multisampling is platform dependent and defined via *gl.MAX_SAMPLES*.
+		</p>
+
+		<p>[page:WebGLRenderTarget WebGLRenderTarget] properties are available on this class.</p>
+
+		<h2>Methods</h2>
+
+		<p>[page:WebGLRenderTarget WebGLRenderTarget] methods are available on this class.</p>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
diff --git a/docs/api/zh/renderers/WebGLMultisampleRenderTarget.html b/docs/api/zh/renderers/WebGLMultisampleRenderTarget.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p class="desc">
+			TODO
+		</p>
+
+
+		<h2>Constructor</h2>
+
+
+		<h3>[name]([param:Number width], [param:Number height], [param:Object options])</h3>
+
+		<p>
+		[page:Float width] - TODO <br />
+		[page:Float height] - TODO<br />
+		[page:Object options] - TODO
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:Number samples]</h3>
+		<p>
+		TODO
+		</p>
+
+		<p>[page:WebGLRenderTarget WebGLRenderTarget] TODO</p>
+
+		<h2>Methods</h2>
+
+		<p>[page:WebGLRenderTarget WebGLRenderTarget] TODO</p>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
diff --git a/docs/list.js b/docs/list.js
@@ -309,6 +309,7 @@ var list = {
 			},
 
 			"Renderers": {
+				"WebGLMultisampleRenderTarget": "api/en/renderers/WebGLMultisampleRenderTarget",
 				"WebGLRenderer": "api/en/renderers/WebGLRenderer",
 				"WebGLRenderTarget": "api/en/renderers/WebGLRenderTarget",
 				"WebGLRenderTargetCube": "api/en/renderers/WebGLRenderTargetCube"
@@ -733,6 +734,7 @@ var list = {
 			},
 
 			"渲染器": {
+				"WebGLMultisampleRenderTarget": "api/zh/renderers/WebGLMultisampleRenderTarget",
 				"WebGLRenderer": "api/zh/renderers/WebGLRenderer",
 				"WebGLRenderTarget": "api/zh/renderers/WebGLRenderTarget",
 				"WebGLRenderTargetCube": "api/zh/renderers/WebGLRenderTargetCube"

diff --git a/docs/manual/en/introduction/How-to-use-WebGL2.html b/docs/manual/en/introduction/How-to-use-WebGL2.html
@@ -101,6 +101,7 @@ <h2>Next Steps</h2>
 
 		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
 		[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
+		[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
 	</p>
 
 	<h2>Supported features</h2>
@@ -110,6 +111,7 @@ <h2>Supported features</h2>
 		overview about what's already available in the latest version of three.js.
 		<ul>
 			<li>3D Textures</li>
+			<li>Multisampled Renderbuffers</li>
 		</ul>
 
 	</p>

diff --git a/docs/manual/zh/introduction/How-to-use-WebGL2.html b/docs/manual/zh/introduction/How-to-use-WebGL2.html
@@ -99,6 +99,7 @@ <h2>接下来</h2>
 
 		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
 		[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
+		[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
 	</p>
 
 	<h2>支持的特性</h2>
@@ -108,6 +109,7 @@ <h2>支持的特性</h2>
 		下列列表展现了在最新版本three.js中，已可用的特性的概览。
 		<ul>
 			<li>3D Textures</li>
+			<li>Multisampled Renderbuffers</li>
 		</ul>
 
 	</p>

diff --git a/examples/files.js b/examples/files.js
@@ -316,6 +316,7 @@ var files = {
 	"webgl2": [
 		"webgl2_materials_texture3d",
 		"webgl2_materials_texture3d_volume",
+		"webgl2_multisampled_renderbuffers",
 		"webgl2_sandbox"
 	],
 	"webaudio": [

diff --git a/examples/webgl2_multisampled_renderbuffers.html b/examples/webgl2_multisampled_renderbuffers.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js WebGL 2 - Multisampled Renderbuffers</title>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			html, body {
+				height: 100%;
+			}
+
+			body {
+				background: #ffffff;
+				padding: 0;
+				margin: 0;
+				font-family: Monospace;
+				font-size: 13px;
+				overflow: hidden;
+			}
+
+			#info {
+				top: 0px;
+				width: 100%;
+				color: #000000;
+				margin: 6px 0px;
+				text-align: center;
+			}
+
+			#info a {
+				color: #000000;
+			}
+
+			#container {
+				width: 100%;
+				height: calc(100% - 80px);
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Multisampled Renderbuffers<br />
+			Left scene is multi-sampled, right scene is rendered without anti-aliasing.
+		</div>
+		<div id="container">
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/WebGL.js"></script>
+
+		<script src="js/shaders/CopyShader.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+
+		<script>
+
+			if ( WEBGL.isWebGL2Available() === false ) {
+
+				document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
+
+			}
+
+			var camera, scene, renderer, clock, group;
+
+			var composer1, composer2;
+
+			init();
+			animate();
+
+			function init() {
+
+				var container = document.getElementById( 'container' );
+
+				camera = new THREE.PerspectiveCamera( 45, ( window.innerWidth * 0.5 ) / window.innerHeight, 1, 2000 );
+				camera.position.z = 500;
+
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xffffff );
+				scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
+
+				clock = new THREE.Clock();
+
+				//
+
+				var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				hemiLight.position.set( 0, 1000, 0 );
+				scene.add( hemiLight );
+
+				var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
+				dirLight.position.set( - 3000, 1000, - 1000 );
+				scene.add( dirLight );
+
+				//
+
+				group = new THREE.Group();
+
+				var geometry = new THREE.IcosahedronBufferGeometry( 10, 2 );
+				var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
+
+				for ( var i = 0; i < 100; i ++ ) {
+
+					var mesh = new THREE.Mesh( geometry, material );
+					mesh.position.x = Math.random() * 500 - 250;
+					mesh.position.y = Math.random() * 500 - 250;
+					mesh.position.z = Math.random() * 500 - 250;
+					mesh.scale.setScalar( Math.random() * 2 + 1 );
+					group.add( mesh );
+
+				}
+
+				scene.add( group );
+
+				//
+
+				var canvas = document.createElement( 'canvas' );
+				var context = canvas.getContext( 'webgl2', { antialias: false } );
+
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
+				renderer.autoClear = false;
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				//
+
+				var parameters = {
+					format: THREE.RGBFormat,
+					stencilBuffer: false
+				};
+
+				var size = renderer.getDrawingBufferSize();
+				var renderTarget = new THREE.WebGLMultisampleRenderTarget( size.width, size.height, parameters );
+
+				var renderPass = new THREE.RenderPass( scene, camera );
+				var copyPass = new THREE.ShaderPass( THREE.CopyShader );
+				copyPass.renderToScreen = true;
+
+				//
+
+				composer1 = new THREE.EffectComposer( renderer, renderTarget );
+				composer1.addPass( renderPass );
+				composer1.addPass( copyPass );
+
+				//
+
+				composer2 = new THREE.EffectComposer( renderer );
+				composer2.addPass( renderPass );
+				composer2.addPass( copyPass );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = ( window.innerWidth * 0.5 ) / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				composer1.setSize( window.innerWidth, window.innerHeight );
+				composer2.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				var halfWidth = window.innerWidth / 2;
+
+				group.rotation.y += clock.getDelta() * 0.1;
+
+				renderer.setViewport( 0, 0, halfWidth, window.innerHeight );
+
+				composer1.render();
+
+				renderer.setViewport( halfWidth, 0, halfWidth, window.innerHeight );
+
+				composer2.render();
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -129,7 +129,10 @@ function glconstants() {
 		MAX_VARYING_VECTORS: 36348,
 		MAX_FRAGMENT_UNIFORM_VECTORS: 36349,
 		UNPACK_FLIP_Y_WEBGL: 37440,
-		UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441
+		UNPACK_PREMULTIPLY_ALPHA_WEBGL: 37441,
+		MAX_SAMPLES: 36183,
+		READ_FRAMEBUFFER: 36008,
+		DRAW_FRAMEBUFFER: 36009
 	};
 
 	return {
@@ -147,10 +150,11 @@ function glconstants() {
 			return {
 				code: code,
 				map: { mappings: '' }
-			}
+			};
+
 		}
 
-	}
+	};
 
 }
 

diff --git a/src/Three.js b/src/Three.js
@@ -1,5 +1,6 @@
 import './polyfills.js';
 
+export { WebGLMultisampleRenderTarget } from './renderers/WebGLMultisampleRenderTarget.js';
 export { WebGLRenderTargetCube } from './renderers/WebGLRenderTargetCube.js';
 export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
 export { WebGLRenderer } from './renderers/WebGLRenderer.js';