2011-09-18 2 views
2

this tutorial에서 저자는 6 개의면 (6 * 4 정점)을 정의한 다음 각면의 삼각형에 대해 webgl에게 말함으로써 정육면체를 표시합니다.큐브에있는 WebGL 삼각형

이것은 낭비가 아닙니까? 단지 8 개의 꼭지점을 정의하고 webgl에게 삼각형을 연결하는 방법을 알려주는 것이 낫지 않습니까? 여러 정점에서 공유되는 색상이 문제가됩니까?

내 관심사를 분명히하기 위해 : 저자가 인덱스 배열을 가진 삼각형을 정의하면 왜 많은 꼭지점이 필요합니까? 그는 정점 배열에 8 개의 꼭지점이있는 모든 삼각형을 지정할 수 있습니다.

답변

5

여기 예제의 저자. 문제는 의심스러운 것처럼 입방체의 색칠과 관련이 있습니다.

이러한 종류의 코드를 가장 쉽게 이해할 수있는 방법은 WebGL의 "정점"을 공간의 단순한 점이 아니라 속성 묶음으로 생각하는 것입니다. 특정 정점은 번들 < (1, -1, 1), 빨간색> 일 수 있습니다. 공간의 같은 지점에 있었지만 다른 색 (예 : < (1, -1, 1), 녹색>)을 가진 다른 정점은 WebGL과 관련하여 전적으로 다른 정점이됩니다.

큐브는 공간상의 점의 수학적 의미에서 꼭지점이 8 개인 반면, 얼굴 당 다른 색을 원한다면 각 점은 색마다 하나씩 3 개의 다른 꼭지점으로 채워야합니다. WebGL의 의미에서 8x3 = 24 개의 꼭지점을 만듭니다.

메모리 측면에서 보면 효율적이지는 않지만 효율적인 처리를 위해서는 정규화 된 표현이 필요로하는 CPU 성능에 비해 메모리가 저렴합니다.

희망을 명확히합니다.

+0

메모리가 저렴하지만 사실이지만 버텍스 수를 늘리면 선형 처리에 필요한 시간이 길어집니다 (또는 GPU가 그 일을하는 방식을 모르겠습니다). 셰이딩을 위해 픽셀 쉐이더를 사용한다면 8 개의 꼭지점을 지정하는 것이 더 낫습니다. 맞습니까? – oOo

+0

GPU는 정점 별 데이터 읽기 버텍스를 실행합니다. 즉, 버텍스 쉐이더는 각 속성 번들마다 하나씩 실행됩니다. 그것을 비정형 화하려면 위치 테이블이 필요합니다. 그러면 WebGL에서 각 꼭지점은 "나는 빨간색으로 위치 # 1입니다"라고 말해야합니다 (예 :). 이것은 비선형 메모리 읽기 (먼저 위치 색인을 포함한 다른 속성을 읽은 다음 위치를 읽음)을 필요로하며, 우리가 말하는 저수준 그래픽 하드웨어에서 효율적으로 구현하기가 더 어려울 것입니다. –

3

VBO (Vertex Buffer Objects)를 사용할 수 있습니다. this 예제를 참조하십시오. 이들은 Vertices 목록을 만들고 Vertex ("Vertex 중복 없음")를 "가리키는"Index 목록을 만듭니다.

+0

"허리에"? 그게 무슨 뜻 이죠? (영국 스피커가 아님) – oOo

+0

'낭비'(오타) 나는이 구절을 수정했다. – pcantin

+0

이 질문에 어떻게 대답합니까? vbo는 꼭지점을 포함하는 버퍼 일뿐입니다. 삼각형이 공통점과 가장자리를 공유 할 때 필요한 꼭지점 수를 줄이지는 못합니다. –