How can I acquire a duplicate of a Webgl texture?

I have a webgl texture and I have stored it in a JavaScript variable

var texture1 = CreateTexture()

function CreateTexture(){
  var texture = gl.createTexture()
  // more WebGL texture creation code here
  return texture
}

I am looking to create a copy of this texture (texture1) in another variable, similar to how we can do with arrays using the slice function in JavaScript.

// Example for copying array
var arr1 = [1,2,3,4,5]
var arr2 = arr1.slice()

How can I achieve the same for WebGL textures?

Answer №1

It's not a simple task to duplicate a texture, and success is not guaranteed.

To duplicate a texture, you must first render it to another texture. This involves setting up a shader with attributes and uniforms to draw the source texture, attaching the destination texture to a framebuffer, binding the framebuffer, and then drawing.

Another method is using copyTexImage2D. This function copies from either the current framebuffer or canvas if no framebuffer is bound. In this case, you would attach your source texture to a framebuffer, bind the framebuffer, bind your destination texture, and call copyTexImage2D.

There are limitations to both of these methods:

  1. Not every texture format can be attached to a framebuffer. For example, in WebGL1, only a texture with format/type RGBA/UNSIGNED_BYTE can be guaranteed to be attached to a framebuffer.

  2. You cannot query the size of a texture in WebGL1, so you will need to keep track of that information yourself.

  3. In WebGL1, you cannot query the internal format, format, or type of a texture. You would need to save this information. In WebGL2, each mip level can have different sizes and internal formats, so saving dimensions and internal format for each mip level would be necessary for generic copying.

  4. You cannot easily copy the mip levels even if you know how many there are.

    Method 1 won't work for copying mips because you can't specify a specific mip as the destination. Method 2 requires rendering the mip level to the canvas or another texture before calling copyTexImage2D.

    If you're not concerned about the contents of the mips, you can simply copy level 0 and call generateMipmap.

  5. You cannot copy a texture if it is not in a renderable state.

    For instance, in WebGL1, a non-power-of-2 texture with filtering set to use mips or repeat, or if the mips have incorrect sizes or different formats.

You can use gl.getTextureParameter to retrieve parameters like TEXTURE_MIN_FILTER and TEXTURE_WRAP_S from one texture to apply to another, or save them manually as mentioned in issues 2 and 3 above.

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

Guidelines for choosing a dropdown menu option using jQuery in a WordPress photo gallery

First off, take a look at the screenshot to understand what I'm trying to accomplish: Within WordPress, after clicking on "New Post" and then on the "Add Media" button, a pop-up image gallery appears with an image filtering drop-down menu. My goal is ...

Tips for dynamically loading JSON data in Pug and JavaScript by implementing scroll functionality

This is my pug file for specificBike in allBikeData .bikeshop-card.border.border-dark.bg-white.m-3.p-4 li img.shop-image.border.border-dark(src=specificBike.image, onerror="this.onerror=null; this.src=&a ...

Is your toggleclass button suffering from technical difficulties?

Why am I having trouble toggling the box with the button? I want it to maintain its current functionality and also toggle the box as well. Check out my JS fiddle for reference. Here's my code snippet: $(function timelinetiles() { $('.timeline ...

How can I change the orientation of a cube using d3js?

Seeking guidance on creating an accurate chart using d3js How can I rotate the SVG to display the opposite angle as shown in the image? Any recommended resources for achieving this desired result would be greatly appreciated. The provided code only disp ...

Setting initial values for an object in JavaScript

I am currently seeking a method to store predefined values in a separate file for populating my function: Here is my function in index.js: const Modes = (array) => { return { name: array.name, funcionarioIncrease: array.funcio ...

Ways to determine the presence of a value in an array using AngularJs

I'm currently working on looping through an array to verify the existence of email, phone, and alternate phone in a database. My challenge lies in finding a suitable function or workaround in AngularJS that allows me to iterate through the array with ...

Encountering a challenge when attempting to upgrade to Angular 9: Issue with transitioning undecorated classes with DI migration

As I transition from Angular 8 to Angular 9, I encounter an error during the step related to transitioning undecorated classes with DI. While attempting to migrate, I faced an issue with undecorated classes that utilize dependency injection. Some project ...

reveal a hidden div by sliding it during an onclick action

My PHP while loop code is as follows: while (...($...)){ $convid = $row['ID']; echo" <button onclick='getconvo($convid)'>open</button> <div class="convowrap"></div> "; } Here is the correspond ...

Adjust the size of the embedded iframe to match the dimensions of the containing div

Is there a method to resize the iframe embed code for a vine so that it fits within the boundaries of the enclosing div? The supplied embed code already includes sizing information as shown below: <iframe src="https://vine.co/v/iMJzrThFhDL/embed/simp ...

Sending the factory's response back to the controller in AngularJS

I operate a factory that uses an api call to request user data: angular.module('MyApp') .factory('UserApi', function($auth,Account){ return { getProfile: function() { Account.get ...

Conflicts arising between smoothState.js and other plugins

After successfully implementing the smoothState.js plugin on my website, I encountered an issue with another simple jQuery plugin. The plugin begins with: $(document).ready() Unfortunately, this plugin does not work unless I refresh the page. I have gone ...

I am having trouble with my jQuery login function not properly connecting to the PHP file

Hey there, I've been working on creating a login system from scratch by following an online tutorial. The initial Javascript is functioning properly as it detects errors when the inputs are empty. However, once I enter text into the input fields and c ...

Is there a faster way to sort this data with Javascript (or JQuery for extra speed)?

Recently, I've encountered a challenge with sorting an HTML table using JavaScript. The table can potentially contain over a thousand rows. This is what my current setup looks like in terms of HTML: <div id="mycollection" class="table"> &l ...

Embedding the local host into a href link in NextJS

After creating a menu with the Link component in NextJs using href=#contact, I encountered an issue. When I use querySelector on this a element, the href unexpectedly changes to http://localhost:3000/#contact', preventing me from scrolling to that sec ...

Discovering the clicked element using JavaScript: A complete guide

Let me start by saying that I have come across similar posts about tracking event listeners, but in my specific case, I am struggling to figure it out. While I am familiar with the event.target property, I just can't seem to make it work. Here is a s ...

The error message states: "change is not defined"

I am encountering an issue where I have 4 input boxes triggering a function on keyup using the onkeyup event. Strangely, I keep receiving an error stating that "change" (the function's name) is not defined. Despite correctly defining the function, I c ...

What is causing my component callback to not function properly?

I'm currently following a tutorial on AngularJS callbacks from . In my code at https://plnkr.co/edit/dxyI0p0pZFZdMalLfvXO?p=preview, I've attempted to showcase the issue I'm encountering. I have initialized the component in three different w ...

"Tips for stopping users from using Ctrl+U to view page source in

Is there a way to prevent users from viewing the source code (HTML + JavaScript) of a page by disabling Ctrl+U in the browser? ...

Error in executing a function within an asynchronous function sequence

Whenever a user logs in, I want to update their data in Firestore. However, the code I am using does not seem to work as expected. It fails to create a custom User object from the firebase.User. Can anyone help me understand why this is happening and how ...

Encountering continuous errors during NPM installation

As a newcomer to React, I'm facing challenges in building components and getting my page up and running while following a tutorial. When attempting to npm install dropzone, I encounter a barrage of error messages and an empty tree when checking npm li ...