Three.js 추상화?

function mat4Identity() {
  return new Float32Array([
    1, 0, 0, 0, 
    0, 1, 0, 0, 
    0, 0, 1, 0, 
    0, 0, 0, 1,
  ]);
}

const vertexModule = device.createShaderModule({ code: VERTEX_SHADER });
  const fragmentModule = device.createShaderModule({ code: FRAGMENT_SHADER });

 
const vertInfo = await vertexModule.getCompilationInfo();
vertInfo.messages.forEach((m) =>
  console[m.type === "error" ? "error" : "warn"](`[Vertex shader] ${m.message}`),
);
 
const fragInfo = await fragmentModule.getCompilationInfo();
fragInfo.messages.forEach((m) =>
  console[m.type === "error" ? "error" : "warn"](`[Fragment shader] ${m.message}`),
);

- **상황** : 위의 과정을 모두 마쳤는데, **삼각형이 화면에 나타나지 않는 문제 발생**
- **원인** 
  - `HTML`에 `canvas`가 아닌 `div` 요소로 정의되어 있었음
  - `const context = document.getElementById("gpuCanavs");`이 **`gpuCanavs`로 오타**가 있었음
  - `const context = document.getElementById("gpuCanvas");` <br/>`const canvas = canvas.getContext("webgpu");` -> **`canvas`가 `context`로 오타**, **`canvas`와 `context`가 서로 바뀌어 있는 오타**.
  - `@group(0) @binding(0) var<uniform> matrices : Matrices;` 인데 **`matrices`가 아니라 `mvp`로 오타**
   - `struct VertexInput { @location(0) position : vec4<f32>, };` -> **버퍼는 `float32x3` 이므로 `position`이 `vec3<f32>`여야함**

import "./style.css";
 
// Model 행렬을 정의하기 위한 함수
function mat4Identity() {
  return new Float32Array([
    1,
    0,
    0,
    0, //
    0,
    1,
    0,
    0, //
    0,
    0,
    1,
    0, //
    0,
    0,
    0,
    1,
  ]);
}
 
// View 행렬을 정의하기 위한 함수
function mat4LookAt(eye, center, up) {
  const ex = eye[0],
    ey = eye[1],
    ez = eye[2];
  const cx = center[0],
    cy = center[1],
    cz = center[2];
 
  let ux = up[0],
    uy = up[1],
    uz = up[2];
 
  let fx = ex - cx,
    fy = ey - cy,
    fz = ez - cz;
  let len = Math.hypot(fx, fy, fz);
  fx /= len;
  fy /= len;
  fz /= len;
 
  let rx = uy * fz - uz * fy,
    ry = uz * fx - ux * fz,
    rz = ux * fy - uy * fx;
  len = Math.hypot(rx, ry, rz);
  rx /= len;
  ry /= len;
  rz /= len;
 
  ux = fy * rz - fz * ry;
  uy = fz * rx - fx * rz;
  uz = fx * ry - fy * rx;
 
  return new Float32Array([
    rx,
    ux,
    fx,
    0, //
    ry,
    uy,
    fy,
    0, //
    rz,
    uz,
    fz,
    0, //
    -(rx * ex + ry * ey + rz * ez),
    -(ux * ex + uy * ey + uz * ez),
    -(fx * ex + fy * ey + fz * ez),
    1,
  ]);
}
 
// Perspective 행렬을 정의하기 위한 함수
function mat4Perspective(fovY, aspect, near, far) {
  const f = 1.0 / Math.tan(fovY / 2);
  const nf = 1 / (near - far);
 
  return new Float32Array([
    f / aspect,
    0,
    0,
    0, //
    0,
    f,
    0,
    0, //
    0,
    0,
    (far + near) * nf,
    -1, //
    0,
    0,
    2 * far * near * nf,
    0,
  ]);
}
 
async function main() {
  //1.WebGPU 지원 여부 검사
  if (!navigator.gpu) {
    console.error("WebGPU를 지원하지 않습니다.");
    return;
  }
 
  //2. adapter와 device 얻기
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.error("적절한 GPU 어댑터를 찾을 수 없습니다.");
    return;
  }
  const device = await adapter.requestDevice();
  device.lost.then((info) => {
    console.error("Device 소실 :", info.message, "| 원인 :", info.reason);
  });
 
  //3-1. Canvas와 context 설정
  const canvas = document.getElementById("gpuCanvas");
  const context = canvas.getContext("webgpu");
  if (!context) {
    console.error("캔버스로부터 WebGPU 컨텍스트를 얻을 수 없습니다.");
    return;
  }
 
  //3-2 WebGPU와 호환되는 구성 세팅
  const format = navigator.gpu.getPreferredCanvasFormat();
  context.configure({ device, format, alphaMode: "opaque" });
 
  //4-1. 삼각형의 3개의 정점 정의
  const vertices = new Float32Array([
    0.0,
    0.6,
    0.0, // 위쪽 정점
    -0.5,
    -0.4,
    0.0, // 왼쪽 정점
    0.5,
    -0.4,
    0.0, // 오른쪽 정점
  ]);
 
  //4-2. GPU 메모리 생성
  const vertexBuffer = device.createBuffer({
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
  });
 
  //4-2. CPU가 읽을 수 있는 메모리에서 GPU 메모리로 복사
  device.queue.writeBuffer(vertexBuffer, 0, vertices);
 
  const MATRIX_SIZE = 16 * 4;
  const UNIFORN_SIZE = 3 * MATRIX_SIZE;
 
  const uniformBuffer = device.createBuffer({
    size: UNIFORN_SIZE,
    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
  });
 
  //5. 정의된 함수로 행렬 정의하기
  const model = mat4Identity();
 
  const view = mat4LookAt(
    [0, 0, 2], // eye
    [0, 0, 0], // center
    [0, 1, 0], // up
  );
 
  const aspect = canvas.width / canvas.height;
  const projection = mat4Perspective((60 * Math.PI) / 180, aspect, 0.1, 100);
 
  // 6. 정의된 행렬을 GPU에 복사하기
  device.queue.writeBuffer(uniformBuffer, 0, model);
  device.queue.writeBuffer(uniformBuffer, MATRIX_SIZE, view);
  device.queue.writeBuffer(uniformBuffer, 2 * MATRIX_SIZE, projection);
 
  // 7. 셰이더 코드 정의하기
  const VERTEX_SHADER = /*wgsl*/ `
    struct Matrices { //GPU로 전달할 행렬들을 정의하는 구조체
      model : mat4x4<f32>, // GPU로 전달한 Model 행렬
      view : mat4x4<f32>, // GPU로 전달한 View 행렬
      projection : mat4x4<f32>, // GPU로 전달한 Projection 행렬
    };
 
    // 이 구조체에 실제 데이터를 채우고 읽기 위해서 group과 binding을 설정
    // 0번 그룹과 0번 바인딩을 통해서 행렬 데이터를 읽기 위해서 별도의 코드가 필요 -> 추후 다시 설명
    @group(0) @binding(0) var<uniform> mvp : Matrices; 
 
    // 삼각형의 정점 데이터를 정의하는 구조체
    // 0번 location을 사용하여 정점의 위치 데이터를 읽기 위해서 별도의 코드가 필요 -> 추후 다시 설명
    struct VertexInput {
      @location(0) position : vec3<f32>,
    };
 
    // 정점 셰이더의 최종 결과값에 대한 구조체
    struct VertexOutput {
      @builtin(position) clip_position : vec4<f32>,
    };
 
    @vertex
    // 정점 셰이더의 메인 함수 인자로 정점 데이터를 읽기 위한 구조체를 받음
    
    fn vs_main(in: VertexInput) -> VertexOutput {
      var out : VertexOutput;
      let mvp_matrix = mvp.projection * mvp.view * mvp.model; // 모델 변환, 뷰 변환, 프로젝션 변환에 대한 행렬을 만들고, 
      out.clip_position = mvp_matrix * vec4<f32>(in.position, 1.0); // 이 행렬에 정점의 로컬 좌표를 곱한 결과를 반환하고 있다.
 
      return out;
    }
  `;
 
  const FRAGMENT_SHADER = /*wgsl*/ `
    @fragment
    fn fs_main() -> @location(0) vec4<f32> {
      return vec4<f32>(1.0, 1.0, 0.0, 1.0); // R: 1.0, G: 1.0, B: 0.0, A: 1.0 -> 노란색으로 출력
    }
  `;
 
  // 8. Bind Group Layout (어떤 위치에 어떤 종류의 데이터가 들어오는지에 대한 설계도) 설정
 
  const bindGroupLayout = device.createBindGroupLayout({
    entries: [
      {
        binding: 0, // VERTEX_SHADER에서 bindding(0)에 대한 값과 일치해야함, 0번 바인딩에 대한 설정
        visibility: GPUShaderStage.VERTEX, // 이렇게 지정하면 -> 여기서 바인딩된 데이터는 VERTEX_SHADER에서만 읽을 수 있다는 것을 의미.
        buffer: { type: "uniform" },
        // 이 데이터는 uniform이라는 의미,
        // uniform 버퍼는 생성될 때 uniform 타입으로 생성되고 있으니까 , 타입을 맞춰야한다.
        //  -> usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
      },
    ],
  });
 
  // 위 bindGroupLayout을 기반으로 실제 데이터를 바인딩하는 Bind Group 설정
  const bindGroup = device.createBindGroup({
    layout: bindGroupLayout, // 사용할 레이아웃은 위에서 정의한 bindGroupLayout
    entries: [
      {
        binding: 0, // bindGroupLayout 의 entries의 첫번째 요소에 바인딩 되라는 의미
        resource: { buffer: uniformBuffer }, // 실제 바인딩 되는 데이터는 uniformBuffer, 이 버퍼는 위에서 생성한 uniform 버퍼
      },
    ],
  });
 
  // 9. Shader 컴파일
  const vertexModule = device.createShaderModule({ code: VERTEX_SHADER });
  const fragmentModule = device.createShaderModule({ code: FRAGMENT_SHADER });
 
  const vertInfo = await vertexModule.getCompilationInfo();
  vertInfo.messages.forEach((m) =>
    console[m.type === "error" ? "error" : "warn"](`[Vertex shader] ${m.message}`),
  );
 
  const fragInfo = await fragmentModule.getCompilationInfo();
  fragInfo.messages.forEach((m) =>
    console[m.type === "error" ? "error" : "warn"](`[Fragment shader] ${m.message}`),
  );
 
  // 10. Render Pipeline (렌더링 과정에 대한 설계도) 설정
  const pipeline = device.createRenderPipeline({
    layout: device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] }), // 사용할 Bind Group Layout은 위에서 정의한 bindGroupLayout
    vertex: {
      module: vertexModule, // 사용할 Vertex Shader는 위에서 컴파일한 vertexModule
      entryPoint: "vs_main", // Vertex Shader의 진입점은 vs_main 함수
      buffers: [
        {
          arrayStride: 3 * 4, // 정점 데이터의 한 요소가 차지하는 바이트 수, 여기서는 position이 vec3<f32>이니까 3개의 float, 각 float는 4바이트 -> 3 * 4
          attributes: [
            {
              shaderLocation: 0, // 쉐이더 location(0)과 연결
              offset: 0, // position 데이터는 정점 데이터의 시작 부분에 위치하니까 offset은 0
              format: "float32x3", // position 데이터는 vec3<f32>이니까 float 3개짜리 데이터
            },
          ],
        },
      ],
    },
    fragment: {
      module: fragmentModule, // 사용할 Fragment Shader는 위에서 컴파일한 fragmentModule
      entryPoint: "fs_main", // Fragment Shader의 진입점은 fs_main 함수
      targets: [
        // 렌더링 결과가 출력될 대상에 대한 설정
        {
          format, // 출력 대상의 포맷은 위에서 설정한 format, 여기서는 navigator.gpu.getPreferredCanvasFormat()로 얻은 값
        },
      ],
    },
    primitive: {
      topology: "triangle-list", // 렌더링할 도형의 유형, 여기서는 정점 3개를 묶어 삼각형 1개를 그리는 방식
    },
  });
 
  // 11. Command Encoder와 Render Pass Encoder를 사용하여 실제 렌더링 명령어 작성
  function render() {
    const commandEncoder = device.createCommandEncoder(); // 명령어를 기록하기 위한 Command Encoder 생성
 
    const renderPass = commandEncoder.beginRenderPass({
      colorAttachments: [
        {
          view: context.getCurrentTexture().createView(), // 렌더링 결과가 출력될 대상, 여기서는 캔버스의 현재 텍스처 뷰
          clearValue: { r: 0.05, g: 0.05, b: 0.08, a: 1.0 }, // 초기화할 색상, 여기서는 검은색
          loadOp: "clear", // 렌더링 시작 전에 이 대상에 대한 작업, 여기서는 clear -> 렌더링 시작 전에 이 대상이 지정된 색상으로 초기화됨
          storeOp: "store", // 렌더링이 끝난 후 이 대상에 대한 작업, 여기서는 store -> 렌더링 결과가 이 대상에 저장됨
        },
      ],
    });
 
    // 위에서 설정한 Render Pipeline을 사용하겠다는 의미
    renderPass.setPipeline(pipeline);
    // 위에서 설정한 Bind Group을 0번 그룹으로 바인딩,
    // 이로써 셰이더에서 @group(0) @binding(0)으로 정의된 uniform 데이터가 이 bindGroup의 uniformBuffer를 참조하게 됨
    renderPass.setBindGroup(0, bindGroup);
    renderPass.setVertexBuffer(0, vertexBuffer);
    renderPass.draw(3); // 정점 3개를 사용해서 1개의 인스턴스를 그리겠다는 의미
    renderPass.end(); // Render Pass 종료
 
    const commandBuffer = commandEncoder.finish(); // 명령어 기록 종료, Command Buffer 생성
    device.queue.submit([commandBuffer]); // Command Buffer를 GPU에 제출하여 실행
  }
 
  render();
}
 
main();

const pipeline = device.createRenderPipeline({
  // 렌더링 과정에 대한 설계도
});

const commandBuffer = commandEncoder.finish(); 
device.queue.submit([commandBuffer]);