0

I'd like to generate custom mip maps for a rendered frame for an effect in THREE.js, but it's not clear how to achieve that. I'll want to regenerate the mip maps again after every frame.

This example shows how to generate mipmaps for a texture, but it looks like the mipmaps array requires a handle to an image or canvas tag, which a renderTarget texture does not have. Ideally I'd like to be able to do something like this:

var rt = new THREE.WebGLRenderTarget()

// initialize and render to the target

var mipmaps = [];
var width = rt.width / 2;
var height = rt.height / 2;

while( width > 2 && height > 2) {

    var mip = new THREE.WebGLRenderTarget({ width, height });
    mipmaps.push(mip.texture); // mip.texture.image === undefined

    // render to the new mipmap with a custom downsample shader

    width /= 2;
    height /= 2;
}

rt.texture.mipmaps = mipmaps;

// render using the original render target as a texture map and using
// the new mip maps as needed

Is this possible? How would I achieve this?

Thank you!

Garrett Johnson
  • 2,413
  • 9
  • 17
  • 2
    You can't render to mips levels > 0 in WebGL1 so any solution is going to be slow. Off the top of my head you'd have render to some other texture, read the data back with 'readPixels' and then upload to the mip level or use `copyTexImage2D` – gman Jul 26 '18 at 20:52
  • @gman Thanks! I figured that might be the case. I suppose another option would be to use a texture array to emulate custom mip maps but you'd have to use if statements before each sample because of the constant index for arrays requirement. Any thoughts on whether that would be at all performant? I was hoping to create a pyramid of depth textures and use it for raymarching, so the samples would be happening inside of a for loop. – Garrett Johnson Jul 26 '18 at 21:11

0 Answers0