[WebGL] [기본] 스킨이 없는 모델

1. gl_Position = 투영 * 뷰 * 모델 * 위치;

        로컬/모델 위치에서 최종 클립 공간 위치까지

3가지 변신 맥스트릭스:

• 투영: 투영 변환 행렬

  보기 좌표계를 클립 공간 좌표계

  로 변환

• 보기: 변환 행렬 보기

  모델 좌표계를 보기 좌표계로 변환(카메라 위치 이동)

• 모델: 모델 변환 매트릭스

  지역 좌표를 모델 좌표계/게임 월드 좌표계(절대 좌표)로 변환

• 위치: 정점의 로컬 좌표

지역좌표계(상대좌표계)

• 참고:

• 위치 및 모델의 좌표계 원점은 요구사항에 따라 개발자가 정의합니다.

• 모델 및 위치 행렬 데이터에 각각 대응하는 세계 및 모델의 좌표계:
  

            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis

2. WebGL은 기본적으로 열 기본 순서를 사용하지만 C는 기본적으로 행 기본 순서를 사용합니다.

WebGL에서 행렬은 열 주요 순서로 저장되며 이는 행렬 배열 및 계산 순서에 영향을 미칩니다. 이 저장 방법은 WebGL에서 행렬이 정의되고 사용되는 방식에 영향을 미칩니다. 다음은 WebGL에서 열 주요 행렬로 작업할 때의 몇 가지 일반적인 사례입니다.

1. 행렬 정의 및 배열 ## 매트릭스 정의 및 배열 열 주요 저장을 사용하면 행렬의 열이 순차적으로 저장됩니다. 예를 들어, 열 주요 순서의 4x4 행렬 M은 다음과 같습니다.

남 = | m11 m21 m31 m41 | | m12 m22 m32 m42 | | m13 m23 m33 m43 | | m14 m24 m34 m44 |

WebGL에서 이 행렬은 열 주요 순서의 1차원 배열로 표현됩니다.

   const matrix = [
     m11, m21, m31, m41,  // First column
     m12, m22, m32, m42,  // Second column
     m13, m23, m33, m43,  // Third column
     m14, m24, m34, m44   // Fourth column
   ];

1. 일관된 매트릭스 및 배열 형식 행렬 데이터를 WebGL 셰이더에 전달할 때 일관된 형식을 사용하는 것이 중요합니다. 예를 들어 4x4 변환 행렬을 전달할 때 WebGL의uniformMatrix4fv 함수는 열 주요 순서의 배열을 예상합니다.

   gl.uniformMatrix4fv(location, false, matrix);

여기서 false는 행렬을 전치하면 안 된다는 의미입니다. WebGL은 기본적으로 열 우선 순서를 사용하므로 JavaScript의 표준 수학 라이브러리는 기본적으로 행 우선 순서를 사용할 수 있으므로 데이터 형식이 이 요구 사항과 일치하는지 확인하세요.

1. 행렬 곱셈 순서 실제로 열 주요 순서는 행렬의 곱셈 순서에 영향을 미칩니다. 이 시스템에서는 행렬이 오른쪽에서 왼쪽으로 곱해집니다. 즉, 마지막 변환이 먼저 적용됩니다. 예:

결과 행렬 M은 변환 행렬 T, R 및 S

의 곱으로 표현될 수 있습니다.

M = T ⋅ R ⋅ S

이 방정식에서:

• S는 스케일링 행렬입니다.
• R은 회전 행렬이고,
• T는 번역 행렬입니다.

열 주요 순서에서 이 시퀀스는 먼저 크기 조정, 회전, 마지막으로 변환을 적용합니다.

1. 유틸리티 라이브러리 사용 glMatrix와 같은 라이브러리를 사용하면 WebGL에서 행렬 작업이 단순화됩니다. 이러한 라이브러리는 일반적으로 열 주요 순서를 따르므로 WebGL의 요구 사항에 부합하고 수동 매트릭스 형식 조정이 필요하지 않습니다. 예:

let modelMatrix = mat4.create();// 항등 행렬 생성

            Absolute(World) Y+ axis
                 Y (0, 1, 0)
               |
               |                           Local(Model) Y+ axis
               |                             |  /
               |                             | /
               |                             |
               |                  ---------- o (1, 0, 1)  ← Local(Model) Origin ---- Local X+ axis
               |                           / |  
               |                          /  |
               |                         /   |
               |                        /    |
               |                       /     | 
               |______________________/______|__________ X (1, 0, 0)  Absolute(World) X+ axis
              /                     Local(Model) Z+ axis
             /
            /
           /
          Z (0, 0, 1)
   Absolute(World) Z+ axis

1. 디버깅 및 변환 열 주요 저장소를 이해하면 행렬 계산을 디버깅할 때 도움이 됩니다. 행렬 결과가 예상치 못한 경우 셰이더의 데이터 배열이 열 주요 순서와 일치하는지 확인하세요.

위 내용은 [WebGL] [기본] 스킨이 없는 모델의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!