Examples: Unified MRT examples.

mrdoob · May 26, 2022 · 764cf0f · 764cf0f
1 parent 90b4954
commit 764cf0f
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 360 deletions.
diff --git a/examples/files.json b/examples/files.json
@@ -300,7 +300,6 @@
 		"webgl2_materials_texture3d",
 		"webgl2_materials_texture3d_partialupdate",
 		"webgl2_multiple_rendertargets",
-		"webgl2_multiple_rendertargets_multisampled",
 		"webgl2_multisampled_renderbuffers",
 		"webgl2_rendertarget_texture2darray",
 		"webgl2_volume_cloud",

diff --git a/examples/screenshots/webgl2_multiple_rendertargets.jpg b/examples/screenshots/webgl2_multiple_rendertargets.jpg
diff --git a/examples/screenshots/webgl2_multiple_rendertargets_multisampled.jpg b/examples/screenshots/webgl2_multiple_rendertargets_multisampled.jpg
diff --git a/examples/tags.json b/examples/tags.json
@@ -93,7 +93,6 @@
 	"webgl_simple_gi": [ "global illumination" ],
 	"webgl_tiled_forward": [ "derivatives" ],
 	"webgl2_multiple_rendertargets": [ "mrt" ],
-	"webgl2_multiple_rendertargets_multisampled": [ "mrt" ],
 	"webgl2_multisampled_renderbuffers": [ "msaa" ],
 	"physics_ammo_cloth": [ "integration" ],
 	"misc_controls_arcball": [ "rotation" ],

diff --git a/examples/webgl2_multiple_rendertargets.html b/examples/webgl2_multiple_rendertargets.html
@@ -99,10 +99,7 @@
 	</head>
 	<body>
 		<div id="info">
-			<a href="http://threejs.org" target="_blank">threejs</a> - WebGL - Multiple Render Targets<br/>
-			Renders geometry into a G-Buffer.<br/>
-			Visualized here is the color and normal data from the G-Buffer.<br/>
-			Created by <a href="http://twitter.com/mattdesl" target="_blank">@mattdesl</a>.
+			<a href="http://threejs.org" target="_blank">threejs</a> webgl - Multiple RenderTargets
 		</div>
 
 		<!-- Import maps polyfill -->
@@ -123,11 +120,22 @@
 
 			import WebGL from './jsm/capabilities/WebGL.js';
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { GUI } from './jsm/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, controls;
 			let renderTarget;
 			let postScene, postCamera;
 
+			const parameters = {
+				samples: 4,
+				wireframe: false
+			};
+
+			const gui = new GUI();
+			gui.add( parameters, 'samples', 0, 4 ).step( 1 );
+			gui.add( parameters, 'wireframe' );
+			gui.onChange( render );
+
 			init();
 
 			function init() {
@@ -168,27 +176,19 @@
 				// Scene setup
 
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x222222 );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
 				camera.position.z = 4;
 
-				const diffuse = new THREE.TextureLoader().load(
-
-					'textures/brick_diffuse.jpg',
-
-					function () {
-
-						// ready to render
-						render();
-
-					}
-
-				);
+				const loader = new THREE.TextureLoader();
 
-				diffuse.wrapS = diffuse.wrapT = THREE.RepeatWrapping;
+				const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg', render );
+				diffuse.wrapS = THREE.RepeatWrapping;
+				diffuse.wrapT = THREE.RepeatWrapping;
 
 				scene.add( new THREE.Mesh(
-					new THREE.TorusKnotGeometry( 1, 0.3, 128, 64 ),
+					new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ),
 					new THREE.RawShaderMaterial( {
 						vertexShader: document.querySelector( '#gbuffer-vert' ).textContent.trim(),
 						fragmentShader: document.querySelector( '#gbuffer-frag' ).textContent.trim(),
@@ -222,8 +222,7 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render );
-				controls.enableZoom = false;
-				controls.screenSpacePanning = true;
+				//controls.enableZoom = false;
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -245,6 +244,18 @@
 
 			function render() {
 
+				renderTarget.samples = parameters.samples;
+
+				scene.traverse( function ( child ) {
+
+					if ( child.material !== undefined ) {
+
+						child.material.wireframe = parameters.wireframe;
+
+					}
+
+				} );
+
 				// render scene into target
 				renderer.setRenderTarget( renderTarget );
 				renderer.render( scene, camera );