원근감을 유지하면서 픽셀 해상도에서 WebGL 캔버스 사용하기

Question

이전에이 유형의 질문을 보았지만 그 대답은 완전한 대답이 아니므로 코드를 게시하고 누구나 제공 할 수 있는지 확인합니다. 통찰력. 기본적으로이 코드는 작동하지만 마법의 z 오프셋 (높이 * 1.205) [너비에 관계없이] 이유는 모르겠다.

크기를 설정하고 정렬 벡터 생성 : 정렬 벡터 그리기

gl.viewportWidth = gl.canvas.width; 
gl.viewportHeight = gl.canvas.height; 
gl.viewportHalfWidth = gl.viewportWidth/2; 
gl.viewportHalfHeight = gl.viewportHeight/2; 
gl.viewportAspect = gl.viewportWidth/gl.viewportHeight; 
gl.viewportZoom = -gl.viewportHeight * 1.205; 
if (gl.alignmentTest) { 
    gl.alignmentVertices = (new Buffer( // TL, TM, BM, BR, TR, BL, TL 
     [ 1.0,      -1.0,     0.0, 
     gl.viewportHalfWidth - 0.5,  -1.0,     0.0, 
     gl.viewportHalfWidth - 0.5, -(gl.viewportHeight - 1.0), 0.0, 
     gl.viewportWidth - 1.0,  -(gl.viewportHeight - 1.0), 0.0, 
     gl.viewportWidth - 1.0,   -1.0,     0.0, 
      1.0,     -(gl.viewportHeight - 1.0), 0.0, 
      1.0,      -1.0,     0.0], 3)).post(); 
} 

을 : 문제

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 
mat4.perspective(45, gl.viewportAspect, 0.1, 1000.0, gl.perspective.current); 
gl.perspective.post(); //^writes directly to current perspective buffer 

gl.modelView.resetToIdentity(); 

gl.enable(gl.BLEND); 
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); 

// Translate to pixel resolution 
gl.modelView.push(); 
gl.modelView.translate([-gl.viewportHalfWidth, gl.viewportHalfHeight, gl.viewportZoom]); 
gl.modelView.post(); 

// Alignment test? 
if (gl.alignmentTest && gl.alignmentVertices) { 
    gl.red.useAsAttribute(gl.shaderProg.vertexColour); 
    gl.zero.vec2.useAsAttribute(gl.shaderProg.vertexTextureCoord); 
    gl.alignmentVertices.drawAsPrimitives(gl.shaderProg.vertexPosition, gl.LINE_STRIP); 
} 

gl.disable(gl.BLEND); 

의 선은 다음과 같습니다

gl.viewportZoom = -gl.viewportHeight * 1.205; 

과 :

gl.modelView.translate([-gl.viewportHalfWidth, gl.viewportHalfHeight, gl.viewportZoom]); 

이 코드는 의 경우 크기에서 작동합니다. http://oi49.tinypic.com/2my9ir7.jpg

그리고 다른 400x600에서 : http://oi46.tinypic.com/i2irh3.jpg이

그래서 질문입니다 : 왜 1.205의 마법 배율이 존재

여기에 700x300의 스크린 샷이다? 또는 내가 필요로하게하기 위해 무엇을 잘못 할 수 있습니까?

Answer 1

나는 수학을 계산하지 못했지만, 그 원인은 FOV와 near plane의 perspective 투영 행렬에서 발생한다고 생각합니다. 1 : 1 픽셀을 얻으려고하는 대부분의 응용 프로그램은 투시 투영을 사용하지 않습니다.

원근감을 사용해야하는 이유가 있다면 FOV 기반 원근감 계산을 사용하지 말고 대신 frustum 기반 (glFrustum- 모두)을 사용하십시오. 실제로 투영 절두체의 효과를 유도하는 것이 훨씬 쉽습니다. 손으로 조정하지 않고 첫 번째 원칙에서 수정 요인을 찾아 낼 수 있습니다.

---

이것은 본질적으로 삼각 문제입니다. 뷰 프러스 텀 또는 뷰 피라미드를 상상해보십시오 (즉, 가까운 평면과 먼 평면으로 절단되지 않음). 그것은 "카메라 위치"와 4 개의 경 사진면에 팁을 가지고 있습니다. 일반적으로 정의 된 FOV는 상단면과 하단면 사이의 각도와 같습니다 (이 때문에 너비가 영향을주지 않습니다). 그러나 사용자가 원하는 매개 변수는 각도가 아니며 경사도 (Z와 X 또는 Y 이동 비율) - 임의의 수치가 나오는 곳입니다.

만약 우리가 the documentation for good ol' gluPerspective (당신의 원근법 연산이 사용하는 것과 같은 수학을 사용한다고 가정 함)을 보면, 그것은 f = cotangent(fovy/2)입니다. 이것은 정확히 우리가 신경 쓰는 계산입니다. (이것을 재현하려한다면, 수학 라이브러리의 대부분의 삼각 함수는 각도가 아닌 라디안 단위의 각도를 취합니다.) 2의 인수는 FOV가 일반적으로 전체 뷰 각도로 측정되기 때문에 발생하지만 관심 값은 다음과 같습니다. 그것의 절반, 즉 "직선"과 "보기 가장자리"사이의 각도.

알고 계신 것처럼, 코탄센트 (또는 접선) 함수의 값은 기울기로 해석 될 수 있습니다.이 슬로프 f은 Z 이동과 X 또는 Y 이동 사이의 비율을 정확하게 알려줍니다. 예를 들어, 어떤 값을 d 값으로 개체의 크기를 조절하고 Z 축을 따라 f*d만큼 이동하면 크기가 변경되지 않습니다. 이것은 당신의 viewportZoom 이미 일을 정확히 할 수있다 :

당신의 1.205에 꽤 가까운

f/2 = cot(45°/2)/2 ≈ 1.207106 

. 이것이 실제로 사실이라면, 나는 2의 요인이 어디에서 오는지를 해결하지 못했습니다.

f (또는 tan(fovy/2)에 따라 최종적으로 어느 것이 더 편리할까요?) 계산하고 둘 다 사용하여 "확대/축소"거리와 투영 행렬을 계산하면됩니다.

---

은 (그건 그렇고, 당신의 코드가 WebGL을, 예를 들어 Buffer, post, drawAsPrimitives없는 물건을 많이, 등 당신이 사용하고있는 라이브러리 언급 한 경우 잠재적으로 도움이 될 것입니다 포함되어 있습니다.)