WebGL - 스케일링: 초보자 가이드
안녕하세요, WebGL 개발자 지망생 여러분! 오늘 우리는 WebGL의 매력적인 스케일링 세계로 뛰어들어 볼 거예요. 프로그래밍에 새로운 사람이라면 걱정 마세요 - 저는 여러분을 단계별로 안내하며, 수업에서 사용해온 같은 신경 쓰고 인내심을 가지고 안내할 거예요. 이 흥미로운 여정을 함께 시작해봅시다!
WebGL에서 스케일링이란?
코드로 뛰어들기 전에, 컴퓨터 그래픽의 맥락에서 스케일링이 무엇을 의미하는지 이해해봅시다. 당신의 좋아하는 인형을 생각해보세요. 스케일링은 이 인형을 더 크거나 작게 만들 수 있는 마법의 지팡이처럼, 그 모양을 그대로 유지하면서 행동하는 것입니다. WebGL에서는 우리의 3D 오브젝트에 이 마법을 할 수 있습니다!
스케일링의 중요성
스케일링은 현실적이고 동적인 3D 시ーン을 만드는 데 필수적입니다. 그것으로 우리는 다음과 같은 작업을 수행할 수 있습니다:
- 오브젝트 크기를 시ーン에 맞게 조정할 수 있습니다.
- 오브젝트가 커지거나 줄어드는 애니메이션을 만들 수 있습니다.
- 복잡한 모델에서 적절한 비례를 유지할 수 있습니다.
WebGL에서 스케일링을 위한 필요한 단계
WebGL에서 오브젝트를 스케일링하려면 일련의 단계를 따라야 합니다. 이를 간단히 설명해보겠습니다:
| 단계 | 설명 |
|---|---|
| 1. 스케일 매트릭스 생성 | 우리의 오브젝트를 어떻게 스케일링할지 WebGL에 알리는 특별한 매트릭스를 생성합니다 |
| 2. 모델 매트릭스와 곱하기 | 우리의 스케일 매트릭스를 오브젝트의 기존 모델 매트릭스와 결합합니다 |
| 3. 셰이더에 전달 | 이 새로운 매트릭스를 우리의 셰이더 프로그램으로 보냅니다 |
| 4. 베릭스 셰이더에서 적용 | 셰이더는 이 매트릭스를 사용하여 각顶点的 위치를 조정합니다 |
이 단계들이 복잡하게听起来도, 우리는 예제를 통해 하나씩 자세히 탐구할 거예요!
예제 - 삼각형 스케일링
이제 우리의 학습을 실천으로 옮겨보겠습니다. 간단한 삼각형을 스케일링해보겠습니다. 기본 WebGL 설정을 시작하고 스케일링 기능을 추가해보겠습니다.
단계 1: WebGL 컨텍스트 설정
먼저, 우리의 WebGL 컨텍스트를 설정해야 합니다. 다음과 같이 합니다:
const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL가 지원되지 않습니다');
return;
}이 코드는 우리의 캔버스 엘리먼트를 찾고 WebGL 컨텍스트를 생성합니다. 그림을 그리기 전에 캔버스와 붓을 준비하는 것과 같습니다!
단계 2: 베릭스 셰이더 정의
이제 우리의 베릭스 셰이더를 생성해보겠습니다. 스케일링 마법이 이루어지는 곳입니다:
const vertexShaderSource = `
attribute vec2 a_position;
uniform mat3 u_matrix;
void main() {
vec3 position = u_matrix * vec3(a_position, 1);
gl_Position = vec4(position.xy, 0, 1);
}
`;이 셰이더는 각顶点的 위치를 우리의 매트릭스와 곱하여 조정합니다. 각 삼각형의 점에 어떻게 이동할지 지시하는 것과 같습니다.
단계 3: 프래그먼트 셰이더 정의
프래그먼트 셰이더는 우리의 삼각형의 색상을 결정합니다:
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 = new Float32Array([
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, positions, gl.STATIC_DRAW);이 좌표는 간단한 삼각형을 정의합니다. 그래프에 점을 표시하여 우리의 형태를 그리는 것과 같습니다.
단계 6: 스케일링 구현
이제 흥미로운 부분입니다 - 우리의 삼각형을 스케일링합니다! 우리는 스케일링 매트릭스를 생성하는 함수를 사용할 것입니다:
function createScaleMatrix(scaleX, scaleY) {
return new Float32Array([
scaleX, 0, 0,
0, scaleY, 0,
0, 0, 1
]);
}
// 예제: 삼각형을 두 배 크기로 스케일링
const scaleMatrix = createScaleMatrix(2, 2);이 매트릭스는 WebGL에 우리의 삼각형을 얼마나 확장하거나 축소할지 지시하는 지침과 같습니다.
단계 7: 스케일링된 삼각형 렌더링
마지막으로, 우리는 모든 것을 모아서 스케일링된 삼각형을 렌더링해보겠습니다:
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 matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);이 코드는 우리의 스케일링 매트릭스를 적용하고 삼각형을 그립니다. 그림을 그린 후에 우리의 작품을 공개하는 것과 같습니다!
결론
축하합니다! 여러분은 첫 번째 WebGL 삼각형을 스케일링했습니다. 스케일링은 WebGL에서 적용할 수 있는 많은 변환 중 하나입니다. 여러분의 여정을 계속하면서, 스케일링을 회전, 이동 등 다른 변환과 결합하여 복잡하고 동적인 3D 시ーン을 만드는 방법을 배울 것입니다.
연습이 완벽을 이루는 열쇠이니, 다양한 스케일링 값을 실험하고 다른 형태를 시도해보세요. 누가 알랄까요? 다음 큰 비디오 게임이나 3D 웹 애플리케이션이 여러분의 스케일링된 삼각형에서 시작될 수도 있습니다!
행복하게 코딩하세요, 여러분의 WebGL 오브젝트가 항상 새로운 높이로 스케일링되길 바랍니다!
Credits: Image by storyset