7 가지 WebGL 프리미티브_WebGL 노트 6

서론

[이전 노트](/articles/用 buffer 绘制多个点-webgl 笔记 5/) 에서, 우리는 buffer 를 이용하여 여러 정점 데이터를 저장하고, 한 번에 그렸습니다. 데이터 입력 문제를 해결했으므로, 이제 point 보다 조금 복잡한 것, 예를 들어 삼각형, 선, 사각형 등을 그릴 수 있습니다

一.프리미티브

프리미티브란 복잡한 모델을 구성하는 최소 단위로, WebGL 에서 7 가지 기본 도형을 직접 그릴 수 있습니다. 이들이 소위 프리미티브입니다:

고립점
고립선분
연속선분
연속코일
고립삼각형
삼각대
삼각부채

"직접 그릴 수 있다"는 것은, 반대로 말하면 이들만이 직접 그릴 수 있고, 다른 조금 복잡한 것들은 이 7 가지 프리미티브로 스스로 구축해야 한다는 것입니다. 예를 들어 사각형, 육각형, 사면체, 입방체 등은 잘 생각하면 정점을拼해서 계산할 수 있지만, 더 복잡한 것, 예를 들어 원기둥, 구, 반구 등은 전문 모델링 도구 (3ds max, maya, blender 등) 에서 정점 데이터를 내보내야 합니다

복잡한 모델을 구축할 때는 일반적으로 삼각대 또는 고립삼각형을 사용합니다. 예를 들어 삼각대로 구를 구축하는 것은 마치 깎아낸 완전한 사과 껍질을 복원하는 것과 같고, 고립삼각형으로 입방체를 구축하는 것은 완전히拼凑입니다

二.프리미티브 그리기

이전에 고립점을 그릴 때, 최종적으로 그리기를 담당하는 코드는 한 문장뿐이었습니다:

// 绘制点
gl.drawArrays(gl.POINTS, 0, arrVtx.length / 2);
// gl.POINTS 孤立点
// gl.LINES 孤立线段
// gl.LINE_STRIP 连续线段
// gl.LINE_LOOP 连续线圈
// gl.TRIANGLES 孤立三角形
// gl.TRIANGLE_STRIP 三角带
// gl.TRIANGLE_FAN 三角扇

다른 프리미티브를 그리려면 gl.drawArrays 의 첫 번째 파라미터만 수정하면 됩니다. 해당 함수의 상세한 설명은 [attribute 변수와 정점 셰이더_WebGL 노트 2](/articles/attribute 变量与顶点着色器-webgl 笔记 2/#articleHeader9) 를 참조하십시오. 간단히 이해하면, 첫 번째 파라미터는 WebGL 시스템에传入된 정점 데이터를 어떻게 사용할지 알리기 위한 것입니다. 점을 그릴지, 선을 그릴지, 삼각형을 그릴지

P.S.실제로, 첫 번째 파라미터는 光栅化하기 전의도형装配프로세스에 영향을 줍니다. 이때 파라미터로 지정된 프리미티브에 따라 처리된 정점 데이터를 기하 도형으로装配하고, 이후 光栅化 프로세스에서 기하 도형을 하나하나의片元 (또는 픽셀 점) 으로 분해하고, 다시片元 셰이더로上色하여, 완료 후가 우리가 최종적으로 보는 효과입니다. 정점 데이터를传入してから 그려질 때까지의 구체적인 프로세스는, 다음편의 varying 변수에 관한 노트에서 자세히 설명합니다

三.사각형 그리기

가장 직접적인 방법은 2 종류 있습니다:

6 개의 정점으로 2 개의 삼각형 그리기
4 개의 정점으로 삼각대 중의 2 개 삼각편 확정

일반적으로 정점 데이터를 절약하는 것을 고려하여,传入하는 정점 수를 최대한 줄여 퍼포먼스를 향상시킵니다. 따라서 후자의 방법을 채택합니다. 주요 코드는 다음과 같습니다:

var arrVtx = new Float32Array([
    -0.5, 0.5,
    -0.5, 0.0,
    0.5, 0.5,
    0.5, 0.0
]);
// 绘制矩形
gl.drawArrays(gl.TRIANGLE_STRIP, 0, arrVtx.length / 2);

还是比较簡単해 보이지만, 실제로는 복잡한 도형을 그리는 가장 중요한 문제는 정점 데이터의 소스입니다. 사각형 정점은 직접筆로 열거할 수 있고, 조금 복잡한 것은 초안을 그려도 써낼 수 있습니다. 더 복잡한 것은 전문 모델링 도구가 필요할지도 모릅니다. 모델링 도구에서 정점 데이터 파일을 내보내고, 파일을 해석하여 필요한 정점 데이터를 취득합니다. 물론, 습득이 필요한 지식에서 보면, 구를 1 개 그리는 것과 사각형을 1 개 그리는 것에는아무 차별도 없습니다

四.DEMO

위 코드를 포함한 완전한 예에 대해서는, 다음을 참조하십시오:

7 가지 프리미티브 (2 초마다 전환): http://www.ayqy.net/temp/webgl/triangle/index.html
사각형: http://www.ayqy.net/temp/webgl/rectangle/index.html

五.정리

프리미티브를 지정하는 것은, WebGL 에传入된 정점 데이터를 어떻게 사용하고 싶은지 알리는 것입니다.那么就有这么一种情况：5 개의 정점을传入하여 고립삼각형을 그린다고 하면, 결과를猜猜해보세요? 물론 1 개의 삼각형만 그려집니다. 마지막 2 개의 정점으로는 삼각형을装配할 수 없으므로, 이 삼각형의 하나하나의片元을 분해할 수 없어, 마지막에는 그것이 보이지 않게 됩니다

정점 데이터를传入してから 이미지가 그려질 때까지, 그 사이의 프로세스는 길지만 각 스텝이 매우 중요합니다. 다음편 노트에서 자세히 설명합니다

참고 자료

《WebGL 프로그래밍 가이드》

서론