다면체 정점 위치, 법선 및 텍스처 좌표를 열거하는 방법 GLSL

Question

WebGL에서 다면체를 렌더링하는 중이고 정점 위치 및 법선을 생성하는 데보다 효율적이고 오류가 적은 방법이 있는지 궁금합니다.

이상적으로 GPU에 인덱스 만 포함 된 버퍼를 보내고 버텍스 쉐이더에서 버텍스 별 위치 및 법선을 계산합니다.

uniform mat4 transform; 

uniform ??? polyhedra; // some kind of representation of the polyhedra type  

attribute int index; 

varying vec4 normal; 
varying vec2 uv; 

vec3 calculatePosition() { /* mathemagic w/index and polyhedra */ }; 
vec3 calculateNormal () { /* mathemagic w/index and polyhedra */ }; 
vev2 calculateUV  () { /* mathemagic w/index and polyhedra */ }; 

void main() { 
    gl_Position = transform * vec4(calculatePosition(), 1.0); 
    normal  = transform * vec4(calculateNormal(), 1.0); 
    uv   = calculateUV(); 
} 

을 다음 index에 그것을 정점 인덱스의 배열을 보내 버텍스 쉐이더는 다음과 같이 보일 것입니다. 평면 당 두 개의 삼각형으로 렌더링 된 큐브의 경우 (평행선이 다른면 사이에서 공유 될 수 없기 때문에 중요 함) 법선이 다른 점 때문에 인덱스를 버퍼로 보냅니다. 36) (6면 * 2 삼각형 * 3 개의 꼭지점).

영웅적인 노력 없이도 효율적이고 효율적입니까?

WebGL은 기본적으로 OpenGL ES 2.0이므로 기하학적 셰이더가 없습니다.

Answer 1

물론 가능합니다. 그러나 실용적이지는 않습니다.

정점을 생성 할 수는 없지만 꼭 정점 셰이더를 사용하여 값을 절차 적으로 채울 수는 있습니다. 하나의 접근법은 FBO를 사용하여 프래그먼트 셰이더에서 위치를 계산 한 다음 텍스처 룩업을 사용하여 정점 셰이더를 사용하여 위치/법선/UV를 가져 오는 것입니다. 이것은 OpenGL ES 2.0이 데이터를 지속적으로 저장하기위한 피드백 피드백이 없으므로 할 수있는 최선책입니다.

그러나 이러한 다면체를 한 번 생성하는 경우 처음에는 GPU에 오프로드하기위한 인센티브가 거의 없습니다. WebGL은 다양한 장치에서 실행되며, 일부는 다른 장치보다 처리량이 높습니다. 그러나 모든 경우에 버텍스 버퍼에서 버텍스 위치를 읽는 것이 텍스처 룩업보다 빠릅니다. WebGL이 피드백을 변환 할 수 있다면 다른 방법을 제안 할 수도 있지만 이것은 거대한 시간 낭비처럼 들릴 수 있습니다.