canvas와 WebGL

#Javascript

webgl은 기존 canvas API와는 별도로 openGL 규격을 제공하는 비표준 확장 기능이다.
canvas가 2004년에 나왔고, webgl은 모질라에 의해 2011년에 나왔다.

canvas와 비교하면, 비표준이고, 성능이 더 좋으며, 3D에 최적화되어있다는 점이 다르다. 2D라도 webgl이 더 빠르고, gpu 가속 등을 사용할 수가 있다. 다만 좀 어렵다.

비표준이라도 대부분의 메이저 브라우저들은 다 지원하긴 한다.

한번 간단하게 사용해보겠다.

아래는 캔버스에 검은색만을 칠하는 간단한 예제다.
openGL을 안다면 어렵지 않을 것이다.

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div class="">
            <canvas id="canvas" width="300" height="300"></canvas>
            <button onclick="onButtonClicked()">클릭</button>
        </div>
    </body>

    <script>
      function onButtonClicked() {
        const canvas = document.getElementById("canvas");

        const webgl = canvas.getContext("webgl");
        if (!webgl) {
          alert("webgl 미지원!");
          return;
        }

        webgl.clearColor(0.0, 0.0, 0.0, 1.0); // #000000 검은색 설정
        webgl.clear(webgl.COLOR_BUFFER_BIT|webgl.DEPTH_BUFFER_BIT); // 색상과 depth buffer를 설정
      }
    </script>
</html>

우선 그릴 바탕이 될 캔버스를 하나 마련해야 한다.

그리고 webgl 컨텍스트를 가져와서 지원 여부를 검증한다.

컨텍스트가 잘 가져와졌다면, rgb값 주고 clear만 해주면 된다.

여기서 depth buffer라는 개념이 좀 생소할 수도 있다. 이건 2D가 아니라 3D 렌더링에 사용되는 개념으로, 가까이 있는 물체가 더 가까이 그려지게 해주는 것이다. 당장 이 코드에서는 2D로만 그리고 있으니 상관은 없다.

그럼 이렇게 그려질 것이다.

참조
https://webglfundamentals.org/webgl/lessons/ko/webgl-fundamentals.html
https://developer.mozilla.org/ko/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL