WebGL - 예제 애플리케이션: 초보자 가이드

안녕하세요, 미래의 WebGL 마법사 여러분! 이 흥미로운 여정에서 여러분의 안내자로서 기쁜 마음으로 인사드립니다. 컴퓨터 과학 교사로서 수년간의 경험을 가진 저는 수많은 학생들이 웹에서 첫 3D 그래픽을 만들었을 때 빛나는 모습을 보았습니다. 오늘, 저희는 그 같은 모험을 함께 시작해보겠습니다. 그러니 안전벨트를 고정하고, 함께 뛰어들어보겠습니다!

WebGL - Sample Application

WebGL은 무엇인가요?

코딩을 시작하기 전에, WebGL이 무엇인지 이해해보겠습니다. WebGL(Web Graphics Library)는 플러그인 없이 웹 브라우저에서 상호작용식 3D 및 2D 그래픽을 렌더링할 수 있게 해주는 JavaScript API입니다. 마치 웹 페이지에 놀라운 시각적 능력을 부여하는 것과 같습니다!

WebGL 애플리케이션의 구조

WebGL 애플리케이션은 일반적으로 여러 가지 주요 구성 요소로 구성됩니다. 이를 하나씩 나누어 설명해보겠습니다:

1. HTML 캔버스

캔버스는 우리의 그림판입니다. 모든 마법이 이곳에서 일어납니다!

<canvas id="myCanvas" width="640" height="480">
Your browser does not support the HTML5 canvas tag.
</canvas>

이렇게 하면 우리 웹 페이지에 640x480 픽셀의 캔버스를 만듭니다. 이를 마치 예술가의 그림막처럼 생각해보세요!

2. JavaScript 코드

여기서 우리는 WebGL 명령어를 작성합니다. 마치 우리의 가상 예술가에게 지시를 내리는 것과 같습니다.

3. 베릭스 셰이더 및 프래그먼트 셰이더

이들은 GPU에서 실행되는 특별한 프로그램입니다. 마치 우리의 3D 그래픽에 사용할 붓과 색상 팔레트입니다.

4. 버퍼

버퍼는 우리의 3D 오브젝트 데이터를 저장합니다. 마치 우리의 3D 조각에 사용할 원 liệu입니다.

이제 재료를 알고 있으므로, 맛있는 WebGL 애플리케이션을 만들어보겠습니다!

예제 애플리케이션

색다른 삼각형을 그리는 간단한 WebGL 애플리케이션을 만들어보겠습니다. 각 단계를 자세히 따라갈 테니까요.

단계 1: HTML 설정

먼저, 캔버스 요소를 포함한 HTML 파일을 만들어보겠습니다:

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

이렇게 하면 우리의 캔버스와 JavaScript 파일을 링크합니다.

단계 2: WebGL 초기화

이제 webgl-demo.js 파일을 만들고 WebGL을 설정해보겠습니다:

function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

if (!gl) {
alert("WebGL is not supported by your browser!");
return;
}

// WebGL is ready to use!
}

window.onload = main;

이 함수는 우리의 캔버스를 가져오고 WebGL을 초기화하며, 지원 여부를 확인합니다. 마치 그림을 그리기 전에 모든 예술 도구가 있는지 확인하는 것과 같습니다.

단계 3: 셰이더 생성

이제 베릭스 셰이더와 프래그먼트 셰이더를 만들어보겠습니다:

function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}

return shader;
}

const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

이 셰이더는 우리의 삼각형이 어디에 위치하고 어떤 색상으로 그려질지 정의합니다. 베릭스 셰이더는 삼각형의 위치를 설정하고, 프래그먼트 셰이더는 우리의 삼각형에 예쁜 분홍색을 입혀줍니다.

단계 4: 프로그램 생성

이제 셰이더를 프로그램에 링크해보겠습니다:

function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(program));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

이는 마치 우리의 예술 도구를 모아서 그림을 그리기 시작하려는 것과 같습니다.

단계 5: 버퍼 생성

이제 우리의 삼각형의顶점을 저장할 버퍼를 만들어보겠습니다:

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

이렇게 하면 우리의 삼각형의 형태를 정의합니다. 마치 그림을 그리기 전에 기본적인 형태를 스케치하는 것과 같습니다.

단계 6: 삼각형 렌더링

마지막으로, 우리의 삼각형을 그려보겠습니다:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
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);

gl.drawArrays(gl.TRIANGLES, 0, 3);

이제 마법이 일어납니다! 캔버스를 지우고, 프로그램과 버퍼를 설정한 후, 우리의 삼각형을 그립니다.

결론

축하합니다! 여러분은 첫 WebGL 애플리케이션을 만들었습니다. 여러분은 웹에서의 3D 그래픽의 더 넓은 세상으로 첫 걸음을 내디디셨습니다. 기억하세요, 예술 형태를 마스터하는 것은 연습과 인내가 필요합니다. 하지만 각 줄 코드마다, 여러분은 더욱 생동감 넘치고 상호작용식인 웹을 그려내고 있습니다. 계속 탐구하고, 계속 창조하며, 가장 중요한 것은 즐거워하십시오!

여기서 우리가 사용한 주요 메서드를 요약한 표를 제공합니다:

메서드	설명
`getContext("webgl")`	WebGL을 초기화합니다
`createShader()`	셰이더를 생성합니다
`shaderSource()`	셰이더 소스 코드를 정의합니다
`compileShader()`	셰이더를 컴파일합니다
`createProgram()`	프로그램을 생성합니다
`attachShader()`	셰이더를 프로그램에 연결합니다
`linkProgram()`	프로그램을 링크합니다
`createBuffer()`	버퍼를 생성합니다
`bindBuffer()`	버퍼를 바인딩합니다
`bufferData()`	버퍼에 데이터를 채웁니다
`viewport()`	시야각을 설정합니다
`clearColor()`	지우는 색상을 설정합니다
`clear()`	캔버스를 지웁니다
`useProgram()`	프로그램을 사용합니다
`getAttribLocation()`	속성 위치를 가져옵니다
`enableVertexAttribArray()`	顶点 속성 배열을 활성화합니다
`vertexAttribPointer()`	顶点 데이터 레이아웃을 지정합니다
`drawArrays()`	프림티브를 렌더링합니다

이 표를 손에 두고 WebGL 여정을 계속하세요. 즐거운 코딩을!

Credits: Image by storyset