WebGL - 드로잉 모드

안녕하세요, 미래의 WebGL 마법사 여러분! ? 오늘 우리는 WebGL의 흥미로운 드로잉 모드 세계로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드릴게요, 코드를 한 줄도 적어보지 않은 사람들도 괜찮아요. 그러니 가상의 그림笔을 손에 들고, 디지털 masterpieces를 만들어 보세요!

모드 파라미터

드로잉을 시작하기 전에, 우리의 별이 되는 mode 파라미터에 대해 이야기해 보겠습니다. 이를 마법仗으로 생각해 보세요. WebGL이 어떻게 점(또는 우리의 경우,顶点)을 연결하여 다양한 형태와 패턴을 만들어야 하는지 알려줍니다.

WebGL에서 gl.drawArrays()나 gl.drawElements() 함수를 호출할 때, mode 파라미터를 지정해야 합니다. 이 파라미터는 연결된 점 퍼즐에 대한 지시와 같아서, WebGL이 정의한 점을 어떻게 연결할지 알려줍니다.

WebGL에서 사용할 수 있는 다양한 드로잉 모드를 아래 표에 나열했습니다:

모드	설명
gl.POINTS	각顶点에 대해 단일 점을 그립니다
gl.LINES	각 쌍의顶点 사이에 선을 그립니다
gl.LINE_STRIP	顶点를 연결하는 지속적인 선을 그립니다
gl.LINE_LOOP	LINE_STRIP과 유사하지만 형태를 닫습니다
gl.TRIANGLES	각 세 개의顶点에 대해 삼각형을 그립니다
gl.TRIANGLE_STRIP	연결된 삼각형 그룹을 그립니다
gl.TRIANGLE_FAN	첫 번째顶点을 공통 점으로 하는 팬 모양의 연결된 삼각형을 그립니다

이제 이 것들이 혼란스러울 수 있지만, 우리는 예제와 함께 하나씩 탐구해 나갈 거예요!

예제 - 세 개의 평행 선 그리기

간단한 예제로 시작해 보겠습니다: 세 개의 평행 선을 그리는 것입니다. 이 예제를 통해 mode 파라미터가 어떻게 작동하는지 이해할 수 있을 것입니다.

// First, let's set up our WebGL context
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// Now, let's define our vertex shader
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

// And our fragment shader
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Red color
}
`;

// Create and compile the shaders (don't worry, we'll explain this in detail in future lessons)
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

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

// Create a program and link the shaders
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Define the positions of our lines
const positions = new Float32Array([
-0.8, -0.8,  // Line 1 start
-0.8,  0.8,  // Line 1 end
-0.3, -0.8,  // Line 2 start
-0.3,  0.8,  // Line 2 end
0.2, -0.8,  // Line 3 start
0.2,  0.8   // Line 3 end
]);

// Create a buffer and put the positions in it
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// Tell WebGL how to read the buffer and attribute it to a_position
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// Clear the canvas
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// Draw the lines
gl.drawArrays(gl.LINES, 0, 6);

이제 이를 단계별로 설명해 보겠습니다:

1. 우리는 WebGL 컨텍스트를 설정하고 샤이더를 정의합니다. 이 부분은 지금은太多한 설명이 필요 없습니다; 미래의 수업에서 자세히 다룰 거예요.

2. 프로그램을 만들고 샤이더를 링크합니다. 이는 우리의 디지털 그림笔을 준비하는 것과 같습니다.

3. 우리는 선의 위치를 정의합니다. 각 선은 두 점(시작과 끝)으로 정의되며, 각 점은 두 좌표(x와 y)로 정의됩니다. 따라서 우리의 세 개의 선에 대해 6개의 점이 있습니다.

4. 버퍼를 만들고 위치를 넣습니다. 이는 우리의 페인트를 브러시에 올리는 것과 같습니다.

5. WebGL이 이 버퍼를 어떻게 읽고 a_position 속성에 연결할지 알려줍니다.

6. 마지막으로 gl.drawArrays(gl.LINES, 0, 6)를 호출합니다. 이제 마법이 일어납니다!

• gl.LINES는 우리의 모드입니다. 이는 WebGL이 각 쌍의顶点 사이에 선을 그리도록 지시합니다.
• 0은 우리의 위치 배열에서 시작 인덱스입니다.
• 6은 고려할顶点의 수입니다 (우리의 3개의 선에 대해 6개의 점을 기억하세요).

이 코드를 실행하면, 검은 배경에 빨간색 평행 선 세 개가 보일 것입니다. 축하합니다! 여러분은 첫 번째 WebGL 드로잉을 만들었습니다! ?

드로잉 모드

이제 gl.LINES를 사용해 보았으니, 다른 드로잉 모드를 탐구해 보겠습니다. 우리는 같은 설정을 사용하지만, 위치와 드로잉 모드를 변경할 것입니다.

gl.POINTS

가장 간단한 모드로 시작해 보겠습니다: gl.POINTS. 이 모드는 각顶点에 대해 단일 점을 그립니다.

// ... (previous setup code)

const positions = new Float32Array([
-0.5, 0.5,
0.0, 0.0,
0.5, -0.5
]);

// ... (buffer setup code)

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

이는 캔버스에 세 개의 빨간색 점을 그립니다. 간단하지 않나요?

gl.LINE_STRIP

이제 gl.LINE_STRIP를 시도해 보겠습니다. 이 모드는 각顶点을 연결하는 지속적인 선을 그립니다.

// ... (previous setup code)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (buffer setup code)

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

이를 통해 V자 형태의 선이 그려질 것입니다.

gl.LINE_LOOP

gl.LINE_LOOP는 LINE_STRIP와 유사하지만, 마지막顶点을 첫 번째顶점으로 연결하여 형태를 닫습니다.

// ... (previous setup code)

const positions = new Float32Array([
-0.5, 0.5,
0.0, -0.5,
0.5, 0.5
]);

// ... (buffer setup code)

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

이는 삼각형 외곽선을 그립니다.

gl.TRIANGLES

이제 gl.TRIANGLES로 이동해 보겠습니다. 이 모드는 각 세 개의顶点에 대해 별도의 삼각형을 그립니다.

// ... (previous setup code)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
]);

// ... (buffer setup code)

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

이를 통해 단색의 빨간색 삼각형이 그려질 것입니다.

gl.TRIANGLE_STRIP

gl.TRIANGLE_STRIP는 연결된 삼각형 그룹을 그립니다. 각 삼각형은 전체의 두顶点을 공유합니다.

// ... (previous setup code)

const positions = new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5
]);

// ... (buffer setup code)

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

이는 사각형을 형성하는 두 개의 연결된 삼각형을 그립니다.

gl.TRIANGLE_FAN

마지막으로 gl.TRIANGLE_FAN을 탐구해 보겠습니다. 이 모드는 첫 번째顶点을 공통 점으로 하는 팬 모양의 연결된 삼각형을 그립니다.

// ... (previous setup code)

const positions = new Float32Array([
0.0, 0.0,    // Center point
0.5, 0.0,    // Point 1
0.35, 0.35,  // Point 2
0.0, 0.5,    // Point 3
-0.35, 0.35  // Point 4
]);

// ... (buffer setup code)

gl.drawArrays(gl.TRIANGLE_FAN, 0, 5);

이는 반원 모양의 팬을 그립니다.

이제 우리는 WebGL의 모든 드로잉 모드를 탐구했습니다. 이 것들을 마스터하는 열쇠는 연습입니다. 다양한 모드를 결합하고, 색상을 변경하고,顶点 위치를 조정해 보세요. 얼마 지나지 않아 복잡한 WebGL 장면을 쉽게 만들 수 있을 것입니다!

다음 수업에서는 샤이더에 대해 더 깊이 탐구하고 색상과 텍스처를 추가하여 그림에 더 많은 매력을 더해 보겠습니다. 그때까지, 미래의 WebGL 예술가 여러분, 행복하게 코딩하세요! ??‍??‍?

Credits: Image by storyset