How can one achieve a fading effect on the background using THREE.js?

I am attempting to achieve a fading effect on the drawing buffer while leaving trails of drawn objects, rather than clearing it every frame. It's a relatively simple effect that can be achieved in 2D using this code snippet: http://jsfiddle.net/faRW3/1/

// draw stuff
c.fillStyle = "red";
c.fillRect(Math.sin( time )*50+70, Math.cos( time )*50+70, 20, 20);

// fade background
c.fillStyle = "rgba(255, 255, 255, 0.25)";
c.fillRect(0, 0, canvas.width, canvas.height);

However, I have been unable to replicate this effect in WebGL, particularly when using Three.js. I have tried setting preserveDrawingBuffer to true and experimenting with the Effect Composer, but without success.

If anyone has any advice on how to achieve this effect in WebGL, I would greatly appreciate it.

javascriptthree.js

Answer №1

To create a unique effect, you can add a translucent plane behind your scene and ensure that preserveDrawingBuffer = true.

renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
renderer.autoClearColor = false;

// Background plane
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { transparent: true, opacity: 0.1 } ) );
plane.position.z = -10;
scene.add( plane );

Check out this live demonstration for reference:

This code example is using three.js r.64

Answer №2

If you're looking for more precision in controlling your motion trails, in addition to the effective technique shared by WestLangley, you can also utilize the WebGLRenderTarget.

One potential issue you may have encountered is that reducing the opacity of the plane below 0.1 can lead to persistent marks on the screen. This is where render targets come into play to address such issues.

This method involves setting up three scenes and utilizing three textures:

  • The sceneContent includes a cube
  • The sceneComp consists of quadComp with material (textureNew + textureOld)
  • The sceneScreen contains quadScreen with material (textureComp)

Rendering should be done like this:

  • Render sceneContent, cameraPerspective onto textureNew
  • Render sceneComp, cameraOrto onto textureComp
  • Render sceneScreen, cameraOrto onto textureOld
  • Render sceneScreen, cameraOrto onto screen

There's no requirement to set autoClear to false or preserveDrawingBuffer to true.

For an interactive demonstration, check out: https://example.com/demo

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

AngularJS: ng-repeat excluding duplicate keys

Here is a collection of objects I am working with: [{ key:test1 name: name1 }, { key:test1 name: name2 }, { key:test2 name: name3 }] I am currently using ng-repeat to showcase them: <tr ng-repeat=item in list> <td>{{item.key}}</td ...

javascriptangularjs

Attempting to retrieve JSON data using the subscribe method in Angular version 7.x

In my Angular 7.x application, I have a component that calls a function from a service. This function makes a GET request to a backend endpoint and retrieves an array of users. Although I can view the data within the subscribe method (where console.log is ...

javascriptangularajaxobservablesubscribe

The code functions perfectly on the local server, but encounters issues on the hostinger hosting service - after dedicating 3 days to researching online and numerous unsuccessful attempts

[SCREEN SHOT ERROR 500 APPEARS EVEN AFTER FIXING THE PATH IN AJAX CODE] Uncertain if the issue lies in the ajax call or the path of resource files (jquery) HEADER, I ATTEMPTED TO USE MVC WHERE THE INDEX PAGE CONTAINS PATHS TO ALL PAGES, HEADER, FOOTER, CO ...

javascriptjqueryajax

"Troubleshooting the issue of Angular UI-Select failing to display a large

Check out my comprehensive json file containing cities from around the world: download here. Furthermore, take a look at the snippet of html code below: <div class="form-group"> <label class="control-label"> CITY </label> ...

javascriptangularjsjsonui-selectangular-ui-select

What is the process of displaying multiple static files using Express?

I am currently working on a project where I am using Express to render various HTML files from my public folder. These files are static in nature. Additionally, I want to display a 404 page if an invalid route is accessed. Below is the code snippet I have ...

javascriptnode.jsexpressserverroutes

Is there a way to prevent camera motion in three.js when the escape key and directional keys are activated?

While working on my project with Pointer Lock Controls, I came across a bug. When the player is pressing any directional keys on the keyboard and simultaneously presses the escape button to turn off the Pointer Lock Controls, the camera continues to move ...

javascriptthree.jspointerlock

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

javascriptcssgoogle-chromepdf

I'm having trouble with my ajax call not working properly. Can anyone help me identify what might be missing in my code?

const userId = window.localStorage.getItem("zicuserId"); const dataString = "deviceId="+myDeviceId + "&userId=" + userId + "&deviceToken=" + myDeviceToken; alert("dataString: " + dataString); $.ajax({ type: POST, url: "http://mobi ...

javascriptajax

The formValidation, previously known as BootstrapValidator, is causing issues with my form submission via Ajax, despite my efforts to update the code to work with

I recently upgraded the old BootstrapValidator to the new 0.6.0 release known as formValidation. Despite reading the documentation multiple times, I have been unsuccessful in finding the issue and need some assistance. Below are the CSS styles and scripts ...

javascriptjqueryajaxvalidation

Ensure that the JSON object exists before saving it to local storage

[ { "id": 1, "title": "my First Item", "body": "" }, { "id": 2, "title": "my Second Item", "body": "" }, { "id": 3, "title": "my Third Item", "body": "" } ] Do ...

javascriptjsonangularjs

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

What is the best way to showcase navigation and footer on every page using AngularJS?

I'm in the process of building a Single Page Application. I've decided to create separate components for Navigation, Section, and Footer. The Navigation and Footer should be displayed on every page, while only the Section content changes when nav ...

javascriptangularjsangular-ui-routerangular-ui-bootstrapangular-ui

Function that recursively checks for the existence of an ID within a nested object structure

I need assistance in developing a function that can determine whether the link ID of an object or any of its children match a specific ID. For instance, if the link ID for Product paths is 51125095, the function should return true when this ID is passed in ...

javascriptjavascript-objects

Issue with URL parameter in React when using React Router

Initially, everything was running smoothly in my React project using react-router-dom. However, once I added another Route like so: <Route path="/edit/:id" component={EditPage}/> and tried changing the URL in the browser to http://localhos ...

javascriptreactjsreact-router

Tips for sending a tab id to a URL using jQuery

Upon examining the code snippet below, it is apparent that I am attempting to pass the value of a tab's id to a URL. In this instance, I am displaying it in HTML just for illustrative purposes; however, the hashtag id fails to be transferred to the UR ...

javascriptjquery

Having trouble getting Chrome to load my JavaScript script file

Setting up a server on my computer was a simple task, but now I am facing an issue with loading a script file in my HTML. var express=require('express'); var app=express(); app.listen(3000); app.use(express.static('/scripts' ...

javascripthtmlnode.jsgoogle-chromescripting

An uncomplicated application designed to showcase a moving sphere

<!DOCTYPE html> <html> <head> <script type="text/javascript"> var canvas_element; var initial_x = 200; var initial_y = 300; var x_movement = 1; function start_canvas() {setInterval(draw_circle, 10); canvas_element = bouncing_ball_c ...

javascripthtmlcss

Load the entire AngularJS webpage using AJAX requests

I'm facing a challenge where I need to integrate an entire legacy page, along with some AngularJS elements, into our new page using AJAX. Initially, all I could see was the raw AngularJS markup: Rank ID {{$index+1}} {{player.playerid}} Afte ...

javascriptjqueryhtmlangularjsajax

Retrieve the offsetTop value of an accordion following its collapse

My goal is to determine the exact position of a clicked accordion title after it has been clicked. The issue I am facing is that the movement of Bootstrap's accordion collapse and my jQuery function are triggering almost simultaneously. As a result, ...

javascriptjqueryhtml

The order of key:value pairs in documents created by Mongoose does not always align with the schema

Having trouble understanding how the Mongo .create and .findAndUpdate operations work. My mongoose version is 5.4.2X and I have a model with a schema containing multiple key:value pairs in a specific order (using 1. 2. 3. etc to indicate the correct order) ...

javascriptnode.jsmongodbmongoosemongoose-schema