Múltiples render targets: escribir a varios attachments a la vez

Un fragment shader puede escribir a varios attachments en la misma pasada, y esa capacidad es la que hace posible el renderizado diferido, los buffers de movimiento, los canales de identificación de objetos y cualquier técnica que necesite guardar varias magnitudes por píxel. También es la forma más rápida de saturar el ancho de banda de una GPU, y el cálculo de cuánto cuesta cabe en tres líneas.

Declarar varias salidas

La salida del fragment shader pasa a ser una struct con una @location por attachment:

struct SalidaGBuffer {
  @location(0) albedo    : vec4f,
  @location(1) normal    : vec4f,
  @location(2) material  : vec4f,
  @location(3) velocidad : vec2f,
};

@fragment
fn fs(entrada : EntradaFS) -> SalidaGBuffer {
  var s : SalidaGBuffer;
  s.albedo    = vec4f(colorBase, 1.0);
  s.normal    = vec4f(normalize(entrada.normal) * 0.5 + 0.5, 0.0);
  s.material  = vec4f(rugosidad, metalico, oclusion, 0.0);
  s.velocidad = entrada.pantallaActual - entrada.pantallaAnterior;
  return s;
}

Los números de @location son los índices dentro de fragment.targets en el pipeline y dentro de colorAttachments en el render pass, y los tres tienen que estar alineados:

fragment: {
  module, entryPoint: 'fs',
  targets: [
    { format: 'rgba8unorm' },     // location 0
    { format: 'rgba16float' },    // location 1
    { format: 'rgba8unorm' },     // location 2
    { format: 'rg16float' },      // location 3
  ],
},

const pase = encoder.beginRenderPass({
  colorAttachments: [
    { view: vistaAlbedo,    loadOp: 'clear', storeOp: 'store', clearValue: [0,0,0,1] },
    { view: vistaNormal,    loadOp: 'clear', storeOp: 'store', clearValue: [0,0,0,0] },
    { view: vistaMaterial,  loadOp: 'clear', storeOp: 'store', clearValue: [0,0,0,0] },
    { view: vistaVelocidad, loadOp: 'clear', storeOp: 'store', clearValue: [0,0,0,0] },
  ],
  depthStencilAttachment: { /* ... */ },
});

Las reglas que hay que cumplir:

• El número de targets está acotado por maxColorAttachments, con mínimo garantizado de 8.
• Todos los attachments de color de un pase tienen que tener las mismas dimensiones y el mismo número de muestras.
• El tipo de la salida tiene que ser compatible con el formato: vec4f para formatos flotantes y normalizados, vec4u para uint, vec4i para sint.
• Escribir menos componentes de los que el formato tiene es legal.
• Hay además un límite sobre el tamaño total de los formatos combinados, maxColorAttachmentBytesPerSample, con mínimo garantizado de 32 bytes.

Ese último límite es el que corta antes en la práctica. El G-buffer de arriba suma 4 más 8 más 4 más 4, o sea 20 bytes por muestra, y cabe. Cuatro targets de rgba16float suman 32 y caben justo. Cuatro de rgba32float suman 64 y no caben en un dispositivo que solo garantice el mínimo.

writeMask y mezcla por target

Cada target tiene su propio estado, y no tienen por qué coincidir:

targets: [
  { format: 'rgba16float',
    blend: {
      color: { srcFactor: 'src-alpha', dstFactor: 'one-minus-src-alpha', operation: 'add' },
      alpha: { srcFactor: 'one',       dstFactor: 'one-minus-src-alpha', operation: 'add' },
    } },
  { format: 'rgba8unorm', writeMask: GPUColorWrite.ALL },
  { format: 'rg16float',  writeMask: GPUColorWrite.RED | GPUColorWrite.GREEN },
],

writeMask permite escribir solo algunos canales de un target, y su uso real es acumular en un canal sin tocar los otros, o desactivar por completo la escritura a un attachment en una pasada concreta poniéndolo a cero.

Un elemento de targets puede ser null, lo que significa que el pipeline no escribe a ese attachment aunque el pase lo tenga. Es la forma de reutilizar un mismo render pass de cuatro attachments con pipelines que solo escriben a algunos.

Sin etapa de fragmentos

La etapa fragment del descriptor es opcional. Un pipeline sin ella dibuja geometría que solo afecta al buffer de profundidad y al stencil:

const pipelineProfundidad = device.createRenderPipeline({
  layout: disposicion,
  vertex: { module, entryPoint: 'vsSoloPosicion', buffers: [layoutPosiciones] },
  depthStencil: { format: 'depth24plus', depthWriteEnabled: true, depthCompare: 'less' },
  primitive: { topology: 'triangle-list', cullMode: 'back' },
  // sin fragment
});

Es lo que se usa para un depth prepass, para rellenar un mapa de sombras y para pases de oclusión. La ganancia es doble: no hay coste de fragment shader y no hay escritura de color, así que el pase va limitado solo por geometría y por la tasa de relleno de profundidad, que en las GPUs modernas es varias veces mayor que la de color.