WebGL - 점 그리기

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 WebGL의 세계로 흥미로운 여정을 떠납니다. 특히 점을 그리는 것에 집중할 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 모험을 단계별로 안내해 드리겠습니다. 걱정 마세요, 코드를 작성한 적이 없어도 괜찮습니다. 우리는 기본에서 시작해 점진적으로 올라갑니다. 그러면 가상의 연필을 손에 들고, 함께 뛰어들어 보겠습니다!

WebGL - Drawing Points

WebGL은 무엇인가요?

점을 그리기 전에, 먼저 WebGL이 무엇인지 이해해 보겠습니다. WebGL(Web Graphics Library)는 웹 브라우저에서 2D와 3D 그래픽을 만들 수 있게 해주는 강력한 JavaScript API입니다. 마치 웹 페이지에 직접 그릴 수 있는 마법의 그림笔 같은东西입니다!

필요한 단계

WebGL을 사용하여 점을 그리기 위해서는 일련의 단계를 따라야 합니다. 이를 디지털 아트를 만드는 레시피라고 생각해 보세요. 다음 표는 이 단계들을 요약한 것입니다:

단계 설명
1 캔버스 요소 가져오기
2 WebGL 렌더링 컨텍스트 가져오기
3 几何形状(顶点) 정의
4 顶点 셰이더 생성
5 프래그먼트 셰이더 생성
6 셰이더 프로그램 생성
7 데이터 GPU에 로드
8 뷰포트 설정
9 캔버스 지우기
10 점 그리기

이제 각 단계를 자세히 분석해 보고, 우리의 걸작을 만드는 데 어떻게 이들이 모이는지 확인해 보겠습니다!

예제 - WebGL을 사용하여 세 점 그리기

우리는 캔버스에 세 개의 컬러풀한 점을 그리는 예제를 따라갈 것입니다. 각 코드 부분을 자세히 설명하여, 정확히 무엇이 일어나고 있는지 이해하실 수 있도록 하겠습니다.

Step 1: HTML 설정

먼저, 캔버스 요소를 포함한 HTML 파일을 생성해야 합니다:

<!DOCTYPE html>
<html>
<head>
<title>내 첫 WebGL 점</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
Your browser does not support the canvas element.
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>

이렇게 하면 우리의 그림板이 되는 캔버스를 만듭니다. 다음 단계에서 만들 예정인 JavaScript 파일에서 모든 마법이 일어날 것입니다!

Step 2: JavaScript 파일 생성

이제 webgl-points.js 파일을 생성하고 WebGL 애플리케이션을 코드 작성해 보겠습니다:

// Step 1: 캔버스 요소 가져오기
const canvas = document.getElementById('myCanvas');

// Step 2: WebGL 렌더링 컨텍스트 가져오기
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL 지원되지 않음');
throw new Error('WebGL 지원되지 않음');
}

// Step 3:几何形状(顶点) 정의
const vertices = new Float32Array([
0.0, 0.5,    // Point 1
-0.5, -0.5,  // Point 2
0.5, -0.5    // Point 3
]);

// Step 4:顶点 셰이더 생성
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Step 5: 프래그먼트 셰이더 생성
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Step 6: 셰이더 프로그램 생성
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Step 7: 데이터 GPU에 로드
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Step 8: 뷰포트 설정
gl.viewport(0, 0, canvas.width, canvas.height);

// Step 9: 캔버스 지우기
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Step 10: 점 그리기
gl.drawArrays(gl.POINTS, 0, 3);

이제 이 코드를 분석하여 각 부분이 무엇을 하는지 이해해 보겠습니다:

코드 이해

Steps 1과 2: WebGL 설정

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

여기서 우리는 캔버스 요소를 가져오고 WebGL 렌더링 컨텍스트를 얻습니다. 마치 그림笔과 팔레트를 준비하는 것과 같습니다!

Step 3:几何形状(顶点) 정의

const vertices = new Float32Array([
0.0, 0.5,    // Point 1
-0.5, -0.5,  // Point 2
0.5, -0.5    // Point 3
]);

우리는 2D 공간에 세 개의 점을 정의합니다. 좌표는 x와 y 방향으로 -1에서 1 사이에 범위를 갖습니다. 캔버스를 네 개의 사분면으로 나누고 (0,0)이 중앙에 위치한다고 상상해 보세요.

Steps 4과 5: 셰이더 생성

셰이더는 GPU에서 실행되는 특별한 프로그램입니다. 두 가지 유형이 있습니다:

1.顶点 셰이더: 점의 위치를 결정합니다. 2. 프래그먼트 셰이더: 점의 색상을 결정합니다.

const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

顶点 셰이더는 점의 위치와 크기를 설정합니다. 프래그먼트 셰이더는 점의 색상을 빨간색으로 설정합니다 (RGB에서 1.0, 0.0, 0.0).

Steps 6과 7: 프로그램 생성 및 데이터 로드

이 단계에서 셰이더 프로그램을 생성하고 우리의顶点 데이터를 GPU 메모리에 로드합니다.

Steps 8과 9: 뷰포트 설정 및 캔버스 지우기

우리는 뷰포트를 캔버스 크기로 설정하고 캔버스를 검은색으로 지웁니다.

Step 10: 점 그리기

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

마지막으로, 우리는 세 개의 점을 그립니다!

결론

축하합니다! 여러분은 첫 WebGL 애플리케이션을 만들어 점을 그렸습니다. 이것은 컴퓨터 그래픽의 fascinatings한 세계로의 여정의 시작입니다. 계속 탐구하면서 더 복잡한 형태를 만들고, 애니메이션을 추가하고, 심지어 3D 그래픽으로 나아갈 수 있습니다.

记住, WebGL을 배우는 것은 그림을 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 첫 번째 시도에서 완벽하게 작동하지 않는다고 실망하지 마세요. 계속 실험하고, 곧 디지털 걸작을 만들 수 있을 것입니다!

다음 강의에서는 점에 다양한 색상을 추가하고 더 복잡한 형태를 만드는 방법을 탐구할 것입니다. 그동안, 즐겁게 코드 작성하세요!

Credits: Image by storyset