WebGL - 회전: 그래픽을 생명으로 만들기
안녕하세요, WebGL 개발자 지망생 여러분! 오늘 우리는 컴퓨터 그래픽의 가장 흥미로운 부분 중 하나인 회전에 대해 깊이 다루어보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서, 저는 회전하는 삼각형과 돌아가는 형태의 마법의 세계를 안내해드리겠습니다. 그러니 상상 속 3D 안경을 쓰고, 시작해보겠습니다!
WebGL에서의 회전 이해
코드로 뛰어들기 전에, WebGL의 맥락에서 회전이 무엇을 의미하는지 잠시 이해해보겠습니다. 상상해보세요, 종이 비행기를 들고 있는 것. 그것을 돌리면, 그的东西의 공간 속에서 방향을 바꾸고 있습니다. WebGL에서는 같은 일을 수학적인 정확성으로 수행합니다!
WebGL에서의 회전은 중앙 축 주위로 꼭짓점(우리의 형태를 구성하는 점)의 위치를 바꾸는 것입니다. 이 축은 X, Y, Z축 중 하나이거나, 심지어 그들의 조합일 수 있습니다.
마트릭스의 마법
이제 여러분이 떠오르는 것은 무엇인가요? "마트릭스? '마トリックス' 영화에서 나온 것 아니야?" 그렇지는 않지만, 마트릭스는 정말 멋질 만큼 cool합니다! WebGL에서는 회전을 효율적으로 수행하기 위해 마트릭스를 사용합니다. 이게 복잡하게 들린다면 걱정 마세요 - 단계별로 설명해드리겠습니다.
예제 - 삼각형 회전
간단한 예제로 시작해보겠습니다: 삼각형을 회전시키는 것. 우리는 기본적인 삼각형을 만들고 그것을 춤추는 발레리나처럼 돌아가게 만들겠습니다!
단계 1: WebGL 환경 설정
먼저, 우리는 WebGL 컨텍스트를 설정해야 합니다. 다음은 기본적인 HTML 구조입니다:
<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
// 우리의 WebGL 코드가 여기 들어갑니다
</script>단계 2: WebGL 초기화
이제 WebGL을 초기화해보겠습니다:
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL가 지원되지 않습니다');
return;
}이 코드는 우리의 캔버스 요소를 가져오고 WebGL 컨텍스트를 얻으려고 시도합니다. WebGL이 지원되지 않으면, 우리는 오류 메시지를 볼 것입니다.
단계 3: 셰이더 생성
셰이더는 GPU에서 실행되는 특별한 프로그램입니다. 우리는 두 가지 유형의 셰이더가 필요합니다: 베릭스 셰이더와 프래그먼트 셰이더. 간단한 셰이더 세트를 보여드리겠습니다:
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
gl_Position = vec4((u_matrix * vec3(a_position, 1)).xy, 0, 1);
}
`;
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`;베릭스 셰이더는 우리의 회전 마트릭스를 적용하며, 프래그먼트 셰이더는 삼각형을 빨간색으로 칠합니다.
단계 4: 셰이더 컴파일 및 링크
이제 셰이더를 컴파일하고 링크해야 합니다:
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);이 코드는 우리의 셰이더 프로그램을 만들고, 삼각형을 렌더링하는 데 사용할 것입니다.
단계 5: 삼각형 생성
이제 우리는 삼각형을 정의해보겠습니다:
const positions = [
0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);이 코드는 기본적인 원점 중심의 삼각형을 만듭니다.
단계 6: 회전 마법
이제 진짜 마법이 시작됩니다. 우리는 회전 마트릭스를 생성하는 함수를 만들겠습니다:
function createRotationMatrix(angleInRadians) {
const c = Math.cos(angleInRadians);
const s = Math.sin(angleInRadians);
return [
c, -s, 0,
s, c, 0,
0, 0, 1
];
}이 함수는 라디안 단위의 각도를 입력받아 3x3 회전 마트릭스를 반환합니다.
단계 7: 회전하는 삼각형 렌더링
마지막으로, 우리는 모든 것을 모아서 삼각형을 돌게 만들겠습니다:
let angleInRadians = 0;
function render() {
angleInRadians += 0.01;
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
const matrixLocation = gl.getUniformLocation(program, "u_matrix");
const matrix = createRotationMatrix(angleInRadians);
gl.uniformMatrix3fv(matrixLocation, false, matrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
requestAnimationFrame(render);
}
render();이 함수는 다음과 같은 일을 합니다:
- 우리의 회전 각도를 증가시킵니다
- 캔버스를 지웁니다
- 셰이더 프로그램과 속성을 설정합니다
- 회전 마트릭스를 생성하고 적용합니다
- 삼각형을 렌더링합니다
- 다음 애니메이션 프레임을 요청합니다
그러면 다음과 같이 돌아가는 삼각형이 보입니다!
결론
축하합니다! 여러분은 첫 번째 회전하는 형태를 WebGL에서 만들었습니다. 기억하시라, 이것이 시작에 불과합니다. 이 기본 원리를 바탕으로, 여러 개의 회전하는 객체를 포함한 복잡한 3D 시나리오를 만들 수 있습니다.
마무리하면서, 학생 한 명이 말한 것을 떠올립니다. "컴퓨터 그래픽은 멋진 소프트웨어에 관한 것이라고 생각했지만, 이제는 디지털 인형쇼의 인형쇼이자라는 것을 알게 되었습니다!" 그녀는 정말로 옳았습니다 - WebGL로는 여러분의 디지털 인형쇼를 조종할 수 있습니다.
계속 연습하고, 실험하고, WebGL을 즐기세요. 언제쯤 되면, 여러분은 경험 많은 개발자들도 감탄할 만한 훌륭한 3D 시각화를 만들어낼 것입니다.
행복하게 코딩하세요, 여러분의 삼각형이 항상 올바른 방향으로 돌기를 바랍니다!
Credits: Image by storyset