WebGL은 웹에서 3D 그래픽을 표현하기 위해 사용하는 API로 OpenGL/ES를 기반으로 만들어져있다. 현재 버전 3.0까지 나와있고 각 브라우저 개발자들은 다음 버전인 WebGPU를 만들고 있다. WebGPU의 탄생은 OpenGL의 다음 버전인 Vulkan이나 Metal과 연관이 되어 있다. OpenGL은 보편적인 3D 그래픽스 API로 게임 부터 CAD까지 쓰일 수 있다. 하지만, Vulkan이나 Metal은 개발자가 GPU에 더 접근하고 최적화할 수 있도록 저수준의 API제공하며 CPU오버헤드를 줄일 수 있도록 디자인되어있다. 그렇다보니, GPU에 대한 더 많은 지식을 요구하고 코드량도 증가해서 배우기가 더 어려워졌다. 예전에 OpenGL driver에 제공되는 기능을 이제는 Vulkan 개발자는 본인이 직접해야 한다.
또한 OpenGL은 에러 처리를 위한 많은 코드가 드라이버에 있지만, Vulkan은 없다. 그래서 단순하고 코드만 잘 만들면 더 좋은 성능을 얻을 수 있다.
이런 API를 과연 웹 개발자에게도 노출할 필요가 있을까? 초기 애플이 WebKit에 WebGPU를 구현하고 이를 제안할 때, 반대고 있었다. 하지만 지금은 힘을 보아 개발을 진행하고 있다.
Apple에서 만든 WebGPU 데모 코드를 한번 보자.
let gpu;
let commandQueue;
let renderPassDescriptor;
let renderPipelineState;
window.addEventListener("load", init, false);
function init() {
if (!checkForWebMetal()) {
return;
}
let canvas = document.querySelector("canvas");
let canvasSize = canvas.getBoundingClientRect();
canvas.width = canvasSize.width;
canvas.height = canvasSize.height;
gpu = canvas.getContext("webmetal");
commandQueue = gpu.createCommandQueue();
let library = gpu.createLibrary(document.getElementById("library").text);
let vertexFunction = library.functionWithName("vertex_main");
let fragmentFunction = library.functionWithName("fragment_main");
if (!library || !fragmentFunction || !vertexFunction) {
return;
}
let pipelineDescriptor = new WebMetalRenderPipelineDescriptor();
pipelineDescriptor.vertexFunction = vertexFunction;
pipelineDescriptor.fragmentFunction = fragmentFunction;
// NOTE: Our API proposal has these values as enums, not constant numbers.
// We haven't got around to implementing the enums yet.
pipelineDescriptor.colorAttachments[0].pixelFormat = gpu.PixelFormatBGRA8Unorm;
renderPipelineState = gpu.createRenderPipelineState(pipelineDescriptor);
renderPassDescriptor = new WebMetalRenderPassDescriptor();
// NOTE: Our API proposal has some of these values as enums, not constant numbers.
// We haven't got around to implementing the enums yet.
renderPassDescriptor.colorAttachments[0].loadAction = gpu.LoadActionClear;
renderPassDescriptor.colorAttachments[0].storeAction = gpu.StoreActionStore;
renderPassDescriptor.colorAttachments[0].clearColor = [0.35, 0.65, 0.85, 1.0];
render();
}
function render() {
let commandBuffer = commandQueue.createCommandBuffer();
let drawable = gpu.nextDrawable();
renderPassDescriptor.colorAttachments[0].texture = drawable.texture;
let commandEncoder = commandBuffer.createRenderCommandEncoderWithDescriptor(renderPassDescriptor);
commandEncoder.setRenderPipelineState(renderPipelineState);
// NOTE: We didn't attach any buffers. We create the geometry in the vertex shader using
// the vertex ID.
// NOTE: Our API proposal uses the enum value "triangle" here. We haven't got around to implementing the enums yet.
commandEncoder.drawPrimitives(gpu.PrimitiveTypeTriangle, 0, 3);
commandEncoder.endEncoding();
commandBuffer.presentDrawable(drawable);
commandBuffer.commit();
}
Vulkan 코드를 만져본 분은 익숙한 코드일 수 있다. commandQueue, Pipeline, CommnadBuffer등 Vulkan에서 사용되는 개념들이 똑같이 WebGPU에 적용되어 있다. 확실히 코드양은 증가했지만, 뭔가 더 최적화할 수 있는 부분은 많아졌다.
