What is the best way to merge render and composer functions?

In my project, I have created two scenes: one for regular objects and another for clone objects with special effects using EffectComposer (BloomPass, FilmPass). I attempted to use renderer.render(scene, camera) along with composer.render(), but unfortunately, it did not work as expected. After some trial and error, I came up with the following solution:

var toggle = 1;
function render() {
if (toggle == 1) { renderer.render(scene, camera); toggle = 0; }
else { composer.render(); toggle = 1; 
}

Can anyone suggest a better way to combine these two renderers seamlessly?

javascriptthree.jswebgl

Answer №1

Check out how to use layers and explore further: http://jsfiddle.net/user123/example567/

Here is an example of code by user123:

function animate(){
  requestAnimationFrame(animate);
    
  renderer.autoClear = false;
  renderer.clear();
  
  camera.layers.set(1);
  composer.render();
  
  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
}

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

Merging SCSS and CSS into a unified file using WebPack

Trying to grasp webpack as a beginner is proving to be quite challenging for me. I'm struggling with the concept of merging multiple scss and css files together using webpack, after transpiling the sass. Unlike gulp, where I could easily transpile sa ...

javascriptnpmwebpackwebpack-2

Determining the specific button pressed within a Bootstrap Modal when the content includes a linked URL

I am struggling with identifying the pressed button in a modal window, particularly when the modal content is loaded from a link href. While my actual code is generated dynamically in php, I have provided a simple example below using html. It seems that w ...

javascriptjqueryhtmltwitter-bootstrap-3bootstrap-modal

What is the best way to incorporate a variable in the find() method to search for similar matches?

I've been working on a dictionary web application and now I'm in the process of developing a search engine. My goal is to allow users to enter part of a word and receive all similar matches. For instance, if they type "ava", they should get back ...

javascriptnode.jsexpressmongoose

Incorporating Node.JS variables within an HTML document

After building a simple site using Express, I discovered that Node.js variables can also be used with Jade. exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; This is the code for the index file: ext ...

javascripthtmlnode.js

What steps should be taken to resolve the error message "This Expression is not constructable"?

I'm trying to import a JavaScript class into TypeScript, but I keep getting the error message This expression is not constructable.. The TypeScript compiler also indicates that A does not have a constructor signature. Can anyone help me figure out how ...

javascripttypescriptclassimport

React-query: When looping through useMutation, only the data from the last request can be accessed

Iterating over an array and applying a mutation to each element array?.forEach((item, index) => { mutate( { ...item }, { onSuccess: ({ id }) => { console.log(id) }, } ); }); The n ...

javascriptreactjstypescriptreact-query

Change the iframe's URL to a different one by clicking on a thumbnail

I am attempting to change the src="" attribute of an iframe when I click on the thumbnails. This is my current progress. HTML <div class="videoPopup"><span class="close">X close</span> <iframe width="600" height="400" src="" fram ...

javascriptjquery

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...

javascripthtmljsp

Tutorial: Implementing InfoWindows for Markers in Google Maps API V3 in a C# Web Page

Here's my newbie question, hope the formatting is correct :) I'm working on an ASP.NET, C# application that retrieves coordinates (Lat, Lon) from SQL and displays them as markers (which is working fine). However, when I try to add infowindow ...

c#javascriptasp.netgoogle-mapsgoogle-maps-api-3

Delaying the intensive rendering process in Vue.js and Vuetify: A comprehensive guide

Recently, while working on a project with Vue.js 2 and Vuetify 2.6, I encountered an issue with heavy form rendering within expansion panels. There seems to be a slight delay in opening the panel section upon clicking the header, which is most likely due t ...

javascriptperformancevue.jsvuejs2vuetify.js

Searching for a solution on how to retrieve data server-side in the newest version of Next.js? Attempted to use getStaticProps but encountering issues with it not executing

Currently tackling a project involving Django Rest Framework with Next.js, and encountering a roadblock while trying to fetch data from the API. Data is present at the following URL: http://127.0.0.1:8000/api/campaigns, visible when accessed directly. The ...

javascriptreactjsdjangorestnext.js

AngularJS: Encountering an unexpected identifier while trying to make a POST

I'm facing an issue with my http POST request in AngularJS. When I make the function call to $http, I receive a SyntaxError: Unexpected identifier. The unexpected identifier is pointing to the line url: 'rating-add' within my $http call. ‘ ...

javascriptangularjsdjango

Extract information from a JSON string and present it on the screen

I am a complete novice when it comes to D3 (with very little experience in JS). Here are the lines of code I am working with: <script type='text/javascript'> data ='{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16. ...

javascriptjsonrd3.js

Toggle Visibility of Div Based on Matching Class Name When Clicked

Just delving into the world of jQuery and could use some guidance. Is there a way to show a div with a matching class when a specific button is clicked? For example, clicking on a button with the class '.project1' should display the corresponding ...

javascriptjqueryhtml

Having trouble serving compressed files efficiently with Express

I'm running into a problem with serving my gzipped webpack bundle. Whenever I try to serve it, I encounter the dreaded ERR_CONTENT_DECODING_FAILED error on the client-side. Here's a snippet of my middleware setup: `app.get('*.js', func ...

javascriptnode.jsexpressgzipmiddleware

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

My current project is an Ionic 5 Angular project with SweetAlerts2 popups. Recently, I decided to upgrade to Ionic6 and encountered an issue where the SweetAlerts2 popups are not displaying correctly. The alert seems to only show up in the header, leaving ...

javascriptangularionic-frameworkionic6

Deactivate the date when it reaches 8 in the current date count using ajax, php, and mysql

I want to prevent users from selecting a specific date after it has been chosen 8 times. Currently, when the date is selected for the 9th time, an alert box pops up. Instead of the alert box, I would like to disable that particular date selection altogethe ...

javascriptphpjquerymysqlajax

Methods for refreshing a child component when new elements are added to a data array

One of my vue.js child components contains a data array named messages. I am looking for a way to refresh the DOM when new elements are inserted into the array. Below is a simplified version of the code snippet: <template> <q-item v-for="(msg, ...

javascriptarraysvue.jsvuejs2vue-component

Revert Bootstrap 4 Sidebar to its Previous State Upon Navigating Back in the Browser with Recursive Expansion

Check out this HTML, CSS, Bootstrap 4 code that creates a collapsible sidebar menu with an accordion-style design: https://i.sstatic.net/2hPmd.png My Goal I want to achieve the following using either Bootstrap 4, jQuery, or JavaScript... If I click on ...

javascriptjquerytwitter-bootstrapbootstrap-4

Transferring retrieved information from one division to another

This snippet of code demonstrates the process of fetching names from a MySQL database using PHP and Ajax. Updated Code index.php <html> <head> <script language="javascript"> function showresult( ...

phpjavascriptmysqlajax