WebGL - HTML5 Canvas 개요

안녕하세요, 미래의 웹 그래픽 마법사 여러분! 오늘 우리는 WebGL과 HTML5 Canvas의 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 모험을 안내해 드리는 것을 기쁘게 생각합니다. 프로그래밍에 처음이라도 걱정하지 마세요 - 우리는 기본기를부터 차근차근 공부하겠습니다. 그러면 가상의 그림笔을 손에 들고 시작해 보겠습니다!

WebGL - Html5 Canvas Overview

HTML5 Canvas

HTML5 Canvas는 무엇인가요?

마법적인 디지털 캔버스를 상상해 보세요. 그 위에 코드를 사용해 원하는 것을 그릴 수 있습니다. 바로 HTML5 Canvas가 그런 것입니다! HTML5에서 도입된 강력한 요소로, 우리는 브라우저 내에서 그래픽을 그리거나 애니메이션을 만들고, 심지어 게임을 개발할 수 있습니다.

첫 번째 캔버스 만들기

간단한 HTML5 Canvas를 만들어 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>내 첫 캔버스</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

이 예제에서 우리는 "myCanvas"라는 id를 가진 캔버스 요소를 만들었고, 너비는 400 픽셀, 높이는 200 픽셀입니다. 캔버스를 설치하고 공백 캔버스를 준비한 것과 같이, 이제 그림을 그릴 준비가 되었습니다!

캔버스에 그리기

이제 우리의 캔버스가 준비되었으니, 무언가를 그려 보겠습니다. 이를 위해 JavaScript를 사용하겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>캔버스에 그리기</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

이를 쪼개어 설명하겠습니다:

getElementById를 사용하여 캔버스 요소에 대한 참조를 가져옵니다.
getContext('2d')를 사용하여 캔버스의 2D 렌더링 컨텍스트를 얻습니다.
fillStyle을 사용하여 채우기 색상을 파랑색으로 설정합니다.
마지막으로, fillRect(x, y, width, height)를 사용하여 파랑색 사각형을 그립니다.

브라우저에서 이를 열면 캔버스에 파랑색 사각형이 나타납니다. 축하드립니다! 여러분은 첫 번째 디지털 그림을 만들었습니다!

렌더링 컨텍스트

렌더링 컨텍스트는 무엇인가요?

렌더링 컨텍스트는 여러분의 그림 도구 세트라고 생각해 보세요. 그것은 캔버스에 그리기 위해 제공되는 메서드와 속성을 제공합니다. 이전 예제에서 사용한 2D 렌더링 컨텍스트 외에도 다른 유형이 있습니다.

2D 렌더링 컨텍스트

2D 렌더링 컨텍스트는 가장 흔히 사용되며 다양한 2D 그리기 기능을 제공합니다. 다음은 몇 가지 유용한 2D 컨텍스트 메서드입니다:

메서드	설명
fillRect(x, y, width, height)	채워진 사각형을 그립니다
strokeRect(x, y, width, height)	사각형의 외곽선을 그립니다
fillText(text, x, y)	캔버스에 채워진 텍스트를 그립니다
strokeText(text, x, y)	텍스트의 외곽선을 그립니다
beginPath()	새로운 경로를 시작합니다
moveTo(x, y)	경로를 지정된 포인트로 이동합니다
lineTo(x, y)	지정된 포인트로 선을 그립니다
arc(x, y, radius, startAngle, endAngle)	원호 또는 원을 그립니다

이 메서드들을 사용하여 더 복잡한 그림을 만들어 보겠습니다:

<!DOCTYPE html>
<html>
<head>
<title>복잡한 그림</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 집을 그립니다
ctx.fillStyle = 'brown';
ctx.fillRect(100, 100, 150, 100);

// 지붕을 그립니다
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fill();

// 문을 그립니다
ctx.fillStyle = 'yellow';
ctx.fillRect(160, 150, 30, 50);

// 텍스트를 그립니다
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('내 집', 140, 190);
</script>
</body>
</html>

이 예제에서 우리는 다양한 2D 컨텍스트 메서드를 사용하여 간단한 집을 그렸습니다. 우리는 fillRect를 사용하여 집 몸체와 문을 그렸고, beginPath, moveTo, lineTo를 사용하여 지붕을 그렸고, fillText를 사용하여 텍스트를 추가했습니다. 좌표와 색상을 자유롭게 변경하여 여러분만의 독특한 집을 만들어 보세요!

WebGL 컨텍스트

WebGL 소개

이제 3D 그래픽의 흥미로운 세계로 발을 들여놓읍시다. WebGL(Web Graphics Library)는 플러그인 없이도 어떤 호환 가능한 웹 브라우저 내에서 상호작용식 3D 및 2D 그래픽을 렌더링할 수 있는 JavaScript API입니다.

WebGL 컨텍스트 얻기

WebGL을 사용하려면 WebGL 렌더링 컨텍스트를 얻어야 합니다. 다음은 그 방법입니다:

<!DOCTYPE html>
<html>
<head>
<title>WebGL 컨텍스트</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL가 지원되지 않습니다. experimental-webgl로 대체합니다');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('브라우저에서 WebGL을 지원하지 않습니다');
}
</script>
</body>
</html>

이 예제에서 우리는 WebGL 컨텍스트를 얻으려고 시도합니다. 지원되지 않으면 experimental-webgl 컨텍스트로 대체합니다. 그것도 지원되지 않으면 사용자에게 알립니다.

간단한 WebGL 예제

이제 간단한 WebGL 예제를 만들어 보겠습니다. 캔버스를 특정 색상으로 지우는 예제입니다:

<!DOCTYPE html>
<html>
<head>
<title>간단한 WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL가 지원되지 않습니다. experimental-webgl로 대체합니다');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('브라우저에서 WebGL을 지원하지 않습니다');
} else {
// 지우기 색상을 빨간색으로 설정합니다 (fully opaque)
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// 지우기 색상으로 컬러 버퍼를 지웁니다
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

이 예제에서 우리는 지우기 색상을 빨간색으로 설정하고, 컬러 버퍼를 이 색상으로 지웁니다. 이를 실행하면 빨간색 캔버스를 볼 수 있습니다.

WebGL은 2D 캔버스 렌더링보다 훨씬 복잡하며 셰이더, 버퍼, 행렬 등의 개념을 포함합니다. 하지만 걱정하지 마세요! 우리는 이러한 개념들을 앞으로의 수업에서 탐구하겠습니다.

결론

축하합니다! 여러분은 HTML5 Canvas와 WebGL의 세계로 첫 걸음을 내디디셨습니다. 우리는 캔버스를 만들고, 2D로 그리기, 그리고 WebGL로 3D 세계를 경험하는 기초를 다졌습니다.

기억해 두세요, 그래픽 프로그래밍을 배우는 것은 그림을 그리는 것과 같아서, 연습과 인내가 필요합니다. 코드 예제를 실험하고, 값을 변경하고, 어떤 일이 일어나는지 보세요. 더 많이 놀러 보면 모든 것이 어떻게 작동하는지 더 잘 이해할 수 있을 것입니다.

다음 수업에서 우리는 더 고급 2D 캔버스 기술을 더 깊이 탐구하고, WebGL 셰이더의 fascinat

Credits: Image by storyset