|
| 1 | +Title: WebGL 점, 선, 그리고 삼각형 |
| 2 | +Description: Details on drawing Points, Lines, and Triangles |
| 3 | +TOC: 점, 선, 그리고 삼각형 |
| 4 | + |
| 5 | + |
| 6 | +이 사이트의 대부분은 삼각형으로 모든 걸 그리는데요. |
| 7 | +이건 WebGL 프로그램의 99%가 하는 일반적인 일입니다. |
| 8 | +하지만, 완벽을 기하기 위해 몇 가지 다른 경우를 살펴 봅시다. |
| 9 | + |
| 10 | +[첫 번째 글](webgl-fundamentals.html)에서 언급했듯이 WebGL은 점, 선, 그리고 삼각형을 그립니다. |
| 11 | +`gl.drawArrays`나 `gl.drawElements`를 호출할 때 이를 수행하는데요. |
| 12 | +clip space 좌표를 출력하는 vertex shader를 제공한 다음, `gl.drawArrays`나 `gl.drawElements`의 첫 번째 전달인자를 기반으로 WebGL은 점, 선, 또는 삼각형을 그립니다. |
| 13 | + |
| 14 | +`gl.drawArrays`와 `gl.drawElements`의 첫 번째 전달인자로 유효한 값들은 |
| 15 | + |
| 16 | +* `POINTS` |
| 17 | + |
| 18 | + vertex shader가 출력하는 각 clip space vertex에 대해 해당 점의 중앙에 정사각형을 그립니다. |
| 19 | + 정사각형의 크기는 vertex shader 내부의 특별 변수 `gl_PointSize`에 픽셀 단위로 원하는 크기를 설정하여 지정합니다. |
| 20 | + |
| 21 | + 참고: 정사각형이 될 수 있는 최대(그리고 최소) 크기는 쿼리할 수 있는 구현에 따라 다른데 |
| 22 | + |
| 23 | + const [minSize, maxSize] = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); |
| 24 | + |
| 25 | + [여기](webgl-drawing-without-data.html#pointsissues)에서 다른 이슈도 확인하세요. |
| 26 | + |
| 27 | +* `LINES` |
| 28 | + |
| 29 | + vertex shader가 출력하는 각 2개의 clip space vertex에 대해 두 점을 연결하는 선을 그립니다. |
| 30 | + 점 A,B,C,D,E,F가 있다면 3개의 선이 표시됩니다. |
| 31 | + |
| 32 | + <div class="webgl_center"><img src="resources/gl-lines.svg" style="width: 400px;"></div> |
| 33 | + |
| 34 | + 스펙에 따르면 `gl.lineWidth`를 호출하고 픽셀 단위로 너비를 지정하여 선의 두께를 설정할 수 있습니다. |
| 35 | + 실제로 최대 너비는 구현에 따라 다르지만 대부분의 구현에서 최대 너비는 1입니다. |
| 36 | + |
| 37 | + const [minSize, maxSize] = gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE); |
| 38 | + |
| 39 | + 이는 주로 핵심 데스크탑 OpenGL에서 1보다 큰 값이 더 이상 사용되지 않기 때문입니다. |
| 40 | + |
| 41 | +* `LINE_STRIP` |
| 42 | + |
| 43 | + vertex shader가 출력하는 각 clip space vertex에 대해 vertex shader가 출력한 이전 포인트에서 선을 그립니다. |
| 44 | + |
| 45 | + 따라서, clip space vertex A,B,C,D,E,F를 출력하면 5개의 선이 표시됩니다. |
| 46 | + |
| 47 | + <div class="webgl_center"><img src="resources/gl-line-strip.svg" style="width: 400px;"></div> |
| 48 | + |
| 49 | +* `LINE_LOOP` |
| 50 | + |
| 51 | + 이건 `LINE_STRIP` 예제와 같지만 마지막 점에서 첫 번째 점으로 한 줄 더 그려집니다. |
| 52 | + |
| 53 | + <div class="webgl_center"><img src="resources/gl-line-loop.svg" style="width: 400px;"></div> |
| 54 | + |
| 55 | +* `TRIANGLES` |
| 56 | + |
| 57 | + vertex shader가 출력하는 3개의 clip space vertex마다 점 3개로 삼각형을 그립니다. |
| 58 | + 이게 가장 많이 사용되는 모드입니다. |
| 59 | + |
| 60 | + <div class="webgl_center"><img src="resources/gl-triangles.svg" style="width: 400px;"></div> |
| 61 | + |
| 62 | +* `TRIANGLE_STRIP` |
| 63 | + |
| 64 | + vertex shader가 출력하는 각 clip space vertex에 대해 마지막 vertex 3개로 삼각형을 그립니다. |
| 65 | + 다시 말해 6개의 점 A,B,C,D,E,F를 출력하면 삼각형 4개가 그려집니다. |
| 66 | + A,B,C 다음 B,C,D 다음 C,D,E 다음 D,E,F |
| 67 | + |
| 68 | + <div class="webgl_center"><img src="resources/gl-triangle-strip.svg" style="width: 400px;"></div> |
| 69 | + |
| 70 | +* `TRIANGLE_FAN` |
| 71 | + |
| 72 | + vertex shader가 출력하는 각 clip space vertex에 대해 첫 번째 vertex와 마지막 vertex 2개로 삼각형을 그립니다. |
| 73 | + 다시 말해 6개의 점 A,B,C,D,E,F를 출력하면 삼각형 4개가 그려집니다. |
| 74 | + A,B,C 다음 A,C,D 다음 A,D,E 다음 마지막으로 A,E,F |
| 75 | + |
| 76 | + <div class="webgl_center"><img src="resources/gl-triangle-fan.svg" style="width: 400px;"></div> |
| 77 | + |
| 78 | +다른 사람들은 동의하지 않겠지만 저의 경험상 `TRIANGLE_FAN`과 `TRIANGLE_STRIP`은 피하는 게 가장 좋습니다. |
| 79 | +몇 가지 예외적인 경우에만 적합하고 이런 경우를 처리하기 위한 추가 코드는 애당초 삼각형만으로 모든 걸 처리할 가치가 없는데요. |
| 80 | +특히 법선을 만들거나 texture 좌표를 생성하거나 vertex 데이터로 다른 많은 작업을 수행하는 도구가 있을 수 있습니다. |
| 81 | +`TRIANGLES`만을 고수하면 함수는 작동하는데요. |
| 82 | +`TRIANGLE_FAN`과 `TRIANGLE_STRIP`을 추가하기 시작하면 더 많은 경우를 처리하기 위한 함수들이 더 필요해집니다. |
| 83 | +여러분은 동의하지 않고 원하는 방식을 하실 수도 있습니다. |
| 84 | +그저 제 경험과 제가 물어본 몇몇 AAA 게임 개발자들의 경험을 말씀드리는 겁니다. |
| 85 | + |
| 86 | +마찬가지로 `LINE_LOOP`와 `LINE_STRIP`는 유용하지 않고 비슷한 이슈를 가지고 있습니다. |
| 87 | +`TRIANGLE_FAN`과 `TRIANGLE_STRIP`처럼 이것들을 사용하는 상황은 드문데요. |
| 88 | +예를 들어 각각 4개의 점으로 만들어진 연결된 선 4개를 그리고 싶다고 생각할 수 있습니다. |
| 89 | + |
| 90 | +<div class="webgl_center"><img src="resources/4-lines-4-points.svg" style="width: 400px;"></div> |
| 91 | + |
| 92 | +`LINE_STRIP`을 쓴다면 `gl.drawArrays` 호출 4번과 각 라인에 대한 attribute를 설정하기 위해 더 많은 호출을 해야 하지만 `LINES`만 사용하면 `gl.drawArrays` 단일 호출로 선 4개를 모두 그리기 위해 필요한 모든 점을 삽입할 수 있습니다. |
| 93 | +그게 훨씬 빠를 겁니다. |
| 94 | + |
| 95 | +추가로, `LINES`는 디버깅이나 간단한 효과에 사용하기는 좋지만 대부분의 플랫폼에서 너비 제한이 1픽셀임을 고려해 볼 때 잘못된 솔루션인 경우가 많습니다. |
| 96 | +그래프의 grid를 그리거나 3D 모델링 프로그램에서 polygon의 윤곽선을 표시하려면 `LINES`를 사용하는 것이 좋지만 SVG나 Adobe Illustrator처럼 구조화된 그래픽을 그리려면 이 방식은 작동하지 않으며, 일반적으로 삼각형에서 [다른 방식](https://mattdesl.svbtle.com/drawing-lines-is-hard)으로 선을 렌더링해야 합니다. |
0 commit comments