[html] WebGL 기초
웹 개발자들에게 WebGL는 실시간 3D 그래픽을 렌더링하기 위한 강력한 도구입니다. 이 기술은 웹 브라우저에서 하드웨어 가속 3D 그래픽을 활용하여 뛰어난 시각적 효과를 제공합니다.
WebGL이란 무엇인가?
WebGL은 Web Graphics Library의 약자로, 웹 페이지에서 3D 및 2D 그래픽을 렌더링하기 위한 JavaScript API입니다. WebGL은 OpenGL ES 2.0을 기반으로 하며, 모든 최신 웹 브라우저에서 직접 실행될 수 있습니다.
기본적인 WebGL 삼각형 그리기
WebGL에서 가장 기초적인 그리기 예제는 삼각형을 그리는 것입니다. 아래는 삼각형을 그리기 위한 기본적인 WebGL 코드의 예제입니다.
// 버텍스 쉐이더 코드
const vertexShaderSource = `
attribute vec4 position;
void main() {
gl_Position = position;
}`;
// 프래그먼트 쉐이더 코드
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;
// WebGL 캔버스 가져오기
const canvas = document.querySelector('canvas');
// WebGL 컨텍스트 가져오기
const gl = canvas.getContext('webgl');
// 삼각형을 그리기 위한 버텍스 데이터
const vertices = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
// WebGL 버텍스 버퍼 생성
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 버텍스 쉐이더 컴파일 및 연결
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);
// WebGL 프로그램 생성 및 연결
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// WebGL attribute 및 uniform 설정
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// 삼각형 그리기
gl.drawArrays(gl.TRIANGLES, 0, 3);
결론
이제 웹 개발자들은 WebGL을 활용하여 웹 페이지에서 놀라운 3D 그래픽을 생성할 수 있습니다. 이 기술은 브라우저에서 실시간으로 3D 그래픽을 렌더링하기 위한 강력한 옵션을 제공합니다.