1. webgl 시작하기

WebGL은 OpenGL ES2.0기반 API를 이용하여 html로 2D 및 3D 렌더링을 수행합니다. WebGL 프로그램은 JS로 작성된 제어코드와 GPU에서 실행되는 셰이더 코드(GLSL)로 구성됩니다. WebGL 요소는 다른 html 요소와 혼합될 수 있고 다른 페이지의 부분이나 페이지 배경과 합성될 수 있습니다.

이 튜토리얼에서는 WebGL의 기본 사용법을 소개해드립니다. 3D그래픽과 관련된 수학을 이미 이해하고 있다고 가정하고 추가적으로 번역자가 기본적인 cs지식을 누락시키거나 오역, 의역이 있을 수 있습니다.

이 가이드의 코드 예제는 MDN webgl-exam github에서 볼 수 있습니다.

렌더링 준비

웹지엘의 코드는 캔버스에 그려집니다. 그러므로 캔버스를 html에 추가해줍니다.

<canvas id="glCanvas" width="640" height="480"></canvas>

WebGL 컨텍스트 준비

WebGL 컨텍스트를 설정하고 콘텐츠를 렌더링하기 위해 main()함수를 작성하여 스크립트가 로드될 때 실행시킵니다.

//
// start here
//
function main() {
  const canvas = document.querySelector("#glCanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (gl === null) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;

먼저 캔버스를 참조하여 변수 canvas에 할당합니다.

캔버스에 getContext("webgl") 명령으로 WebGLRenderingContext을 호출합니다. 만약 브라우저가 webgl을 지원하지 않는 경우, null이 반환되고 이를 확인해 오류메시지를 출력해야 합니다.

성공적으로 컨텍스트가 초기화되면 gl변수에 참조되어 명령어를 입력할 수 있습니다. 이 예제에서는 색 초기화시 적용될 색(clear color)을 검정색으로 바꾸고, COLOR_BUFFER_BIT를 초기화하여 설정한 검은색으로 변화 시킵니다.

여기까지가 WebGL을 성공적으로 초기화시키기 위한 필수 코드이며, 검은색의 빈 박스가 content를 받기위해 준비된 상태로 대기중입니다.

-
본 페이지는 웹지엘 튜토리얼 (by Mozilla Contributors is licensed under CC-BY-SA 2.5 )을 번역하는 프로젝트입니다.