What is the process for transferring a particular mip map level from one texture to another specific mip map level?

Question

What is the process for transferring a particular mip map level from one texture to another specific mip map level?

Currently, I am combining multiple 2D textures into an Array Texture in WebGL2 (using three.js) to render models with multi draw functionality. These individual textures are frequently updated and utilize mipmaps. Since generating mipmaps for a single layer in an Array Texture is not feasible, I'm interested in creating mipmaps for a 2D target and then transferring the complete mipmap chain to a specific layer within the texture.

Upon investigating the WebGL API, it appears that binding a particular mipmap level from a texture created with texStorage2D and copying it to a specific mipmap level for a layer in the 3D texture might not be achievable. Although this process occurs within three.js, the following approximate copy commands are executed:

_gl.pixelStorei( _gl.UNPACK_ROW_LENGTH, image.width );
_gl.pixelStorei( _gl.UNPACK_IMAGE_HEIGHT, image.height );
_gl.pixelStorei( _gl.UNPACK_SKIP_PIXELS, minX );
_gl.pixelStorei( _gl.UNPACK_SKIP_ROWS, minY );

gl.bindTexture( _gl.TEXTURE_2D, srcTextureHandle, _gl.TEXTURE0 );
gl.copyTexSubImage3D( _gl.TEXTURE_2D_ARRAY, level, dstX, dstY, dstZ, minX, minY, width, height );

While it is possible to specify the target mip level in the parameters of copyTexSubImage3D, there doesn't seem to be a way to designate the mipmap level for the bound texture to copy.

I have come across the glCopyImageSubData function in the OpenGLES3.2 specification, which allows for specifying both source and target mip levels, but unfortunately, this feature is not available in web browsers. Is it feasible to achieve this in WebGL2?

javascript three.js webgl webgl2

Answer 1

Answer №1

Generating mipmaps for an individual layer in an Array Texture is not feasible.

However, it can be achieved by manually handling the process instead of using gl.generateMipmap.

Using draw method

canvas { border: 1px solid black; }

<canvas id="c"></canvas>
<script type="module">
import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const lerp = (a, b, t) => a + (b - a) * t;

// More code snippets here...

</script>

Using blitFramebuffer method

canvas { border: 1px solid black; }

<canvas id="c"></canvas>
<script type="module">
import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const lerp = (a, b, t) => a + (b - a) * t;
const getMipSize = (size, mipLevel) => size.map(s => Math.max(1, s >> mipLevel));

// More code snippets here...

</script>

Both methods should yield similar results. The draw method offers flexibility in customizing filtering algorithms.

To copy from one layer to another, set the mipmap/layer in the DRAW_FRAMEBUFFER using framebufferTextureLayer, then perform blit or draw operations. Ensure that if reading from and writing to the same texture, the texture parameter settings prevent any feedback loops, such as setting TEXTURE_BASE_LEVEL and TEXTURE_MAX_LEVEL appropriately to read from a single mip level only.

Answer 2

Generating mipmaps for an individual layer in an Array Texture is not feasible.

However, it can be achieved by manually handling the process instead of using gl.generateMipmap.

Using draw method

canvas { border: 1px solid black; }

<canvas id="c"></canvas>
<script type="module">
import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const lerp = (a, b, t) => a + (b - a) * t;

// More code snippets here...

</script>

Using blitFramebuffer method

canvas { border: 1px solid black; }

<canvas id="c"></canvas>
<script type="module">
import 'https://greggman.github.io/webgl-lint/webgl-lint.js';
import * as twgl from 'https://twgljs.org/dist/5.x/twgl-full.module.js';

const lerp = (a, b, t) => a + (b - a) * t;
const getMipSize = (size, mipLevel) => size.map(s => Math.max(1, s >> mipLevel));

// More code snippets here...

</script>

Both methods should yield similar results. The draw method offers flexibility in customizing filtering algorithms.

To copy from one layer to another, set the mipmap/layer in the DRAW_FRAMEBUFFER using framebufferTextureLayer, then perform blit or draw operations. Ensure that if reading from and writing to the same texture, the texture parameter settings prevent any feedback loops, such as setting TEXTURE_BASE_LEVEL and TEXTURE_MAX_LEVEL appropriately to read from a single mip level only.

What is the process for transferring a particular mip map level from one texture to another specific mip map level?

Answer №1

Using draw method

Using blitFramebuffer method

Similar questions

Refine keys dynamically according to the given input

Encountering a 401 Unauthorized error while attempting an AJAX call to an ASP.NET Web API endpoint that has Windows authentication activated

"How can a link be created in the most nested node of jsTree to connect to a

Ways to update the value within an object in an array stored in a BehaviorSubject?

Troubleshooting Problems with jQuery's .remove() Function

Trouble with Background Image Display in Internet Explorer 8

What are the steps to implementing the jQuery live() function in this particular code?

Tips for updating standard JavaScript events in Rails following an Ajax call

Calculate the sum of values in a JSON array response

Why won't the function activate on the initial click within the jQuery tabs?

Retrieve Javascript data from JSON only if the specified parameter is set to true

Mobile browser experiences video freezing when src is set through useState, yet it starts playing when triggered by a button click or when the video is set to M

Substitute the nested object's value with a variable structure

Highlighting the current menu item by comparing the URL and ID

Encountering an issue with AJAX form submission in PHP when integrating object-oriented programming principles with Sweet Alert confirmation pop-ups

AngularJS select box setting selected valueIt can be accomplished by manipulating the

Error encountered while attempting to load image through multiple window.print() functions

React is throwing a parsing error due to the incorrect use of braces. Remember, JSX elements must be wrapped in an enclosing tag. If you were trying to include multiple elements without a parent tag, you can use a JSX fragment

Tips for retrieving data from Angular dropdown menus

Using ReactJS and Ruby on Rails to implement an AJAX delete request