Issue with camera boundaries in Three.js when using EffectComposer with an orthogonal camera is currently presenting inaccuracies

In reference to a previous question on Three.js, I have successfully created a scene with a "minimap" using an orthogonal camera rendering into a viewport. The minimap is displayed properly in the standard renderer.

Now, I wanted to add postprocessing effects to the minimap. I set up a THREE.EffectComposer for this purpose, but encountered issues with the settings for the orthogonal camera. The rendered output no longer aligns with the viewport boundaries as expected.

It seems like the scene is being rendered across the entire screen space, with only the portion within the viewport getting clipped and displayed. Changing the viewport anchor point modifies the image displayed rather than just translating it, and adjusting the width/height of the viewport does not stretch the image within it.

My query is: how can I incorporate an EffectComposer within a viewport while maintaining consistent image boundaries for the minimap display?

javascriptthree.jsrenderingviewport

Answer №1

The issue had two components that required attention: firstly, the FXAA shader's resolution needed to be aligned with the dimensions of the display area for proper rendering; secondly, the inclusion of a THREE.CopyShader was essential for accurate translation of the image. Below is the updated code snippet:

mapComposer = new THREE.EffectComposer( renderer, new THREE.WebGLRenderTarget(512,512) );
mapComposer.setSize( 512,512 );
var renderModel2 = new THREE.RenderPass( scene, mapCamera );
mapComposer.addPass( renderModel2 );
var effectFXAA2 = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA2.uniforms[ 'resolution' ].value.set( 1 / 512, 1 / 512 );
mapComposer.addPass( effectFXAA2 );
var effectCopy2 = new THREE.ShaderPass( THREE.CopyShader );
effectCopy2.renderToScreen = true;
mapComposer.addPass( effectCopy2 );

For the corrected version of the code, please visit:

A big thank you to the StackOverflow community for being an invaluable platform for seeking advice and solutions :)

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

What is the best way to disable list items in a UI?

Check out my assortment: <ul class="documents"> <li class="list_title"><div class="Srequired">NEW</div></li> <li class="doc_price>1</li> <li class="doc_price>2</li> <li c ...

javascript

Obtaining a result from a Promise in AngularJS

Here is a snippet of an Angular JS Service that I have: 'use strict'; app.factory('loggedService', ['$http', 'authService', 'customerService', function ($http, authService, customerService) { var out = ...

javascriptangularjsangularjs-scope

What are the steps to manually activate input validation in Angular 2?

Having two inputs is the scenario here: The first input undergoes custom validator application The second input has a dynamic and editable value utilized in the custom validator If the custom validator is applied on the first input, then focus shifts to ...

javascriptangulartypescript

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

javascripthtmlajaxmobilebrowser

Storing multiple items in an array using LocalForage

I have a challenge where I need to add multiple items to an array without overriding them. My initial approach was like this: localForage.getItem("data", (err, results) => { console.log('results', results) // var dataArray ...

javascripttypescriptionic2localforage

Using Jquery to generate key value pairs from a form that is submitted dynamically

I'm still learning the ropes of jquery and struggling with a specific issue. I'm looking for a way to dynamically set key:value pairs in the code below based on form inputs that have variable values. The code works when I manually add the key:va ...

javascriptjquerywordpressloopspost

Node server quickly sends a response to an asynchronous client request

Apologies for my lack of writing skills when I first wake up, let me make some revisions. I am utilizing expressjs with passportjs (local strategy) to handle my server and connect-busboy for file uploads. I believe passport will not have a role in this pr ...

javascriptnode.jsexpress

Maintaining AngularJS Authentication Securengular: Ensuring

I need to find the ideal architectural solution. Below is the HTML code I currently have: <body ng-controller="individualFootprintController as $ctrl"> <div ng-hide="$ctrl.authenticated"> <h1>Login</h1> Wit ...

javascriptangularjsauthentication

Retrieving component attributes using jQuery or alternate event handlers

In my Angular2 component, I am facing an issue with using vis.js (or jQuery) click events. Despite successfully displaying my graph and catching click events, I encounter a problem where I lose access to my component's properties within the context of ...

javascriptjqueryangulartypescriptvis.js

Trouble with using .className for form validation

The .className is not applying the formValidation class on getWeight.length < 1 and getHeight.length < 1. I am stuck trying to figure out why this is happening after reviewing the code extensively. Any thoughts on what could be causing this issue? Y ...

javascripthtmlcss

Unable to retrieve the most recent global variable value within the confirmation box

<script type="text/javascript"> var customDiv ="hello"; $(function () { var $form = $("#authNotificationForm"); var startItems = $form.serializeArray(); startItems = convertSerializedArrayToHash(startItems); $("#authNoti ...

javascriptjquerydialogmodal-dialogconfirmation

Is the element loaded but not appearing on screen?

I am facing an issue when using ajax to send data to a PHP server and displaying it in the view. Even though the data loads successfully (checked in console), it does not display in the view. Can someone please help me resolve this? Here is my code : Vie ...

javascriptphpjqueryajax

Creating a jQuery Mobile Multi-Select feature with dynamically loaded data

I'm facing an issue with integrating jQuery Mobile and AngularJS. I need a multi-select option for users to choose categories, which have parent-child relationships. The data structure is fetched asynchronously from a database. The problem is that t ...

javascriptjqueryangularjsjquery-mobile

Handling Forms with Node and Express

I'm currently following a guide to create a node/express application using the jade template engine. I've encountered a 404 error when trying to submit a form. In my routing, I have this line: app.post('sign_up', sign_up); which is caus ...

javascriptnode.jsexpresspug

The tagging feature in ui-select isn't working properly, showing an error message that says "Cannot read property 'length' of undefined"

Looking to set up a ui-select for keyword tagging. Initially, when adding a new tag everything works fine, but after removing all tags and adding a new one, I get the error: Cannot read property 'indexOf' of undefined Check out the demo here ...

javascriptangularjsangularjs-directivetagsui-select

Share edited collection with Observer

The challenge Imagine creating an Angular service that needs to expose an Observable<number[]> to consumers: numbers: Observable<number[]>; Our requirements are: Receive the latest value upon subscription Receive the entire array every tim ...

javascriptangulartypescriptrxjsreactive-programming

Application: The initialization event in the electron app is not being triggered

I am facing an issue while trying to run my electron app with TypeScript and webpack. I have a main.ts file along with the compiled main.js file. To troubleshoot, I made some edits to the main.js file to verify if the "ready" function is being called. ...

javascripttypescriptwebpackelectron

I'm trying to find the location of the server.js file in Node

Currently, I am diving into a book that delves into the integration of nodejs and backbonejs. It covers the foundational aspects that serve as the building blocks for understanding. (...) To kick things off, execute the command 'npm install express& ...

javascriptnode.js

Is there a way to modify the state of my spans by utilizing onMouseHover functionality?

I am currently updating the state of my span by using document.getElementById('heart').innerHTML = 'favorite'; Do you have a more efficient method for achieving this? If so, please share your solution with me. Below is my code snippet. ...

javascriptreactjsfunctionarrow-functions

Take the user input from the form and incorporate it into the URL for the AJAX request

How can I dynamically update the URL in the AJAX call asynchronously? I've made a few attempts, but none of them seem to work. This is the current code: <!-- Input form --> <form class="navbar-form navbar-left" role="search" id="formversion" ...

javascriptjqueryajax