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