웹에서 3D 그래픽을 렌더링하는 WebGL

WebGL이란?

WebGL은 자바스크립트 API이며, 웹에서 3D 그래픽을 렌더링하는 데 사용됩니다. WebGL은 OpenGL ES를 기반으로 하며, 브라우저에서 하드웨어 가속 그래픽을 지원합니다.

기본적인 WebGL 코드

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

해당 코드는 캔버스 요소를 선택하고 WebGL 컨텍스트를 가져옵니다. WebGL 컨텍스트를 사용하여 캔버스를 조작하고 3D 그래픽을 렌더링할 수 있습니다.

WebGL로 삼각형 그리기

const vertices = [
  0, 0,
  0, 0.5,
  0.7, 0
];

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
  
const vertexShaderSource = `
  attribute vec2 coordinates;
  void main() {
    gl_Position = vec4(coordinates, 0.0, 1.0);
  }
`;

const fragmentShaderSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

const coord = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coord);

gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);

해당 코드는 WebGL을 사용하여 삼각형을 그리는 코드입니다. 먼저 정점 데이터를 정의하고, 버퍼를 생성하고 해당 데이터를 버퍼에 저장한 다음, 셰이더 코드를 생성하고 컴파일합니다. 그다음, 셰이더 프로그램을 생성하고 셰이더를 링크하여 사용할 수 있도록 합니다. 마지막으로 WebGL 컨텍스트를 사용하여 정점 속성을 설정하고, 화면을 지우고 삼각형을 그립니다.

결론

웹에서 3D 그래픽을 렌더링하려면 WebGL을 사용할 수 있습니다. WebGL을 사용하면 브라우저에서 하드웨어 가속 그래픽을 사용하여 고성능 3D 그래픽을 렌더링 할 수 있습니다. 자바스크립트와 브라우저 내장 API를 사용하여 웹에서 3D 렌더링을 직접 구현해 볼 수 있습니다.

(자바스크립트, 브라우저, WebGL, 3D 그래픽, 렌더링)