Struggling to achieve improved results with Ambient Occlusion in three.js

After reviewing the demonstration here .

var depthShader = THREE.ShaderLib[ "depthRGBA" ];
var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );

depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
depthMaterial.blending = THREE.NoBlending;

// postprocessing

composer = new THREE.EffectComposer( Renderer );
composer.addPass( new THREE.RenderPass( Scene, Camera ) );

depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

var effect = new THREE.ShaderPass( THREE.SSAOShader );
effect.uniforms[ 'tDepth' ].value = depthTarget;
effect.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
effect.uniforms[ 'cameraNear' ].value = Camera.near;
effect.uniforms[ 'cameraFar' ].value = Camera.far;
effect.renderToScreen = true;
composer.addPass( effect );

After examining the results, the edges of the blocks are clear and highlighted in the example. However, in my code

the edges do not appear as pronounced as in the example. Is there something that I might be missing?

Answer №1

To achieve optimal results using the SSAOShader, it is essential to have precise depth information stored in the depth buffer. As detailed here, in the case of a perspective camera, the depth buffer's precision is highest near the near plane. Therefore, positioning an object closer to the near part of the frustum yields superior outcomes.

Conversely, positioning an object too close to the back of the frustum due to a near plane set too far can result in diminished quality.

Alternatively, setting a far plane too distantly (as demonstrated in your scenario) can confine the object to a narrow range of depth, limiting the depth buffer's ability to capture variations across the object effectively.

To optimize results, it is crucial to adjust your camera's near and far planes to appropriate values.

Compatible with three.js r.75

Answer №2

When it comes to your camera's far attribute, it all depends on the value you set. If it's too high, like 100000, you may not get the desired results. Simply adjusting it to 1000 could make a big difference:

 Camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 1000);

However, keep in mind that making this change will likely require you to move the camera closer to your scene. If not, the scene may not be visible upon startup and you'll have to zoom in:

Camera.position.z = 200;

Personally, these adjustments worked well for me.

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

Tips for swapping a component with another component in React.js without the need for a page refresh

class Navigation extends Component { constructor(props) { super(props); this.state = { width: window.innerWidth, } } updateWidth = () => { if (this.state.width > 700) { this.setStat ...

Support for Vue 3.4 same-name shorthand has been added to VS Code

After upgrading my Vue 3 project to version 3.4, I encountered an issue with vs-code highlighting same-name shorthand as an error, even though it was functioning correctly in my code. I am using the volar extension. Is there a way to resolve this so that v ...

Conditionals in ng-class Syntax

I'm attempting to apply a class conditionally to an element, but I'm struggling with the correct syntax. I've experimented with the code below, but it's not functioning as expected: ng-class="{foo: bar === "true"}" The value of bar i ...

Guidelines for incorporating JS in Framework7

I am developing an application using the framework7. I am facing a challenge where I need to execute some javascript in my page-content, but it is not running as expected. <div class="pages"> <div class="page close-panel" data-page="item"> ...

Tips for creating a Discord bot that can respond to inquiries with varying responses

Lately, I've been working on a Discord bot that selects a random response from an array of replies. My goal is for it to display an error message if the question is unknown or if no arguments are provided after the command. I currently have some code ...

checkbox appear based on vue condition

I have checkboxes on my list that are always checked, but I only want them to be checked if the associated object's property "include" is set to true. Currently, all the checkboxes are checked by default, and when I click on them, they uncheck and ex ...

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

What is the best way to attach an onClick event to a PHP-generated link?

Currently, I'm attempting to implement an onclick event on a link within a PHP file. $body2 .= '<td class="sampling-list-td download-link">' . '<a ' . 'class="sampling-list-download" ' . 'href="#" ' . ...

Multer failing to generate file during request process

My current setup involves a router and multer middleware, but I'm facing an issue where the file requested is not being created. As a result, req.file always remains undefined. const multer = require('multer'); let storage = multe ...

What is the best way to bring in a variable initialized by an IIFE from a JavaScript file into a TypeScript class?

I'm currently working towards integrating the steelseries.js library (found at https://github.com/HanSolo/SteelSeries-Canvas) into a Grafana plugin built with React. It's quite a complex task, but I'm up for the challenge. Right now, my ma ...

Firebase 9 - Creating a New Document Reference

Hey everyone, I need some help converting this code to modular firebase 9: fb8: const userRef = db.collection('Users').doc(); to fb9: const userRef = doc(db, 'Users'); But when I try to do that, I keep getting this error message: Fir ...

Tips for restricting the voting feature on a Facebook App to only once every 24 hours

Recently, I've been delving into the world of back-end development and decided to create a Facebook app that allows multiple photo entries with voting capabilities. Users can vote on one or multiple entries each day, and the system automatically captu ...

Incorporate the key as a prop within a Child Component in a React application

I am trying to display a list of elements in React, where the key of each element is used as an index in front of the item. However, when I try to access props.key, it just returns undefined. Does anyone have any suggestions on how to access the key proper ...

HTML5 Video Frozen in Place on Screen's Edge

I am encountering a problem specifically on Webkit, particularly in web view on iOS. When I tested it on desktop Chrome, the issue did not appear. Here is the Portrait image and Here is the Landscape image The video seems to be fixed in one position rega ...

transmitting information to Laravel via ajax

Is it possible to send a multi-step form data separately to the Laravel controller in order to store them into MySQL? An example would be sending the inputs data shown below: <ul> <li> <input type="radio" class="step1r1" value ...

Showing Sequelize validation errors in Express API: a comprehensive guide

In my Node.js/Express API with Sequelize ORM running MySQL, I have an Organization model that enforces a 2-100 character rule under validation. When this rule is violated in the first code snippet below, the err item from the catch block in the second code ...

Utilize both WebGL and CSS3D renderers for optimal performance with percentage-based layouts

While combining WebGL and CSS3D renderers, I noticed that the CSS3D layer shifts when resizing the page. After some investigation, I realized that using percentages to set the WebGL canvas was causing the issue. When the computed size includes decimals, th ...

I am encountering an issue with a JS addition operator while working with node.js and fs library

I'm trying to modify my code so that when it adds 1 to certain numbers, the result is always double the original number. For example, adding 1 to 1 should give me 11, not 2. fs.readFile(`${dir}/warns/${mentioned.id}.txt`, 'utf8', ...

employing the d3.queue method to defer execution until receiving the AJAX response

Seeking examples of integrating AJAX, d3, and PHP to extract data from a database and create graphs. Any guidance would be appreciated. I am currently using d3 to generate a force chart based on database information retrieved through AJAX and PHP. I have ...

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...