Combining smaa and ssao postprocessing in THREE.js magnifies the visual quality of graphics

I am attempting to merge SMAA and SSAO within my THREE.EffectComposer as shown below:

this.composer = new THREE.EffectComposer(this.renderer);

// Setting up depth pass
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.depthPacking = THREE.RGBADepthPacking;
depthMaterial.blending = THREE.NoBlending;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
// Setting up SSAO pass
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.renderToScreen = true;
ssaoPass.uniforms[ "tDepth" ].value = depthRenderTarget.texture;
ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssaoPass.uniforms[ 'cameraNear' ].value = this.camera.near;
ssaoPass.uniforms[ 'cameraFar' ].value = this.camera.far;
ssaoPass.uniforms[ 'onlyAO' ].value = false;
ssaoPass.uniforms[ 'aoClamp' ].value = .3;
ssaoPass.uniforms[ 'lumInfluence' ].value = 1;

this.ssaoPass = ssaoPass;
this.depthRenderTarget = depthRenderTarget;


smaapass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
smaapass.renderToScreen = true;
this.composer.addPass(new THREE.RenderPass(this.scene, this.camera));
this.composer.addPass(ssaoPass);
this.composer.addPass(smaapass);

However, only smaapass seems to be applied. I have tried changing the order of composer.addPass but it did not work. What could I be doing wrongly? Thank you!

javascriptthree.js

Answer №1

const rendering = new THREE.RenderPass( scene, camera );
this.composition = new THREE.EffectComposer(this.renderer);
this.composition.addPass(rendering);

// Setup depth pass
depthMat = new THREE.MeshDepthMaterial();
depthMat.depthPacking = THREE.RGBADepthPacking;
depthMat.blending = THREE.NoBlending;
const options = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, 
window.innerHeight, options );

// Setup SSAO pass
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.uniforms[ "tDepth" ].value = depthTarget.texture;
ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssaoPass.uniforms[ 'cameraNear' ].value = this.camera.near;
ssaoPass.uniforms[ 'cameraFar' ].value = this.camera.far;
ssaoPass.uniforms[ 'onlyAO' ].value = false;
ssaoPass.uniforms[ 'aoClamp' ].value = .3;
ssaoPass.uniforms[ 'lumInfluence' ].value = 1;
ssaoPass.renderToScreen = false;

smaapass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
smaapass.renderToScreen = true;

this.composition.addPass(ssaoPass);
this.composition.addPass(smaapass);

I reorganized the code structure by placing the renderpass at the beginning and added it before configuring the ssao. I also positioned the rendertoscreen setting at the end of the setup instead of the top. In addition, unnecessary code for 

this.depthRenderTarget = depthRenderTarger
was removed. The RGB format was incorporated into the depthRenderTarget.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am facing difficulties in installing the necessary node modules for my Angular project

After attempting to run npm install, an error message is displayed towards the end: error syscall unlink 22396 error The operation was rejected by your operating system. 22396 error It's possible that the file was already in use (by a text editor or ...

javascriptangularnpmnode-modulesnpm-install

What is the process for retrieving randomized data using mongoose?

I recently came across the mongoose-random package which allows for retrieving a JSON array of random records using mongoose. My goal is to retrieve three random records with a specific field. Despite reviewing the documentation, I have yet to find a work ...

javascriptnode.jsmongodb

Cors policy error encountered in Node.js application and React application

I have developed an application using Node.js and React. I am currently hosting the server side on node.kutiza.com and the client side on finanu.kutiza.com through Namecheap. However, when I try to make a request to node.kutiza.com, I encounter an error me ...

javascriptnode.jsreactjs

Exploring the Concept of Event Bubbling in ReactJS

Having recently delved into React.js, I've encountered a roadblock that has persisted for the past three days despite my attempts at various solutions. The issue revolves around two functions in my parent component named checkout: handleSeleteAddress ...

javascriptreactjsfrontend

`ACCESS DENIED: Unauthorized access attempt detected in Node.js``

When attempting to connect, MySQL is establishing a connection with an unfamiliar IP address. Refer to the code below: .env MYSQL_HOST=domain.example.com MYSQL_USER=**** MYSQL_PASSWORD=**** MYSQL_DB=**** MYSQL_PORT=3306 connection.js const mysql = requir ...

javascriptmysqlnode.jsexpressremote-access

Encountering an issue while attempting to utilize the request.js library in a Node environment

I am experimenting with implementing request.js in my node/express application. However, whenever I execute the command node post.js, I encounter the following error: events.js:160 throw er; // Unhandled 'error' event ^ Error: Invalid proto ...

javascriptnode.jsexpressrequestbody-parser

How can the front design of Material-UI's Card header be customized?

Currently, I am facing an issue with the Material-UI card header as the background color is affecting the readability of the default font. My aim is to use the typography prop h4 for the header, but I am struggling to achieve this. https://i.stack.imgur.c ...

javascripthtmlcssreactjsmaterial-ui

Converting Roman Numerals into Decimal Numbers using JavaScript Algorithm

I am eager to develop a Javascript Algorithm that can convert Roman numerals to Arabic using the provided methods below. Array.prototype.splice() Array.prototype.indexOf() Array.prototype.join() I have managed to find an algorithm that accomplishes this ...

javascriptarraysalgorithm

What is the process for making changes to Google Sheet information?

Encountering an issue when trying to update data in a Google sheet using Next.js. The error message ReferenceError: row is not defined keeps popping up and I can't figure out where I'm going wrong. Any help in resolving this error would be greatl ...

javascriptgoogle-sheetsnext.jsgoogle-sheets-api

Utilize AJAX to accurately capture and handle error codes

Here is a snippet of code that I want to send to my server: $.ajax({ type: 'POST', url: 'post.php', data: { token: '123456', title: 'some title', url: 'http://somedomain.com', data: & ...

javascriptjqueryajax

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

javascripthtmlangulartypescripthtml-table

Optimal method for file uploading with Node.js

How can I effectively manage file uploads in node js? I would like users to be able to upload profile images with the following specifications: -Validated size of at least 200 * 200 -Accepted file formats are png, jpg, jpeg, or gif -Additional functi ...

javascriptnode.jsexpressupload

Sharing props in React.js among distinct child components using a centralized parent component

I am currently working on developing a front end console using React, which includes a side menu for filtering results from a database and displaying them in a dynamically generated table. The component hierarchy is structured as follows: App.js | |--Sid ...

javascriptreactjsecmascript-6

Issue with dropshadows in Chrome: Instead of applying the shadow effect to the graphic itself, it is mistakenly being added to the container

Having trouble adding a Gaussian drop shadow to an SVG path. The shadow is not applying correctly in Chrome - instead of just on the graphic, it's being added to the container. Works fine in ff though. Any suggestions on how to make this work properly ...

javascriptjquerycsssvg

Is there a way to activate ng-change when a space character is input?

My function is triggered when the value of a textarea changes, however, it does not work when the spacebar is pressed. Is there a way to make it work for spacebars as well? I want the function to be called whenever the content changes, regardless of the ke ...

javascriptangularjs

What are the steps to resolve the issue of Discord OAuth2 not supporting the Redirect URI provided?

Greetings to the StackOverflow community! ...

javascriptnode.jsexpressdiscordpassport.js

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

javascriptjqueryhtmlcss

Issue with passing incorrect props to child component occurs specifically on pages 2 and beyond within react-table

Implementing a button in each row of a table using react-table to trigger a react-modal is functioning correctly on the initial page. However, when navigating to subsequent pages, an issue arises where the incorrect id prop is being passed into the custom ...

javascriptreactjstypescriptreact-modalreact-table

Node.js local storage/cookie functionality

Running three different apps on Node.js at ports 3000, 3005, and 3007. I need to set a LocalStorage or Cookie variable at port 3000 and access it from the apps running at ports 3005 and 3007. Folder structure: nodep/ |-app.js (runs at port 30 ...

javascriptnode.jscookieslocal-storage

Create immersive experiences with React VR by seamlessly integrating Three.js elements into your scene

After using the react-vr init App command to create a new project, I successfully generated spheres in my scene by mapping through some data: { data.map(node => return <Sphere key={`node-${node.id}`} radius={1} widthSegments={8} heightSegments= ...

three.jsreact-360