Visual Effects created using three.js Green Screen Rendering Technology

I have been experimenting with the three.js library in my coding project, and I am trying to create a transparent hole within the scene. This hole would essentially act as a 3D object itself, allowing objects in front of it to be rendered while hiding objects behind it.

Initially, I attempted to set the material of this 3D "hole" to a basic material so that I could manipulate pixel data and make certain pixels transparent based on specific conditions. However, when I tried to access the canvas context for this purpose, the program encountered issues.

So, my question now is: how can I effectively read and modify pixel data on a three.js canvas? Alternatively, does the three.js library provide any built-in functionality to achieve this?

//UPDATE//

After some exploration, I managed to retrieve pixel data from the three.js canvas using renderer.context along with some additional code. My new inquiry pertains to changing the color of individual pixels in three.js or WebGL.

//UPDATE//

I successfully manipulated pixel data and converted it into a THREE.js texture using the DataTexture method. However, upon applying this texture to a plane, the plane consistently appears white instead of displaying the expected transparent effect.

var texture = new THREE.Texture();
function SetTransparent(){
    var pixels = new Uint8Array(window.innerWidth*window.innerHeight*4);
    gl.readPixels(0, 0, window.innerWidth, window.innerHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    var length = pixels.length/4;
    /*for (var i = 0; i < length; i++) {
        if (pixels[i*4] === 0 && pixels[i*4+1] === 0 && pixels[i*4+2] === 0 && pixels[i*4+3] === 255){
            pixels[i*4+3] = 0;
        }
    }*/
    var editTex = new THREE.DataTexture(pixels, window.innerWidth, window.innerHeight, THREE.RGBAFormat, THREE.UnsignedByteType);
    texture = editTex;
    texture.needsUpdate = true;
}

Answer №1

Successfully resolved the issue by extracting pixel data using

webglcontex.readpixels(parameters);
and then manipulating it based on colors before transferring it into a 2d canvas.

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var SetCanvas = function(data){
    var w = window.innerWidth;
    var h = window.innerHeight;
    Array.from({length: h}, (val, i) => data.slice(i * w * 4, (i + 1) * w * 4))
        .forEach((val, i) => data.set(val, (h - i - 1) * w * 4));
    var id = ctx.createImageData(window.innerWidth, window.innerHeight);
    id.data.set(data);
    ctx.putImageData(id, 0, 0);
};

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 are effective solutions to reduce the increasing Next.js bundle size caused by dynamic component lookup?

tldr: For more information, please visit the repository. The common.js file includes all dependencies, even though only one is used on the current page. http://localhost:3000/components/ComponentOne http://localhost:3000/components/ComponentTwo Live dem ...

Javascript addClass and removeClass functions are not functioning as expected

Can you help me figure out why the icon still goes into the "startSharing" section even when it is turned off? In my html file, I have the following code for the icon: <div class="startSharing"></div> And in my javascript file, I have the fo ...

What is the best way to attach functions to specific jQuery objects and exclude others?

Imagine having an unordered list <ul>: <ul class="products"> ... </ul> You want to use jQuery to select it and then add custom functions to that specific object. For instance, you wish to include an addProduct(productData) function ...

Updating elements within an array on the fly

In this scenario, let's consider two arrays: array A = [2, 5, 6] and array B = [1, 2, 3, 4, 5, 6, 7, 8]. The values of array B are initially hidden within boxes and become revealed when clicked. The goal is to replace certain values in array B with un ...

Tips on utilizing the window.onload method in conjunction with multiple jQuery click events

I have a dilemma with two buttons in my navigation menu. They are anchor links that switch between tabs on the home page. I want these navigation buttons to activate different tabs when clicked, but I'm struggling with the JavaScript code since I am n ...

Exploring the realm of variable scope in JavaScript and Vue.JS

I am a newcomer to JavaScript and I have encountered an issue with the scope of my object/variable. Can you please help me understand why my {endtoken:this.token} is empty, while console.log({rawToken:e.data}) is not? I find the concept of variable scope ...

jQuery condition doesn't properly resetting the states of the original checkboxes

Having trouble phrasing the question, apologies! Take a look at this fiddle to see my objective: http://jsfiddle.net/SzQwh/. Essentially, when a user checks checkboxes, they should add up to 45 and the remaining checkboxes should then be disabled. The pr ...

JS switch for numerous container elements

How can I create a toggle slider in HTML for multiple elements displayed using foreach? Each element should open a div block with specific information and have a close button. Unfortunately, I haven't been able to find any suitable code to achieve thi ...

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

I have successfully created an iframe using regular javascript. Inside the iframe is a Jquery function along with JQuery itself and it functions correctly within the iframe. However, I am now looking to execute this function from the parent page instead of ...

Having trouble setting the backgroundImage in React?

Hi there! I'm in the process of crafting my portfolio website. My goal is to have a captivating background image on the main page, and once users navigate to other sections of the portfolio, I'd like the background to switch to a solid color. Alt ...

Encountering issues with HMR after relocating files to the /app directory

Greetings, I am currently in the process of learning how to utilize express with webpacks HMR feature. However, every time I make changes and save a file, I encounter the following error: "The following modules couldn't be hot updated: (Full reload n ...

JavaScript believes that the function is not defined, despite its clear existence

This question pertains to an issue regarding the recognition of Bookshelf.js model function as a function. The error message "Function is undefined, Bookshelf.js model function is not being recognized as a function" arises when trying to POST to the login ...

Guide to filtering out cookies using express-winston

After reviewing the README for express-winston, it appears that removing the headers from the logged line is quite straightforward: we can easily do so by adjusting the requestWhitelist option. However, this will disable logging all headers. Is there a wa ...

Generating a single JSON record in React Native

Need help displaying a single JSON record from an API request on the screen. const [user, setUser] = useState(); const getUserData = async () => { // {headers: {Authorization: "Basic " + base64.encode(username + ":" + passwor ...

Pass JSON data from Laravel to Controller

Recently I started using Laravel 5 and I'm encountering an issue with sending Ajax json data from the view to controller. Here is my routes.php : Route::post('ticket','TicketController@store'); Route::get('ticket', &a ...

Populate an empty object by listening for an event in AngularJS

Using my service, I trigger the event using $rootScope.$emit. In the controller, I listen for this event and store the passed data in an array. This allows me to display the values using the ng-repeat directive. When the service function is called, it add ...

Filter error - Unable to retrieve property 'toLowerCase' from null value

When filtering the input against the cached query result, I convert both the user input value and database values to lowercase for comparison. result = this.cachedResults.filter(f => f.prj.toLowerCase().indexOf((this.sV).toLowerCase()) !== -1); This ...

Tips for accessing $parent of ng-repeat from ng-include

In my code, I have a nested ng-repeat structure with an ng-include inside the inner ng-repeat. I am trying to access the outer ng-repeat using $parent within the ng-include. Here is an example of what I am working on: index.html <div ng-repeat="popula ...

Opening a window using Javascript with a PHP Ajax response

I'm attempting to use echo in a controller to return the content below in an AJAX response: $url = url('/expert-profile-view')."/".$request->ticket_id."/".$key->user_id; $url = "<a onclick='window.open('$url','m ...

value of previous checkbox selection

http://jsfiddle.net/thetylercox/gy8EQ/20/ $(':checkbox').change(function() { if (this.checked) { var lastChecked = $(this).prevAll(":checked:first"); if (this.value == lastChecked.val()) { alert("previous checke ...