Webgl gl.viewport 변경

Question

캔버스 크기 조정에 문제가 있으며 gl.viewport 동기화가 있습니다.
캔버스 300x300 canvas과 같은 크기 (gl.vieport(0, 0, 300, 300))의 gl.viewport의 초기화로 시작한다고 가정 해 보겠습니다.

function resizeWindow(width, height){ 
    var ww = width === undefined? w.gl.viewportWidth : width; 
    var h = height === undefined? w.gl.viewportHeight : height; 
    h = h <= 0? 1 : h; 
    w.gl.viewport(0, 0, ww, h); 
    mat4.identity(projectionMatrix); 
    mat4.perspective(45, ww/h, 1, 1000.0, projectionMatrix); 
    mat4.identity(modelViewMatrix); 
} 

• 기능 뷰포트를 동기화하는 것 : $("#scene").width(200).height(200)

• After this, i'm calling my resizeWindow function 같은 것을 호출, jQuery를 사용하여,

  1. I'm changing size of my canvas : 그 후
     는 브라우저의 콘솔에서 내 시험을 필수 치수.

불행히도, 내 gl.viewport이 호출이 내 캔버스의 일부를 소요 한 후.
아무도 나에게 무엇이 잘못 될지 알려주실 수 있습니까?

Answer 1

그런 일이 gl.viewportWidth 또는

당신이 관점에 입력으로 canvas.clientWidth 및 canvas.clientHeight을 사용해야 관점 행렬을 설정하려면 gl.viewportHeight 없습니다 있습니다. 브라우저가 캔버스의 크기를 조정하는 크기와 상관없이 올바른 결과를 제공합니다. 캔버스 자동 눈금을 CSS로 설정 한 경우

<canvas style="width: 100%; height:100%;"></canvas> 

... 

var width = canvas.clientHeight; 
var height = Math.max(1, canvas.clientHeight); // prevent divide by 0 
mat4.perspective(45, width/height, 1, 1000, projectionMatrix); 

뷰포트의 경우. gl.drawingBufferWidth 및 gl.drawingBufferHeight을 사용하십시오. 즉, 그냥 여기

• canvas.width
  을으로 융합 몇 가지가 명확하게하기 위해 drawingBuffer

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); 
  

  의 크기를 찾을 수있는 올바른 방법, 캔버스의 drawingBuffer을 요청 canvas.height = 크기는합니다

• gl.drawingBufferWidth , gl.drawingBufferHeight = 실제로 얻은 크기입니다. 99.99 %의 경우이 값은 canvas.width, canvas.height과 같습니다.
• canvas.clientWidth, canvas.clientHeight = 브라우저가 사용자의 캔버스를 표시하고있는 크기입니다.

<canvas width="10" height="20" style="width: 30px; height: 40px"></canvas> 

또는 이러한 경우 canvas.width에서

canvas.width = 10; 
canvas.height = 20; 
canvas.style.width = "30px"; 
canvas.style.height = "40px"; 

10 것의 차이를 보려면, canvas.height 그것은 일반적입니다 canvas.clientHeight가 40이 될 것이다, canvas.clientWidth 30 될 것입니다, 20이 될 것입니다 canvas.style.width 및 canvas.style.height을 백분율로 설정하여 브라우저가 포함 된 요소에 맞게 비율을 조정하십시오.당신이 가져온 두 가지가 그 위에

• 뷰포트 = 일반적으로 당신이 당신이이 크기로 원하는 = 일반적으로 당신의 drawingBuffer
• 화면 비율의 크기로하려는 캔버스는 viewport 사용 폭과 높이 이러한 정의 감안

확장된다 aspect ratio 자주 사용되는 폭 및 높이와 동일하지 않다.