WebGL - 평면에서 객체 이동: 번역

안녕하세요, WebGL 개발자 지망생 여러분! 오늘 우리는 3차원 그래픽의 세상으로 흥미로운 여정을 떠납니다. WebGL에서 번역 개념을 탐구할 것입니다. 번역은 사실상 "물건을 이리저리 움직이는"이라는 멋진 방법을 의미합니다. 이 튜토리얼의 끝까지 따라오면, 여러분은 화면에 있는 객체를 디지털 발레처럼 춤추게 만들 수 있을 것입니다. 그럼 시작해 보겠습니다!

WebGL에서 번역이란?

이제 삼각형을 체스 말처럼 움직이기 전에, 컴퓨터 그래픽의 맥락에서 번역이 무엇을 의미하는지 이해해 보겠습니다.

번역의 기본 개념

번역은 2차원 또는 3차원 공간에서 객체를 하나의 위치에서 다른 위치로 이동시키는 과정입니다. 이는 마치 데스크 위에 있는 컵을 집어서 책장에 두는 것과 같습니다. 컵(우리의 객체)은 원래 위치에서 새로운 위치로 이동합니다.

WebGL에서는 수학을 사용하여 이러한 이동을 달성합니다. 수학에 능숙하지 않아도 걱정하지 마세요 – WebGL이 대부분의 무거운 작업을 대신 해줍니다!

번역의 중요성

자연스럽게 움직일 수 없는 캐릭터가 있는 비디오 게임이나, 객체가 고정된 상태로 남아 있는 3D 모델링 소프트웨어를 상상해 보세요. 꽝한 것 같죠? 번역은 사용자 입력에 반응하거나 사전 정의된 애니메이션을 따라 움직이는 동적이고 상호작용적인 그래픽을 만들 수 있게 해줍니다.

삼각형을 번역하는 단계

이제 번역이 무엇인지 이해했으므로, WebGL에서 간단한 삼각형을 움직이는 과정을 단계별로 설명하겠습니다. 단계별로 따라오면 쉽게 따라할 수 있습니다.

단계 1: 삼각형 정의

먼저 우리의 삼각형을 만들어야 합니다. WebGL에서는顶点(모서리 점)을 사용하여 도형을 정의합니다. 다음과 같이 간단한 삼각형을 정의할 수 있습니다:

const vertices = [
0.0, 0.5,   // 상단顶点
-0.5, -0.5,  // 하단 왼쪽顶点
0.5, -0.5   // 하단 오른쪽顶点
];

이렇게 하면 상단 점이 (0, 0.5)에 있고, 기저 변의 꼭짓점이 (-0.5, -0.5)와 (0.5, -0.5)에 있는 삼각형이 만들어집니다.

단계 2: 이동 행렬 생성

우리의 삼각형을 움직이기 위해 이동 행렬을 생성해야 합니다. 이 행렬은 WebGL에게 객체를 각 축 방향으로 얼마나 이동할지 알려줍니다. 다음과 같이 이동 행렬을 생성할 수 있습니다:

const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

여기서 tx와 ty는 x와 y축 방향으로 이동할 양입니다.

단계 3: Vertex Shader에서 번역 적용

이제 vertex shader를 수정하여 번역을 적용하겠습니다. 다음은 번역을 포함한 간단한 vertex shader입니다:

attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}

이 shader는 각顶点 위치를 가져와 4차원 벡터로 변환한 후, 이동 행렬과 곱합니다.

단계 4: 이동 값 업데이트

우리의 삼각형을 움직이기 위해 이동 값을 시간에 따라 업데이트해야 합니다. 이를 JavaScript 코드에서 다음과 같이 할 수 있습니다:

function updateAndDraw() {
tx += 0.01;  // 오른쪽으로 이동
ty += 0.005; // 위로 이동

// 이동 행렬 업데이트
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

// 삼각형 그리기
gl.drawArrays(gl.TRIANGLES, 0, 3);

requestAnimationFrame(updateAndDraw);
}

이 함수는 이동 값을 업데이트하고, 새로운 행렬을 GPU에 전달하고, 삼각형을 다시 그립니다. requestAnimationFrame 호출은 이 과정이 부드럽게 frame by frame으로 일어나도록 합니다.

삼각형을 번역하는 예제

이제 모든 것을 합쳐서 삼각형이 화면을 가로지르게 움직이는 완전한 예제를 보겠습니다:

// Vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat4 u_translation;

void main() {
gl_Position = u_translation * vec4(a_position, 0, 1);
}
`;

// Fragment shader
const fragmentShaderSource = `
precision mediump float;

void main() {
gl_FragColor = vec4(1, 0, 0, 1);  // 빨간색
}
`;

// WebGL 초기화
const canvas = document.getElementById('glcanvas');
const gl = canvas.getContext('webgl');

// 셰이더 생성 및 컴파일
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 program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 버퍼 생성 및顶点 데이터 로드
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
0.0, 0.5,
-0.5, -0.5,
0.5, -0.5
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 속성 설정
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 유니폼 설정
const translationLocation = gl.getUniformLocation(program, "u_translation");

// 이동 변수
let tx = 0;
let ty = 0;

function updateAndDraw() {
// 캔버스 지우기
gl.clear(gl.COLOR_BUFFER_BIT);

// 이동 업데이트
tx += 0.01;
ty += 0.005;

// 이동 행렬 생성
const translationMatrix = [
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
tx, ty, 0, 1
];

// 행렬 셰이더에 전달
gl.uniformMatrix4fv(translationLocation, false, translationMatrix);

// 삼각형 그리기
gl.drawArrays(gl.TRIANGLES, 0, 3);

// 다음 프레임 요청
requestAnimationFrame(updateAndDraw);
}

// 애니메이션 시작
updateAndDraw();

이 코드는 빨간색 삼각형이 화면을 대각선으로 가로지르게 움직입니다. 이를 통해 다음과 같은 일이 일어납니다:

1. 셰이더 정의
2. WebGL 초기화
3. 셰이더 생성 및 컴파일
4. 프로그램 생성 및 사용
5. 버퍼 생성 및顶点 데이터 로드
6. 속성 및 유니폼 설정
7. 이동 행렬 생성 및 업데이트
8. 삼각형 그리기 및 애니메이션 시작

이렇게 하면 우리의 삼각형이 화면을 가로지르며 움직입니다. 축하합니다! 여러분은 WebGL에서 움직이는 삼각형을 만들었습니다.

결론

WebGL에서의 번역은처음에는 복잡해 보일 수 있지만, 사실은 객체를 지능적으로 움직이는 것입니다. 여기서 기본적인 내용을 다루었지만, 번역을 회전과 확대와 결합하여 복잡한 애니메이션을 만들거나, 상호작용적인 3D 환경을 구축할 수 있습니다.

기억하시길, 모든 여정은 단 한 걸음에서 시작됩니다 – 우리의 경우, 단일 삼각형의 움직임입니다. 계속 연습하고 실험하면, 여러분은 상상도 못한 방법으로 움직이고 상호작용하는 놀라운 3D 그래픽을 만들 수 있을 것입니다.

행복한 코딩을 기원하며, 여러분의 삼각형이 항상 집으로 돌아갈 수 있기를 바랍니다!

메서드	설명
gl.createShader()	셰이더 객체 생성
gl.shaderSource()	셰이더의 소스 코드 설정
gl.compileShader()	셰이더 컴파일
gl.createProgram()	프로그램 객체 생성
gl.attachShader()	셰이더 프로그램에 첨부
gl.linkProgram()	프로그램 링크
gl.useProgram()	현재 렌더링 상태에 프로그램 설정
gl.createBuffer()	버퍼 객체 생성
gl.bindBuffer()	버퍼 객체 바인드
gl.bufferData()	버퍼 객체 데이터 초기화 및 생성
gl.getAttribLocation()	속성 변수 위치 반환
gl.enableVertexAttribArray()	顶点 속성 배열 활성화
gl.vertexAttribPointer()	顶点 속성 데이터 설정
gl.getUniformLocation()	유니폼 변수 위치 반환
gl.clear()	버퍼 지우기
gl.uniformMatrix4fv()	유니폼 변수 값 설정
gl.drawArrays()	배열 데이터로 프림итив 그리기

Credits: Image by storyset