2023. 10. 10. 18:16ㆍRun/Computer Graphics
WebGL에서 다각형(사각형, 오각형, ...)은 여러 삼각형들이 합쳐진 형태로 그려낼 수 있다.
삼각형을 붙이는 방법에는 LINE_STRIP, LINE_LOOP, TRIANGLE_FAN, TRIANGLE_STRIP이 있다.
차례대로 사용해보며 각각이 어떻게 동작하는지 알아보고자 한다. 먼저 html 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title>Drawing Polygon</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 squarePosition;
void main() {
gl_PointSize = 1.0;
gl_Position = squarePosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0.5, 0.6, 0.4, 1.0);
}
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="practice.js"></script>
</head>
<body onload="init()">
<canvas id="gl-canvas" width="768" height="768">
</canvas>
</body>
</html>이전 글에선 drawTriangle() 함수를 실행시키도록 하고 해당 함수 내에서 모든 작업을 진행했으나,
하나의 캔버스에 여러 도형을 그리는 경우 각각의 도형을 그리는 함수를 따로 두어 코드를 간결하게 만들었다.
JS 코드는 아래와 같다. 먼저 LINE_STRIP을 사용해보았다.
var canvas;
var gl;
var squareProgram
function init() {
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL is not available") };
gl.viewport(0, 0, 768, 768);
gl.clearColor(0.9, 0.9, 0.9, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
squareProgram = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(squareProgram);
drawSquare();
}
function drawSquare() {
var squareVertices = [
-0.9, -0.9,
-0.9, 0.9,
0.9, 0.9,
0.9, -0.9
];
var squareBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(squareVertices), gl.STATIC_DRAW);
var squarePosition = gl.getAttribLocation(squareProgram, "squarePosition");
gl.vertexAttribPointer(squarePosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(squarePosition);
gl.drawArrays(gl.LINE_LOOP, 0, 4);
}init() 함수 내에선 viewport를 생성하고, html 코드에서 작성한 vertex-shader와 fragment-shader을 가져와
program으로 저장하고 실행한다. 그리고 사각형을 그리는 drawSquare() 함수를 실행한다.
squareVertices에 저장한 좌표의 순서는 도형을 그릴 때 중요하게 작용한다.
1. LINE_LOOP
실행하면 이런 도형이 그려진다.
LINE_LOOP는 첫 번째 좌표와 두 번째 좌표를 잇고, 두 번째 좌표와 세 번째 좌표를 잇고,
... n-1번째 좌표와 n번째 좌표를 잇고, 끝으로 n번째 좌표와 첫 번째 좌표를 잇는다.
그렇기 때문에 위와 같은 사각형이 그려진다.
2. LINE_STRIP
LINE_STRIP을 이용하면 이런 도형이 그려진다. LINE_LOOP과 달리 마지막 좌표와 첫 번째 좌표를 잇지 않기 때문이다.
따라서 사각형을 완성시키려면 (-0.9, -0.9) 좌표를 마지막에 추가해주어야 한다.
3. TRIANGLE_FAN
TRIANGLE_FAN을 이용하면 이런 도형이 그려진다.
TRIANGLE_FAN은 첫 번째 좌표를 기준으로 도형을 그린다.
위 그림에서 TRIANGLE_FAN은 1, 2, 3번 좌표를 잇고, 1, 3, 4번 좌표를 잇는다. 삼각형 두 개가 합쳐진 셈이다.
4. TRIANGLE_STRIP
TRIANGLE_STRIP을 이용하면 이런 도형이 그려진다.
위 그림에서 TRIANGLE_STRIP은 1, 2, 3번 좌표를 잇고, 2, 3, 4번 좌표를 잇는다. 삼각형 세 개가 합쳐진 셈이다.
따라서 사각형을 완성시키려면 (-0.9, -0.9) 좌표를 마지막에 추가해주어야 한다.
LINE_STRIP, LINE_LOOP, TRIANGLE_STRIP, TRIANGLE_FAN을 잘 설명한 그림이 있어서 가져왔다.
이 글에서는 얘기하지 않은 LINES와 TRIANGLES도 설명이 되어 있다.
'Run > Computer Graphics' 카테고리의 다른 글
| [Computer Graphics] Texture Mapping (0) | 2023.10.10 |
|---|---|
| [Computer Graphics] Lighting (1) | 2023.10.10 |
| [Computer Graphics] Viewing (1) | 2023.10.10 |
| [Computer Grpahics] WebGL Variables (0) | 2023.10.10 |
| [Computer Graphics] WebGL 삼각형 그리기 (1) | 2023.10.10 |