Home Esplora Aiuto
Registrati Accedi
samien
/
three.js
mirror da https://github.com/mrdoob/three.js.git
1
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

Nodes: Add `SSAAPassNode`. (#29106)

* Nodes: Add `SSAAPassNode`.

* some progress

* more progress

* SSAAPassNode: Minor fixes.

* custom mrt setup

* add depth

* ignore aa for depth for now

---------

Co-authored-by: sunag <sunagbrasil@gmail.com>
Michael Herzog 1 anno fa
parent
c2373ef9fe
commit
f7a09bb505
6 ha cambiato i file con 485 aggiunte e 1 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 1 0
      examples/files.json
  2. BIN
      examples/screenshots/webgpu_postprocessing_ssaa.jpg
  3. 215 0
      examples/webgpu_postprocessing_ssaa.html
  4. 1 0
      src/nodes/Nodes.js
  5. 1 1
      src/nodes/core/MRTNode.js
  6. 267 0
      src/nodes/display/SSAAPassNode.js

+ 1 - 0
examples/files.json
Vedi File 

@@ -388,6 +388,7 @@
 
 		"webgpu_postprocessing_masking",
 
 		"webgpu_postprocessing_masking",
 
 		"webgpu_postprocessing_motion_blur",
 
 		"webgpu_postprocessing_motion_blur",
 
 		"webgpu_postprocessing_sobel",
 
 		"webgpu_postprocessing_sobel",
 
+		"webgpu_postprocessing_ssaa",
 
 		"webgpu_postprocessing_transition",
 
 		"webgpu_postprocessing_transition",
 
 		"webgpu_postprocessing",
 
 		"webgpu_postprocessing",
 
 		"webgpu_procedural_texture",
 
 		"webgpu_procedural_texture",

BIN
examples/screenshots/webgpu_postprocessing_ssaa.jpg
Vedi File


+ 215 - 0
examples/webgpu_postprocessing_ssaa.html
Vedi File 

@@ -0,0 +1,215 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webpu - postprocessing manual ssaa</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<link type="text/css" rel="stylesheet" href="main.css">
 
+	</head>
 
+	<body>
 
+		<div id="info">
 
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Unbiased Manual Supersamling Anti-Aliasing (SSAA) pass by <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
 
+		</div>
 
+
 
+		<script type="importmap">
 
+			{
 
+				"imports": {
 
+					"three": "../build/three.webgpu.js",
 
+					"three/tsl": "../build/three.webgpu.js",
 
+					"three/addons/": "./jsm/"
 
+				}
 
+			}
 
+		</script>
 
+
 
+		<script type="module">
 
+
 
+			import * as THREE from 'three';
 
+			import { ssaaPass } from 'three/tsl';
 
+
 
+			import { Timer } from 'three/addons/misc/Timer.js';
 
+			import Stats from 'three/addons/libs/stats.module.js';
 
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
+
 
+			let scene, mesh, renderer, postProcessing;
 
+			let camera, ssaaRenderPass;
 
+			let gui, stats, timer;
 
+
 
+			const params = {
 
+				sampleLevel: 3,
 
+				camera: 'perspective',
 
+				clearColor: 'black',
 
+				clearAlpha: 1.0,
 
+				viewOffsetX: 0,
 
+				autoRotate: true
 
+
 
+			};
 
+
 
+			init();
 
+
 
+			clearGui();
 
+
 
+			function clearGui() {
 
+
 
+				if ( gui ) gui.destroy();
 
+
 
+				gui = new GUI();
 
+
 
+				gui.add( params, 'sampleLevel', {
 
+					'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
 
+				} );
 
+				gui.add( params, 'clearColor', [ 'black', 'white', 'blue', 'green', 'red' ] );
 
+				gui.add( params, 'clearAlpha', 0, 1 );
 
+				gui.add( params, 'viewOffsetX', - 100, 100 );
 
+				gui.add( params, 'autoRotate' );
 
+
 
+				gui.open();
 
+
 
+			}
 
+
 
+			function init() {
 
+
 
+				const width = window.innerWidth;
 
+				const height = window.innerHeight;
 
+
 
+				renderer = new THREE.WebGPURenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.setAnimationLoop( animate );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
+
 
+				timer = new Timer();
 
+
 
+				camera = new THREE.PerspectiveCamera( 65, width / height, 3, 10 );
 
+				camera.position.z = 7;
 
+				camera.setViewOffset( width, height, params.viewOffsetX, 0, width, height );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				const group = new THREE.Group();
 
+				scene.add( group );
 
+
 
+				const light = new THREE.PointLight( 0xefffef, 500 );
 
+				light.position.z = 10;
 
+				light.position.y = - 10;
 
+				light.position.x = - 10;
 
+				scene.add( light );
 
+
 
+				const light2 = new THREE.PointLight( 0xffefef, 500 );
 
+				light2.position.z = 10;
 
+				light2.position.x = - 10;
 
+				light2.position.y = 10;
 
+				scene.add( light2 );
 
+
 
+				const light3 = new THREE.PointLight( 0xefefff, 500 );
 
+				light3.position.z = 10;
 
+				light3.position.x = 10;
 
+				light3.position.y = - 10;
 
+				scene.add( light3 );
 
+
 
+				const light4 = new THREE.AmbientLight( 0xffffff, 0.2 );
 
+				scene.add( light4 );
 
+
 
+				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
 
+				const material = new THREE.MeshStandardMaterial();
 
+
 
+				mesh = new THREE.InstancedMesh( geometry, material, 120 );
 
+
 
+				const dummy = new THREE.Mesh();
 
+				const color = new THREE.Color();
 
+
 
+				for ( let i = 0; i < mesh.count; i ++ ) {
 
+
 
+					dummy.position.x = Math.random() * 4 - 2;
 
+					dummy.position.y = Math.random() * 4 - 2;
 
+					dummy.position.z = Math.random() * 4 - 2;
 
+					dummy.rotation.x = Math.random();
 
+					dummy.rotation.y = Math.random();
 
+					dummy.rotation.z = Math.random();
 
+					dummy.scale.setScalar( Math.random() * 0.2 + 0.05 );
 
+
 
+					dummy.updateMatrix();
 
+
 
+					color.setHSL( Math.random(), 1.0, 0.3 );
 
+
 
+					mesh.setMatrixAt( i, dummy.matrix );
 
+					mesh.setColorAt( i, color );
 
+
 
+				}
 
+
 
+				scene.add( mesh );
 
+
 
+				// postprocessing
 
+
 
+				postProcessing = new THREE.PostProcessing( renderer );
 
+
 
+				ssaaRenderPass = ssaaPass( scene, camera );
 
+				const scenePassColor = ssaaRenderPass.getTextureNode();
 
+
 
+				postProcessing.outputNode = scenePassColor;
 
+
 
+				window.addEventListener( 'resize', onWindowResize );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				const width = window.innerWidth;
 
+				const height = window.innerHeight;
 
+
 
+				camera.aspect = width / height;
 
+				camera.setViewOffset( width, height, params.viewOffsetX, 0, width, height );
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( width, height );
 
+
 
+			}
 
+
 
+			function animate() {
 
+
 
+				timer.update();
 
+
 
+				if ( params.autoRotate ) {
 
+
 
+					const delta = timer.getDelta();
 
+
 
+					mesh.rotation.x += delta * 0.25;
 
+					mesh.rotation.y += delta * 0.5;
 
+
 
+				}
 
+
 
+				let newColor = ssaaRenderPass.clearColor;
 
+
 
+				switch ( params.clearColor ) {
 
+
 
+					case 'blue': newColor = 0x0000ff; break;
 
+					case 'red': newColor = 0xff0000; break;
 
+					case 'green': newColor = 0x00ff00; break;
 
+					case 'white': newColor = 0xffffff; break;
 
+					case 'black': newColor = 0x000000; break;
 
+
 
+				}
 
+
 
+				ssaaRenderPass.clearColor.set( newColor );
 
+				ssaaRenderPass.clearAlpha = params.clearAlpha;
 
+
 
+				ssaaRenderPass.sampleLevel = params.sampleLevel;
 
+
 
+				camera.view.offsetX = params.viewOffsetX;
 
+
 
+				postProcessing.render();
 
+
 
+				stats.update();
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 1 - 0
src/nodes/Nodes.js
Vedi File 

@@ -146,6 +146,7 @@ export { default as BloomNode, bloom } from './display/BloomNode.js';
 
 export { default as TransitionNode, transition } from './display/TransitionNode.js';
 
 export { default as TransitionNode, transition } from './display/TransitionNode.js';
 
 export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js';
 
 export { default as RenderOutputNode, renderOutput } from './display/RenderOutputNode.js';
 
 export { default as PixelationPassNode, pixelationPass } from './display/PixelationPassNode.js';
 
 export { default as PixelationPassNode, pixelationPass } from './display/PixelationPassNode.js';
 
+export { default as SSAAPassNode, ssaaPass } from './display/SSAAPassNode.js';
 
 export { bleach } from './display/BleachBypassNode.js';
 
 export { bleach } from './display/BleachBypassNode.js';
 
 export { sepia } from './display/SepiaNode.js';
 
 export { sepia } from './display/SepiaNode.js';

+ 1 - 1
src/nodes/core/MRTNode.js
Vedi File 

@@ -2,7 +2,7 @@ import { addNodeClass } from './Node.js';
 
 import OutputStructNode from './OutputStructNode.js';
 
 import OutputStructNode from './OutputStructNode.js';
 
 import { nodeProxy, vec4 } from '../shadernode/ShaderNode.js';
 
 import { nodeProxy, vec4 } from '../shadernode/ShaderNode.js';
 
 
 
-function getTextureIndex( textures, name ) {
 
+export function getTextureIndex( textures, name ) {
 
 
 
 	for ( let i = 0; i < textures.length; i ++ ) {
 
 	for ( let i = 0; i < textures.length; i ++ ) {

+ 267 - 0
src/nodes/display/SSAAPassNode.js
Vedi File 

@@ -0,0 +1,267 @@
 
+import { nodeObject } from '../shadernode/ShaderNode.js';
 
+import PassNode from './PassNode.js';
 
+import { Color } from '../../math/Color.js';
 
+import { Vector2 } from '../../math/Vector2.js';
 
+import { AdditiveBlending } from '../../constants.js';
 
+import { uniform } from '../core/UniformNode.js';
 
+import QuadMesh from '../../renderers/common/QuadMesh.js';
 
+import { texture } from '../accessors/TextureNode.js';
 
+import { mrt, getTextureIndex } from '../core/MRTNode.js';
 
+
 
+const _size = /*@__PURE__*/ new Vector2();
 
+
 
+/**
 
+*
 
+* Supersample Anti-Aliasing Render Pass
 
+*
 
+* This manual approach to SSAA re-renders the scene ones for each sample with camera jitter and accumulates the results.
 
+*
 
+* References: https://en.wikipedia.org/wiki/Supersampling
 
+*
 
+*/
 
+
 
+class SSAAPassNode extends PassNode {
 
+
 
+	constructor( scene, camera ) {
 
+
 
+		super( PassNode.COLOR, scene, camera );
 
+
 
+		this.isSSAAPassNode = true;
 
+
 
+		this.sampleLevel = 4; // specified as n, where the number of samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
 
+		this.unbiased = true;
 
+		this.clearColor = new Color( 0x000000 );
 
+		this.clearAlpha = 0;
 
+
 
+		this._currentClearColor = new Color();
 
+
 
+		this.sampleWeight = uniform( 1 );
 
+
 
+		this.sampleRenderTarget = null;
 
+
 
+		this._quadMesh = new QuadMesh();
 
+
 
+	}
 
+
 
+	updateBefore( frame ) {
 
+
 
+		const { renderer } = frame;
 
+		const { scene, camera } = this;
 
+
 
+		this._pixelRatio = renderer.getPixelRatio();
 
+
 
+		const size = renderer.getSize( _size );
 
+
 
+		this.setSize( size.width, size.height );
 
+		this.sampleRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );
 
+
 
+		// save current renderer settings
 
+
 
+		renderer.getClearColor( this._currentClearColor );
 
+		const currentClearAlpha = renderer.getClearAlpha();
 
+		const currentRenderTarget = renderer.getRenderTarget();
 
+		const currentMRT = renderer.getMRT();
 
+		const currentAutoClear = renderer.autoClear;
 
+
 
+		//
 
+
 
+		this._cameraNear.value = camera.near;
 
+		this._cameraFar.value = camera.far;
 
+
 
+		renderer.setMRT( this.getMRT() );
 
+		renderer.autoClear = false;
 
+
 
+		const jitterOffsets = _JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
 
+
 
+		const baseSampleWeight = 1.0 / jitterOffsets.length;
 
+		const roundingRange = 1 / 32;
 
+
 
+		const viewOffset = {
 
+
 
+			fullWidth: this.renderTarget.width,
 
+			fullHeight: this.renderTarget.height,
 
+			offsetX: 0,
 
+			offsetY: 0,
 
+			width: this.renderTarget.width,
 
+			height: this.renderTarget.height
 
+
 
+		};
 
+
 
+		const originalViewOffset = Object.assign( {}, camera.view );
 
+
 
+		if ( originalViewOffset.enabled ) Object.assign( viewOffset, originalViewOffset );
 
+
 
+		// render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
 
+
 
+		for ( let i = 0; i < jitterOffsets.length; i ++ ) {
 
+
 
+			const jitterOffset = jitterOffsets[ i ];
 
+
 
+			if ( camera.setViewOffset ) {
 
+
 
+				camera.setViewOffset(
 
+
 
+					viewOffset.fullWidth, viewOffset.fullHeight,
 
+
 
+					viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
 
+
 
+					viewOffset.width, viewOffset.height
 
+
 
+				);
 
+
 
+			}
 
+
 
+			this.sampleWeight.value = baseSampleWeight;
 
+
 
+			if ( this.unbiased ) {
 
+
 
+				// the theory is that equal weights for each sample lead to an accumulation of rounding errors.
 
+				// The following equation varies the sampleWeight per sample so that it is uniformly distributed
 
+				// across a range of values whose rounding errors cancel each other out.
 
+
 
+				const uniformCenteredDistribution = ( - 0.5 + ( i + 0.5 ) / jitterOffsets.length );
 
+				this.sampleWeight.value += roundingRange * uniformCenteredDistribution;
 
+
 
+			}
 
+
 
+			renderer.setClearColor( this.clearColor, this.clearAlpha );
 
+			renderer.setRenderTarget( this.sampleRenderTarget );
 
+			renderer.clear();
 
+			renderer.render( scene, camera );
 
+
 
+			// accumulation
 
+
 
+			renderer.setRenderTarget( this.renderTarget );
 
+
 
+			if ( i === 0 ) {
 
+
 
+				renderer.setClearColor( 0x000000, 0.0 );
 
+				renderer.clear();
 
+
 
+			}
 
+
 
+			this._quadMesh.render( renderer );
 
+
 
+		}
 
+
 
+		renderer.copyTextureToTexture( this.sampleRenderTarget.depthTexture, this.renderTarget.depthTexture );
 
+
 
+		// restore
 
+
 
+		if ( camera.setViewOffset && originalViewOffset.enabled ) {
 
+
 
+			camera.setViewOffset(
 
+
 
+				originalViewOffset.fullWidth, originalViewOffset.fullHeight,
 
+
 
+				originalViewOffset.offsetX, originalViewOffset.offsetY,
 
+
 
+				originalViewOffset.width, originalViewOffset.height
 
+
 
+			);
 
+
 
+		} else if ( camera.clearViewOffset ) {
 
+
 
+			camera.clearViewOffset();
 
+
 
+		}
 
+
 
+		renderer.setRenderTarget( currentRenderTarget );
 
+		renderer.setMRT( currentMRT );
 
+
 
+		renderer.autoClear = currentAutoClear;
 
+		renderer.setClearColor( this._currentClearColor, currentClearAlpha );
 
+
 
+	}
 
+
 
+	setup( builder ) {
 
+
 
+		if ( this.sampleRenderTarget === null ) {
 
+
 
+			this.sampleRenderTarget = this.renderTarget.clone();
 
+
 
+		}
 
+
 
+		let sampleTexture;
 
+
 
+		const passMRT = this.getMRT();
 
+
 
+		if ( passMRT !== null ) {
 
+
 
+			const outputs = {};
 
+
 
+			for ( const name in passMRT.outputNodes ) {
 
+
 
+				const index = getTextureIndex( this.sampleRenderTarget.textures, name );
 
+
 
+				if ( index >= 0 ) {
 
+
 
+					outputs[ name ] = texture( this.sampleRenderTarget.textures[ index ] ).mul( this.sampleWeight );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			sampleTexture = mrt( outputs );
 
+
 
+		} else {
 
+
 
+			sampleTexture = texture( this.sampleRenderTarget.texture ).mul( this.sampleWeight );
 
+
 
+		}
 
+
 
+		this._quadMesh.material = builder.createNodeMaterial();
 
+		this._quadMesh.material.fragmentNode = sampleTexture;
 
+		this._quadMesh.material.transparent = true;
 
+		this._quadMesh.material.depthTest = false;
 
+		this._quadMesh.material.depthWrite = false;
 
+		this._quadMesh.material.premultipliedAlpha = true;
 
+		this._quadMesh.material.blending = AdditiveBlending;
 
+		this._quadMesh.material.normals = false;
 
+
 
+		return super.setup( builder );
 
+
 
+	}
 
+
 
+}
 
+
 
+// 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
 
+const _JitterVectors = [
 
+	[
 
+		[ 0, 0 ]
 
+	],
 
+	[
 
+		[ 4, 4 ], [ - 4, - 4 ]
 
+	],
 
+	[
 
+		[ - 2, - 6 ], [ 6, - 2 ], [ - 6, 2 ], [ 2, 6 ]
 
+	],
 
+	[
 
+		[ 1, - 3 ], [ - 1, 3 ], [ 5, 1 ], [ - 3, - 5 ],
 
+		[ - 5, 5 ], [ - 7, - 1 ], [ 3, 7 ], [ 7, - 7 ]
 
+	],
 
+	[
 
+		[ 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 ]
 
+	],
 
+	[
 
+		[ - 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 ]
 
+	]
 
+];
 
+
 
+export const ssaaPass = ( scene, camera ) => nodeObject( new SSAAPassNode( scene, camera ) );
 
+
 
+export default SSAAPassNode;

粤ICP备19079148号