Is it feasible to utilize the draw_buffer extensions in THREE.js?

Trying to work on a project using THREE.js, but needing to utilize the draw_buffers extensions. After extensive searching, I have come up empty-handed in finding a solution to directly implement the draw_buffers extension.

UPDATE Is there a way to use the draw_buffers extension directly? For example, if I have a Fragment shader like:

#extension GL_EXT_draw_buffers : require
// varyings and uniforms

void main(){
     gl_FragData[0] = // some data here
     gl_FragData[1] = // some other data here
     // additional rendertargets
}

Since each gl_FragData is linked to a texture, how can I pass/convert these textures into a THREE.js texture?

Answer №1

After much trial and error, I've finally discovered a solution.

First, I start by performing the following steps:

    texture = new THREE.Texture();
    texture.__webglTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture.__webglTexture );
    texture.__webglInit = false;
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.FLOAT, null);
    gl.bindTexture( gl.TEXTURE_2D, null )

Next, I can easily bind the textures to the framebuffer like so:

   gl.framebufferTexture2D(gl.FRAMEBUFFER, COLOR_ATTACHMENT0_WEBGL, gl.TEXTURE_2D, texture1.__webglTexture, 0);
   gl.framebufferTexture2D(gl.FRAMEBUFFER, COLOR_ATTACHMENT1_WEBGL, gl.TEXTURE_2D, texture2.__webglTexture , 0);
   // Any other texture that is needed

Subsequently, I proceed with these actions:

    gl.bindFramebuffer(gl.FRAMEBUFFER,FBO[0]); 

    renderer.setSize(size,size);
    renderer.render(scene,camera);

    shaderSwap();
    renderer.setSize(window.innerWidth,window.innerHeight)

    gl.bindFramebuffer(gl.FRAMEBUFFER,null) 

For the second pass, all that's required is to have the textures as uniforms.

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

Using the $.ajax function with the PUT method and sending an OPTIONS request

Here is my code snippet: function test(segmentId) { var url = "http://...../api/avoidsegments/123456"; $.ajax({ url: url, type: "PUT", contentType: "application/json", data : { "appID": ig_appID, ...

How can we improve our handling of cyclic requires and EventEmitter in our code?

My user service code looks like this: 'use strict'; let events = require('services/events'); module.exports = { create: function (data) { doCreate(data).then(user => { events.emit('user.create'); ...

Evolving from Angular 1.x to Angular 5: The Transition Journey

Seeking guidance on migrating a large web-app from Angular 1.4 to Angular 5. I have scoured through various tutorials but haven't found the right answer yet. If anyone has already achieved this milestone, please share your insights. Currently, I have ...

Transferring Information from Vue to PHP: What You Need to Know

I need assistance with passing data from Vue to PHP. Currently, I receive a JSON object through a PHP query that looks like this: <?php echo getBhQuery('search','JobOrder','isOpen:true','id,title,categories,dateAdded, ...

How can I change the attributes of icon().abstract.children[0] in the fontawesome-svg-core api?

The issue at hand: The icon() function within the fontawesome-svg-core API is setting default properties for SVG children elements that require custom modifications. My objective: The outcome of the icon() method is an object with an "html" property, co ...

How can the printing of content be adjusted when the browser zoom function is activated?

Is there a way to prevent the content from zooming when printing while the browser is zoomed in? The goal is for the printing (using iframe) to remain unchanged even if the browser is zoomed. I attempted: document.body.style.transformOrigin = 'top le ...

Determining whether today is the same as a particular date with moment.js

I need to determine if today's date is the same as a specific date using moment.js. const today = moment(new Date()).format('DD/MM/YYYY') console.log(today) // "28/09/2021" const expiry = moment(new Date('2021/09/28')).format(&apos ...

The Functionality of Accordions

I have created a responsive accordion script that functions smoothly and allows for easy access to content within each drawer. Unlike many accordions, this one does not cause issues with positioning after opening. The code I am using includes a toggle acti ...

How to effectively create factories in AngularJS

I stumbled upon this angularjs styleguide that I want to follow: https://github.com/johnpapa/angular-styleguide#factories Now, I'm trying to write my code in a similar way. Here is my current factory implementation: .factory('Noty',functi ...

Acquire a set of picture cards for displaying in a grid layout

After creating a cardArray to store card objects, I went through each item in the array to generate images as cards. These card images were then appended to the grid div as children. Additionally, I set up an event listener for the shuffle button. However, ...

The elegant-admin template's mobile navigation toggle is missing

I recently downloaded an admin theme and added the CSS to my Django static files. However, after doing so, the mobile toggle feature disappeared. I double-checked all the CSS and JS links in the index template, and they are correctly linked to the paths, b ...

Executing a Component function within an "inline-template" in VueJS

VueJS version 1.9.0 app.js require('./bootstrap'); window.Vue = require('vue'); Vue.component('mapbox', require('./components/mapbox.js')); const app = new Vue({ el: '#app' }); components/mapbox.js ...

What is the process for creating a custom Vue 3 element with incorporating styles for child components?

After experimenting with Vue's defineCustomElement() to develop a custom element, I encountered an issue where the child component styles were not being included in the shadow root for some unknown reason. To address this problem, I took a different ...

In order to manage this file type properly, you might require a suitable loader, such as an arrow function within a React

Currently, I am in the process of creating an npm package and have encountered a difficulty with the following code: You may need an appropriate loader to handle this file type. | } | | holenNummerInSchnur = Schnur => { | if (this.beurte ...

Error: Unable to access document property as it is null and cannot be read

Trying to launch a new window from another new window triggers the error above. This is my SystemModal.js const SystemModal = (props) => { console.log(props) const [visible, setVisible] = useState(false); return ( <Row> ...

Updating the state after receiving API results asynchronously following a function call

I am attempting to update the state asynchronously when my fetchWeather function is executed from my WeatherProvider component, which calls an axios request to a weather API. The result of this request should be mapped to a forecast variable within the fet ...

ReactJS state refuses to update

In my FreeCodeCamp leaderboard table, I have implemented functionality where clicking on the highlighted table header calls different URLs based on sorting criteria. The application either calls https://fcctop100.herokuapp.com/api/fccusers/top/recent or ht ...

Express JS error: Invalid Parameters Detected

My Express JS application has the following route: app.get('/fetchnotes/:id', function(req, res) { var id = req.params.id; console.log(id); connection.query('SELECT * from dn_notes where id=?',[id], function(err, rows, fiel ...

Tips for resizing a larger image to display only a specific portion in CSS (and incorporating JS if needed)

I need to resize an image that measures 1024x1024 and is segmented into 4 quadrants: My goal is to reduce the size of this image so that quadrant 2 is 256x256 while masking out or hiding the remaining 3 quadrants, displaying only the desired section on th ...

Perform a function within another function in Vue

I am dealing with two nested functions in Vue. The parent function needs to retrieve the value of an attribute, while the child function is responsible for using this attribute value to make an API call. How can I ensure that both parts are executed simult ...