Spector.js / Chrome DevTools로 WebGL 프레임 보기

renderer 코드만 봐서는 실제 GPU에 어떤 draw call이 전달됐는지 놓치기 쉽습니다. 프레임 캡처 도구로 한 프레임을 열어보면 추측이 줄어듭니다.

capture하기 좋은 draw label을 남기는 코드

프레임 캡처 도구에서 draw call을 찾기 쉽도록 renderer 내부 command에 label을 붙여둡니다.

function drawBatch(gl, batch, stats) {
  stats.currentLabel = `${batch.pipeline}:${batch.nodes.length} nodes`;

  gl.useProgram(batch.program);
  gl.bindVertexArray(batch.vao);
  gl.bindTexture(gl.TEXTURE_2D, batch.texture ?? null);
  gl.drawArrays(gl.TRIANGLES, 0, batch.vertexCount);

  stats.drawCalls.push({
    label: stats.currentLabel,
    vertexCount: batch.vertexCount,
    textureId: batch.textureId
  });
}

Spector.js나 DevTools에서 실제 GPU call을 봤을 때, 앱의 batch log와 순서가 맞는지 비교합니다.

확인할 것

draw call order
shader source
uniform values
texture binding
framebuffer target

특히 “분명 그렸는데 안 보인다”는 문제는 blending, depth, viewport, framebuffer 설정에서 자주 나옵니다.

WebGL 상태도 같이 로그로 남긴다

function captureGlState(gl) {
  return {
    viewport: gl.getParameter(gl.VIEWPORT),
    blend: gl.isEnabled(gl.BLEND),
    depthTest: gl.isEnabled(gl.DEPTH_TEST),
    framebuffer: gl.getParameter(gl.FRAMEBUFFER_BINDING),
    program: gl.getParameter(gl.CURRENT_PROGRAM)
  };
}

function drawWithDebugLabel(gl, batch, stats) {
  const before = captureGlState(gl);
  drawBatch(gl, batch, stats);
  stats.glStates.push({ label: stats.currentLabel, before });
}

프레임 캡처 도구와 앱 로그가 같은 draw label을 공유하면 문제를 훨씬 빨리 좁힐 수 있습니다. 특히 viewport, framebuffer, blend 상태는 “안 보이는 draw call”의 단골 원인입니다.

오늘의 핵심

프레임 캡처는 GPU renderer의 DevTools입니다. 시각 버그를 shader와 draw call 단위로 좁혀줍니다.