You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

200 lines
5.1 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - postprocessing manual taa and 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> - Temporal Anti-Aliasing (TAA) pass by <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
When there is no motion in the scene, the TAA render pass accumulates jittered camera samples<br/>
across frames to create a high quality anti-aliased result.<br/><br/>
Texture interpolation, mipmapping and anistropic sampling is disabled to emphasize<br/> the effect SSAA levels have one the resulting render quality.
</div>
<div id="container"></div>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
import { TAARenderPass } from 'three/addons/postprocessing/TAARenderPass.js';
import { CopyShader } from 'three/addons/shaders/CopyShader.js';
let camera, scene, renderer, composer, copyPass, taaRenderPass, renderPass;
let gui, stats;
let index = 0;
const param = { TAAEnabled: '1', TAASampleLevel: 0 };
init();
animate();
clearGui();
function clearGui() {
if ( gui ) gui.destroy();
gui = new GUI();
gui.add( param, 'TAAEnabled', {
'Disabled': '0',
'Enabled': '1'
} ).onFinishChange( function () {
if ( taaRenderPass ) {
taaRenderPass.enabled = ( param.TAAEnabled === '1' );
renderPass.enabled = ( param.TAAEnabled !== '1' );
}
} );
gui.add( param, 'TAASampleLevel', {
'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 ( taaRenderPass ) {
taaRenderPass.sampleLevel = param.TAASampleLevel;
}
} );
gui.open();
}
function init() {
const container = document.getElementById( 'container' );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
//
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 300;
scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry( 120, 120, 120 );
const material1 = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
const mesh1 = new THREE.Mesh( geometry, material1 );
mesh1.position.x = - 100;
scene.add( mesh1 );
const texture = new THREE.TextureLoader().load( 'textures/brick_diffuse.jpg' );
texture.minFilter = THREE.NearestFilter;
texture.magFilter = THREE.NearestFilter;
texture.anisotropy = 1;
texture.generateMipmaps = false;
const material2 = new THREE.MeshBasicMaterial( { map: texture } );
const mesh2 = new THREE.Mesh( geometry, material2 );
mesh2.position.x = 100;
scene.add( mesh2 );
// postprocessing
composer = new EffectComposer( renderer );
taaRenderPass = new TAARenderPass( scene, camera );
taaRenderPass.unbiased = false;
composer.addPass( taaRenderPass );
renderPass = new RenderPass( scene, camera );
renderPass.enabled = false;
composer.addPass( renderPass );
copyPass = new ShaderPass( CopyShader );
composer.addPass( copyPass );
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
composer.setSize( width, height );
}
function animate() {
requestAnimationFrame( animate );
index ++;
if ( Math.round( index / 200 ) % 2 === 0 ) {
for ( let i = 0; i < scene.children.length; i ++ ) {
const child = scene.children[ i ];
child.rotation.x += 0.005;
child.rotation.y += 0.01;
}
if ( taaRenderPass ) taaRenderPass.accumulate = false;
} else {
if ( taaRenderPass ) taaRenderPass.accumulate = true;
}
composer.render();
stats.update();
}
</script>
</body>
</html>