Exploring the intersecting viewports in three.js

I'm attempting to create a camera (GUI camera) that renders above the scene camera. My idea was to make the GUI camera have a transparent background, allowing for visibility through it. However, it's not working as expected.

Here is how I defined the renderer:

renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
renderer.setSize(window.innerWidth, window.innerHeight);

I am trying to render in the following way:

// Render Main Camera
renderer.setClearColor(0x000000, 1);
renderer.render(scene, sceneCamera);

// Render GUI Camera
renderer.setClearColor(0x000000, 0);
renderer.render(scene, guiCamera);

I referenced this as an example for multiple viewports, but their viewports do not overlap like mine.

Thank you in advance.

Answer №1

Expanding on the previous comment, it is important to note that by default, three.js will clear your frame buffer before each .render() call. This means that if you make multiple render calls, only the result of the last one will be displayed.

However, if you set renderer.autoClear = false, this automatic clearing feature will be disabled. In such cases, if you move your camera between renders, you may observe streaking effects as objects from different frames are painted on top of each other.

Therefore, calling renderer.clear() before your initial render will allow you to accumulate results from multiple .render() calls and display them all in a single frame.

A useful technique could involve creating a separate scene like const guiScene = new Scene() and placing your UI elements there to ensure they are included in each render pass.

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

The gltf file does not appear to be displaying properly within a React Next.js environment

I'm facing an issue while attempting to load a gltf file in a nextjs application using threejs. The process doesn't seem to work when running it within a nextjs application on a react project. Here's the configuration I used for next.js with ...

Updating item information within an array in Vue.js

I'm currently working on integrating an edit feature into a task application using Vue JS. My issue lies in the fact that I have a click event assigned to the edit button - @click="editShow" which displays input fields for editing all items instead ...

Prevent repeating the same table header multiple times when generated dynamically with jQuery

I have an array called groups which contains name and regid. I want to display the name key as the column header of a table. To achieve this, I implemented the following code: var Name = v.name; var regId = v.regid; var rowStr = '<th d ...

Angular's import and export functions are essential features that allow modules

Currently, I am working on a complex Angular project that consists of multiple components. One specific scenario involves an exported `const` object in a .ts file which is then imported into two separate components. export const topology = { "topolo ...

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

After successfully displaying the generator over the first image, I encounter a problem with the second and third images where it seems to disappear. However, upon cycling back to the first slide, the generator reappears with a different quote. I've a ...

What is the best way to incorporate the value of a textbox into a list?

I currently have a list structured like this: <p>Please choose from the following options:</p> <script type="text/javascript"></script> <select id='pre-selected-options1' multiple='multiple'> <opt ...

Exploring the capabilities of the Express router and its various methods

I am curious about var server = http.createServer(function(req, res) { // something } server.listen(3000); Is the server created and listening on port 3000 immediately after running this code block, or is it only created at first and then started ...

The Data Table experiences intermittent hanging issues (Table is empty) when sorting or loading data with Knockout binding

While working on a project, I encountered an issue with binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The problem was that the table would become unresponsive at times when sorted or loaded, without any errors be ...

Tips for adding information into IndexedDB after receiving an AJAX response:

If I were to start by setting up the database outside of my Ajax call like this: // This code is compatible with all devices and browsers, utilizing IndexedDBShim as a last resort var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitInd ...

The process of saving report filters and making them accessible for both running and scheduling tasks

I am facing a use case where I need to add query parameters to API calls and save them for future use. Essentially, I have a report that requires multiple filters to be saved - some predefined and others customizable. These saved filters can then be execut ...

How to transfer a C library callback to a NodeJS EventEmitter with the help of node-addon-api

In the process of developing a node module that integrates Alex Diner's cross-platform gamepad code using the Node-Addon-API, I encountered an interesting challenge. Making the module function as an EventEmitter and exposing callback functions throug ...

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

I encountered an SyntaxError while working with Ionic. The error message reads: "Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>)."

Here's the code that is causing me trouble: this.http.get('http://localhost/....) .map((res) => res.json()) .subscribe(( this.navCtrl.push(OtpPage,{mobileno:this.mobile}); }, (err) => { console.log(err ...

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

Vue alert]: The element "options" is not declared in the current instance but is being referenced during the rendering process. Facing problem with Vue JS

Encountering an error while rendering the project. I've thoroughly checked all details but couldn't pinpoint which line is causing the issue. The console displays the following warning: Vue warn]: Property or method "options" is not defined on th ...

Can someone explain why my search input's sync function is being triggered twice?

Within my CodePen project at https://codepen.io/aaronk488/pen/MWbKNOq?editors=1011, I am facing an issue where my sync function search is being called twice without a clear reason. Even though I managed to resolve this by adding a conditional statement in ...

Controlled Material-UI v5 DateTimePicker triggers input focus upon closure

Is there a way to have 2 DateTimePicker components as siblings, and when I click on the second one while the first one is still open, it should open a new DateTimePicker with focus on it? Can someone help me achieve this? Link to code example I want the ...

Featherlight is experiencing issues with running Ajax requests

I'm currently working on integrating an ajax photo uploading script into a Featherlight lightbox, but I'm running into issues! If anyone could help me figure out what's going wrong, that would be greatly appreciated. I've already includ ...

I am unable to retrieve the local variable beyond the function

I'm having trouble accessing a local variable outside of a function even though I have initialized it before the function is called. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jq ...

Is the Router.refresh() function failing to refresh within the next 13 seconds?

'use client'; import { useRouter } from "next/navigation"; export default function Todo({ todo }) { const router = useRouter(); return ( <> <li key={todo.id}> <input type=&apo ...