WebGL의 투영 텍스처 매핑

Question

512x512 이미지를 텍스처로 사용하는 두 개의 간단한 WebGL 데모를 작성했습니다. 그러나 결과는 내가 원하는 것이 아닙니다. 솔루션은 사영 텍스처 매핑 (또는 다른 솔루션을 사용하는 것입니다) 알아요?하지만 간단한 데모에서 구현하는 방법을 모르겠습니다. 누구든지 도울 수 있니?

결과는 (둘 다 잘못)은 다음과 같습니다 : 데모

코드 현재 위치 : https://github.com/jiazheng/WebGL-Learning/tree/master/texture

참고 : 모두 내 경우에는 모델과 텍스처를 수정할 수 없습니다.

Answer 1

원근감 정확한 텍스처 매핑을 얻으려면 실제로 원근감을 사용해야합니다. 즉, x 축을 따라 다각형의 상단을 좁히는 대신 z 축을 따라 뒤로 이동하고 표준 투시 투영 행렬을 적용하십시오.

나는 세부 자신에 약간 흐릿 해요,하지만 내 이해는 방법은 관점 매트릭스가 함께 보간하기 위해 GPU를 얻기에 Z이 승 좌표 에 좌표 키입니다 매핑이다 표면은 "정확하게".

이미 투시 왜곡 된 2D 지오메트리가있는 경우 적절하게 z 값을 계산하여 3D 데이터로 복원하는 방법을 구현해야합니다. WebGL에는 원근법이 삼각형이고 명확하게 찾기 위해 텍스처 매핑을 정의하는 데 충분한 정보가 3 점이 없기 때문에 WebGL에서 원근감있는 사변형을 얻을 방법이 없습니다. 코드에서 네 점을 사용해야합니다. 해당 깊이. 불행히도, 나는 당신에게 세부 사항에 관해 당신에게 조언 할 수있는 수학에 대한 충분한 지식이 없습니다.

Answer 2

vec4가 아닌 vec4 텍스처 좌표를 지정해야합니다. 각 vec4의 네 번째 필드는 x와 y로 나눌 때 원하는 좌표를 생성하는 균질 W입니다. 이것은 차례로 하드웨어의 원근감 보정 부분이 당신의 숫자가 정확하다면 당신에게 삼각형 내의 비 아핀 매핑을 제공 할 수 있어야합니다. 이제 투영 행렬을 사용하여 정점 셰이더에서 w = 1 인 vec4를 변형하는 경우 올바른 vec4 숫자를 가져와 원근감을 보정하고 조각 쉐이더의 설정 및 래스터 화를 수행해야합니다. 이것이 명확하지 않은 경우 투영 텍스처 변환과 동질적인 투영법에 대한 자습서를 찾아야합니다.