한글 자료는 관련 코드 찾기가 힘들어서
Stackoverflow 찾아가면서 해봤는데 몇 시간 동안 헤매서 찾아왔습니다..
일단 코드는
var vertices = new Float32Array([
11/2, 1/2, 1/2, 1/2, 1/2, 1/2,
9/2, 1/2, 1/2, 1/2, 0, 1/2,
9/2, -1/2, 1/2, 1/2, 0, 0,
11/2, -1/2, 1/2, 1/2, 1/2, 0,
11/2, -1/2, -1/2, 0, 1/2, 0,
11/2, 1/2, -1/2, 0, 1/2, 1/2,
9/2, 1/2, -1/2, 0, 0, 1/2,
9/2, -1/2, -1/2, 0, 0, 0,
-9/2, 1/2, 1/2, 1/2, 1/2, 1/2,
-11/2, 1/2, 1/2, 1/2, 0, 1/2,
-11/2, -1/2, 1/2, 1/2, 0, 0,
-9/2, -1/2, 1/2, 1/2, 1/2, 0,
-9/2, -1/2, -1/2, 0, 1/2, 0,
-9/2, 1/2, -1/2, 0, 0, 1/2,
-11/2, 1/2, -1/2, 0, 0, 1/2,
-11/2, -1/2, -1/2, 0, 0, 0,
]);
var indices = new Uint8Array ([
0, 1, 2, 0, 2, 3,
0, 3, 4, 0, 4, 5,
0, 5, 6, 0, 6, 1,
1, 6, 7, 1, 7, 2,
7, 4, 3, 7, 3, 2,
4, 7, 6, 4, 6, 5,
8, 9, 10, 8, 10, 11,
8, 11, 12, 8, 12, 13,
8, 13, 14, 8, 14, 9,
9, 14, 15, 9, 15, 10,
15, 12, 11, 15, 11, 10,
12, 15, 14, 12, 14, 13
]);
Vertex랑 Index들 이용해서 (-5, 0, 0), (5, 0, 0)에 Cube 2개를 그리고
그 좌표랑 카메라 위치(0, 0, 10), 보는 방향(0, 0, 0), up 벡터(0, 1, 0) 와 계산해서 -1 ~ 1 범위 안으로 들어오면 화면에 보이게 그리는 식으로 계산하니까
일단 화면 밖에 상자 2개를 그렸음
var VSHADER_SOURCE =
'attribute vec3 a_Position; \n' +
'uniform mat4 u_ViewMatrix;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'uniform mat4 u_ProjMatrix;\n' +
'attribute vec3 Color; \n' +
'varying vec3 vColor; \n' +
'void main() { \n' +
' gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * vec4(a_Position, 1.0); \n' +
' gl_PointSize = 10.0; \n' +
' vColor = Color; \n' +
'} \n';
//VertexShader
var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
modelMatrix.setTranslate(0, 0, 10);
viewMatrix.setLookAt(0, 0, 10, 0, 0, 0, 0, 1, 0);
projMatrix.setPerspective(45, (canvas.width)/(canvas.height), 1, 100);
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
여기서 변형시킬 때 setTranslate 부분이 문제가 있는 것 같아서 찾아보니까 matrix.setTranslate(float, float) 형식으로 사용하던데
(0, 0, 10)으로 안쓰고 (float, float) 형식으로 이리저리 숫자 바꿔봐도 화면에 안 나오더라고
setLookAT은 (0, 0, 10)에서 (0, 0, 0)을 바라보고 up 벡터는 (0, 1, 0) 설정하고
setPerspective은 FOV 45, 캔버스 화면 거리는 1보다 크고 100보다 작아서 설정했는데 일단 이 둘은 문제 없는 것 같음
계산 할 때 값이 -1 보다 작거나 1 보다 커져서 안 나오는 것 같은데 정확히 모르겠다
normalized 돼서 입력한 값이 문제인 것 같진 않은데 내가 제대로 이해하고 있었으면 이미 해결했을 것 같아서
어디선가 내가 잘못 이해하고 있는 것 같아서 물어보고 싶음
박스 버텍스를 [-1, 1] 범위를 가지고 중심이 (0, 0, 0)인 uniform box 로 만들고, indicies도 그 uniform box를 구성하도록 하는 하나의 box만 정의 하도록 한다음에 model matrix 만 하나는 (-5, 0, 0)로 설정 하고 그리고, 동일한 방식으로 model matrix만 (5, 0, 0)으로 바꿔서 그려주샘
pesudo code 적어주자면 Vertex {x : float32, y : float32, z : float32} Vertex[] vertices = { ... }; // 중심이 0이고 한 변의 길이가 1인 uniform box의 정점 uint[] indicies = { ... }; // vertices 안에 있는 정점의 index 배열, index를 이용해서 box의 정점들이 winding order에 알맞게 배치되서 삼각형을 만들 수 있도록
// Setup Vertex cameraAt {0, 0, 10}; Vertex cameraLookAt {0, 0, 0}; Vertex cameraUp{0, 1, 0}; viewMatrix.setLookAt(cameraAt, cameraLookAt, cameraUp); projMatrix.setPerspectiv(FOV, AspectRatio, NearPlane, FarPlane); gl.uniformMatrix4fv(u_viewMatrix, ..., viewMatrixl.elements); gl.uniformMatrix4fv(u_projMatrix, ..., projMatrix.elements);
VBO = CreateVBO(vertices); // Vertex Buffer ObjectIBO = CreateIBO(indicies); // Index Buffer Object// 첫 번째 박스 (-5, 0, 0)modelMatrix.setTranslate(-5, 0, 0);gl.uniformMatrix4fv(u_modelMatrix, ..., modelMatrix.elements);render(VBO, IBO);// 두 번째 박스 (5, 0, 0)modelMatrix.setTranslate(5, 0, 0);gl.uniformMatrix4fv(u_modelMatrix, ..., modelMatrix.elements);render(VBO, IBO);이런식으로
이걸로 이해가 가지 않으면 WebGL 이전에, 컴퓨터 그래픽스에서 렌더링 파이프라인을 한번 훑어보는 걸 추천함!
ㄳㄳ 그래픽스 다시 한 번 읽어 보고 시도해봄 흐름만 파악하고 그 안에 세부적인 부분 놓친게 너무 많은 것 같다 대충은 알겠는데 머리속에 그려지진 않는다
Vertex Shader 행렬 계산 부분에서 많이 놓친 것 같은데 책이나 봐야 할 듯