Change the clear color in Three.js for GPU ping-ponging operations

Currently working on a project involving GPU ping-ponging in Three.js, but encountering an unusual issue. When I try to set the clear color for the renderer, it seems to override the output of the fragment shader responsible for rendering.

Oddly enough, setting the clear color to white results in all pixels turning white, while leaving it at the default black shows correct coloring. I'd prefer to avoid having to draw a plane if possible.

At this point, unsure if this is specific to Three.js or inherent in OpenGL ES2. Even trying to set the clear color directly (render.getContext().clearColor(1.0,1.0,1.0,1.0)) yielded the same outcome.

Any insights or advice would be greatly welcomed!

javascriptthree.js

Answer №1

The color of the background can have an impact on how your graphics are displayed when blending is turned on. If blending is not necessary, you can turn it off using the following code:

glDisable(GL_BLEND);

However, if blending is required, the situation becomes a bit more complicated. Some blend functions, such as the commonly used:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

work well regardless of the background color. For example, with this blend function, rendering opaque red (fragment alpha = 1.0) on top of a white background will still result in red.

On the other hand, certain blend functions only work effectively with a black background. For instance, if you utilize additive blending:

glBlendFunc(GL_ONE, GL_ONE);

anything rendered on a white background will remain white. It essentially adds to white, creating a "whiter than white" effect, reminiscent of laundry detergent commercials. :)

Please note that the given code snippets are for C/C++ bindings of OpenGL. They should be easily translatable to WebGL/Three.js environments.

Answer №2

If you want to change the background color that three.js renderer clears to, you can do so by using this code:

renderer.setClearColor ( color, alpha )

You can find more information about renderers in three.js at this link.

To make low level calls in three.js based on the previous answer, simply use this code:

myMaterial.transparent = false;

When you execute this, three.js will handle the necessary calls before drawing the object.

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

Achieve full implementation of ng-repeat within an angular directive

Can you explain how the custom angular directive 'myscroll' is able to detect and interact with the ng-repeat elements that are dynamically created in the code snippet below? <myscroll> <div ng-repeat="item in items">{{item}}< ...

javascriptangularjsangularjs-directiveangularjs-ng-repeat

Sending files using AJAX without FormData in Internet Explorer 9

Unfortunately, IE9 does not support FormData, making file uploads via XMLHttpRequest a more challenging task. Is there a workaround for this issue? I've come across mentions of using iFrames, but the process seems complex and unclear on how to transf ...

javascriptajaxfile-uploadxmlhttprequest

Strikeout list on click of a mouse

Is there a way to apply strikethrough formatting to text with just a mouse click? The CSS for lists is beyond the form field margin. I've tried multiple methods without success. No matter how many times I change the code, I can't seem to get it r ...

javascripthtmljquerycss

Issue with Magento site: Clicking on thumbnail photo does not update the large photo on mobile devices

As I navigate through a Magento site, I encounter a problem with the thumbnail images not reloading the larger image when clicked. Instead, the browser jumps to the top of the page and a hash symbol gets added to the URL. Based on this behavior, I suspect ...

javascriptjquerymagentomobileprototypejs

Ways to host static content in ExpressJS for specific directories and exclude others

I need to configure my ExpressJS server to serve static files from specific paths only, excluding others. For example, I want to serve static files from all paths except /files where I only need to manipulate a file on the server. Currently, my code looks ...

javascriptnode.jsexpressserverpath

What is the process for removing an added message using jQuery after it has been appended by clicking the same button?

https://i.stack.imgur.com/YsmKZ.pnghttps://i.stack.imgur.com/dW2lo.pngI have searched extensively through previously asked questions without success. My goal is to remove the previous appended message when the submit button is clicked again. This functiona ...

javascriptjquery

Creating intersections using (mouse along with another key)

I'm relatively new to working with JavaScript and canvas elements. I have been trying to create a drawing feature that allows users to draw lines as they drag the mouse, but I also want to include another option where holding down a specific key (such ...

javascriptjquerycanvas

Animating objects in ThreeJS to traverse multiple positions smoothly with linear interpolation (lerp)

I am exploring ways to animate a sphere's movement along a predefined sequence of vertices. I have successfully managed to animate the sphere from one point to another using the code below: function animate() { requestAnimationFrame(animate) spher ...

javascriptanimationthree.js

What is the best way to determine if a value stored in localStorage is present in an

After reading this particular response, I learned that I should utilize $.inArray. Following this advice, my code looks like this: var curPostId = $(".my_post_id").attr("data-id"); if($.inArray(curPostId, lines)) { $('#'+localStorage.getItem( ...

javascriptjquery

Switching the markLine in vega lite to a markBar causes it to lose its sorting arrangement

I have created the following data visualization: data = [{"student_name": "student 0", "e": "100.15", "d": "127.81"}, {"student_name": "student 1", "e": "100.30", "d": "189.94"}, {"student_name": "student 2", "e": "100.15", "d": "105.33"}, {"student_nam ...

javascriptvega-litevegavega-lite-api

Utilize Vue3 to categorize items and showcase the quantities from the product list

I successfully counted every repeated element in my array, now I just need to display only one of each product along with its quantity. Here is the current progress: https://i.sstatic.net/SBm64.png I have a function that I'm exporting from a file n ...

javascriptarraysvue.jsobjectvuejs3

Identify the absence of search results in an Ajax request to the search page before rendering the HTML content

I am attempting to retrieve JSON code from a page using the following PHP function: private function __ajax_admin_search($username = '') { $result = $this->admin_login->Admin_Username_Ajax($username); $count = count($result); for ...

phpjavascriptjqueryajax

Using an AngularJs directive to perform form validation on an input field

Currently, I am working on a project where there are multiple submit forms with similar fields. To streamline the process, I have made the decision to transfer some fields to directives. Here is an example of the form: <div loading class="col-sm-1 ...

javascriptformsangularjsvalidationangularjs-directive

If a user refreshes too quickly or excessively, my server tends to crash

I'm feeling lost and struggling to find answers even through Google search. This is my first solo project where I am developing a MERN full-stack app. Initially, someone warned me it was too ambitious (they were right) and that I would get overwhelme ...

javascriptnode.jsreactjsexpress

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to receive returned string values using fetch()?

I have implemented a fetch method in my separate register.js file to handle registration on the front end. However, I am encountering an error when trying to POST the data and receive the following message in the browser console: "Uncaught (in promise) Syn ...

javascriptnode.jsexpressfetchpostman

Arrange divs on the screen in a specific formation

I am exploring ways to position specific divs in the middle of the screen to create a pearl necklace-like shape. The desired shape is as follows: 0 0 0 0 0 0 0 0 0 0 My aim is to achieve this using jQuery on a mobile ...

javascriptjqueryhtmlcssionic-framework

"Exploring the MUI Data Grid: A Step-by-Step Guide to Adding a Summary Row

Need help with adding a summary row to my Data Table from MUI. You can find the documentation here or visit the main website here. I have tried to implement the summary row but I am facing some challenges. Any suggestions or ideas would be highly apprecia ...

javascriptreactjsmui-datatable

Retrieve the current time of day based on the user's timezone

Currently, I am working with a firebase cloud function that is responsible for sending push notifications to my app. My main requirement is to send notifications only during the day time. To achieve this, I have integrated moment-timezone library into my p ...

javascriptnode.jsdatetimezonegoogle-cloud-functions

Retrieve information using PHP with AJAX without revealing it on the screen

Is it feasible to fetch data using Ajax in PHP and store them in a JS variable without displaying it? I require this data for date manipulation but do not want to show it. When I attempted to merely return the data without echoing it, the Ajax data in JS ...

javascriptphpajax