Generar mipmaps a mano: WebGPU no los genera solos

En WebGL bastaba gl.generateMipmap(gl.TEXTURE_2D). En WebGPU esa función no existe, y no es un olvido: es una consecuencia directa del modelo explícito. La buena noticia es que escribirla es un ejercicio corto que además resulta ser el ejemplo más limpio de render pass a textura que existe, y una vez escrita se reutiliza en todos los proyectos.

Por qué no existe

generateMipmap de WebGL escondía una decisión que la aplicación no controlaba: qué filtro usar para reducir. Casi todas las implementaciones usaban una caja de 2×2, que es rápida y visualmente mediocre; algunas usaban algo mejor; ninguna lo documentaba. El resultado era una función cuyo resultado exacto dependía del driver.

WebGPU tiene por norma no ofrecer operaciones cuyo resultado no esté especificado bit a bit. Además, generar mipmaps no necesita ninguna capacidad que la API no exponga ya: es renderizar un quad de pantalla completa a cada nivel muestreando el anterior. La especificación deja la decisión —caja, Kaiser, Lanczos, con corrección de gamma o sin ella— en manos de quien sabe qué contiene la textura.

La consecuencia práctica es que tú eliges el filtro, y eso importa: un mapa de normales reducido con una caja produce normales no normalizadas, y un mapa de rugosidad reducido ingenuamente produce reflejos incorrectos en la distancia.

El generador completo

La estructura es un pipeline con un shader de quad de pantalla completa, un sampler bilineal, y un bucle que renderiza del nivel i-1 al nivel i.

const WGSL_MIP = `
struct Salida {
  @builtin(position) pos : vec4<f32>,
  @location(0)       uv  : vec2<f32>,
};

@vertex
fn vs(@builtin(vertex_index) i : u32) -> Salida {
  // Triángulo que cubre toda la pantalla, sin vertex buffer.
  var pos = array<vec2<f32>, 3>(
    vec2<f32>(-1.0, -1.0), vec2<f32>(3.0, -1.0), vec2<f32>(-1.0, 3.0));
  var s : Salida;
  s.pos = vec4<f32>(pos[i], 0.0, 1.0);
  s.uv  = pos[i] * vec2<f32>(0.5, -0.5) + vec2<f32>(0.5, 0.5);
  return s;
}

@group(0) @binding(0) var origen : texture_2d<f32>;
@group(0) @binding(1) var muestreo : sampler;

@fragment
fn fs(entrada : Salida) -> @location(0) vec4<f32> {
  return textureSample(origen, muestreo, entrada.uv);
}
`;

function crearGeneradorDeMips(device) {
  const modulo = device.createShaderModule({ label: 'mipmap', code: WGSL_MIP });
  const sampler = device.createSampler({ minFilter: 'linear', magFilter: 'linear' });
  const pipelines = new Map();   // un pipeline por formato de destino

  function pipelineDe(formato) {
    let p = pipelines.get(formato);
    if (!p) {
      p = device.createRenderPipeline({
        label: `mipmap ${formato}`,
        layout: 'auto',
        vertex:   { module: modulo, entryPoint: 'vs' },
        fragment: { module: modulo, entryPoint: 'fs', targets: [{ format: formato }] },
        primitive: { topology: 'triangle-list' },
      });
      pipelines.set(formato, p);
    }
    return p;
  }

  return function generar(textura, { capas = 1 } = {}) {
    const pipeline = pipelineDe(textura.format);
    const encoder = device.createCommandEncoder({ label: 'generar mipmaps' });

    for (let capa = 0; capa < capas; capa++) {
      for (let nivel = 1; nivel < textura.mipLevelCount; nivel++) {
        const grupo = device.createBindGroup({
          layout: pipeline.getBindGroupLayout(0),
          entries: [
            { binding: 0, resource: textura.createView({
                dimension: '2d',
                baseMipLevel: nivel - 1, mipLevelCount: 1,
                baseArrayLayer: capa,    arrayLayerCount: 1,
              }) },
            { binding: 1, resource: sampler },
          ],
        });

        const pass = encoder.beginRenderPass({
          colorAttachments: [{
            view: textura.createView({
              dimension: '2d',
              baseMipLevel: nivel, mipLevelCount: 1,
              baseArrayLayer: capa, arrayLayerCount: 1,
            }),
            loadOp: 'clear',
            storeOp: 'store',
            clearValue: [0, 0, 0, 0],
          }],
        });
        pass.setPipeline(pipeline);
        pass.setBindGroup(0, grupo);
        pass.draw(3);
        pass.end();
      }
    }

    device.queue.submit([encoder.finish()]);
  };
}

El uso es directo, y la textura tiene que llevar RENDER_ATTACHMENT y TEXTURE_BINDING en su usage:

const generarMips = crearGeneradorDeMips(device);
generarMips(texturaAlbedo);

Las dimensiones impares

El bucle de arriba funciona sin cambios con dimensiones que no son potencia de dos, porque no calcula tamaños: el render pass toma el tamaño del nivel destino y el textureSample normaliza sobre el origen. Una textura de 300×200 produce niveles de 150×100, 75×50, 37×25, 18×12, 9×6, 4×3, 2×1, 1×1.

Lo que sí cambia es la calidad. Al reducir de 75 a 37, el factor no es exactamente 2, así que el filtrado bilineal de cuatro texels no cubre exactamente la región que corresponde a cada texel destino, y aparece un ligero desplazamiento acumulativo. Para texturas de material es invisible; para atlas de sprites donde la alineación importa, se nota.

La solución robusta, si la calidad importa, es hacer el muestreo con más de una muestra por texel destino. Un fragment shader con cuatro textureSample desplazados un cuarto de texel y promediados equivale a un filtro de caja de 4×4 y tolera mucho mejor los factores no exactos:

@fragment
fn fs(entrada : Salida) -> @location(0) vec4<f32> {
  let tam = vec2<f32>(textureDimensions(origen, 0));
  let d = 0.25 / tam;
  return (textureSample(origen, muestreo, entrada.uv + vec2<f32>(-d.x, -d.y))
        + textureSample(origen, muestreo, entrada.uv + vec2<f32>( d.x, -d.y))
        + textureSample(origen, muestreo, entrada.uv + vec2<f32>(-d.x,  d.y))
        + textureSample(origen, muestreo, entrada.uv + vec2<f32>( d.x,  d.y))) * 0.25;
}

El problema del sRGB, que es real

Si la textura tiene formato rgba8unorm-srgb, el generador funciona y produce mipmaps correctos, porque el hardware linealiza al muestrear y vuelve a codificar al escribir al attachment. Ese es exactamente el comportamiento deseado: promediar en espacio lineal, que es donde promediar luz tiene sentido.

Con formato rgba8unorm conteniendo datos ya codificados en sRGB —el caso de quien cargó una imagen sin usar el formato -srgb—, el generador promedia valores codificados, que es incorrecto. Los niveles bajos salen más oscuros de lo debido, y el efecto se acumula: una textura de detalle con mucho contraste se oscurece visiblemente en la distancia.

La regla operativa es la misma que en la lección de subida de datos: las texturas de color van en formato -srgb y todo funciona solo. Las de datos —normales, rugosidad, oclusión— van en formato lineal, y ahí el promedio lineal es el correcto.

Queda un caso con matiz propio: los mapas de normales. Promediar cuatro normales unitarias no da una normal unitaria, y renormalizar tampoco es del todo correcto porque pierde la información de rugosidad que esa dispersión representaba. La solución de calidad —normal map filtering a lo Toksvig, o mapas LEAN— pasa por guardar la longitud del promedio y usarla para aumentar la rugosidad del nivel correspondiente. Un generador serio de motor tiene una ruta específica para normales.