Thay đổi kích thước webgl gl.viewport

Question

Tôi gặp sự cố với việc thay đổi kích thước canvas và gl.viewport đồng bộ hóa.
Giả sử tôi bắt đầu với cả canvas 300x300 canvas và khởi tạo gl.viewport có cùng kích thước (gl.vieport(0, 0, 300, 300)).
Sau đó, trong giao diện điều khiển của trình duyệt tôi làm các xét nghiệm của tôi:

1. I'm changing size of my canvas, sử dụng jquery, gọi cái gì đó như $("#scene").width(200).height(200)

2. After this, i'm calling my resizeWindow function:

   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); 
   } 
   

   • chức năng đó là đồng bộ hóa khung nhìn với kích thước bắt buộc.

Thật không may, tôi gl.viewport sau khi cuộc gọi này chỉ mất một phần của vải của tôi.
Có ai cho tôi biết điều gì đang xảy ra không?

Answer 1

Không có những điều như vậy là gl.viewportWidth hoặc gl.viewportHeight

Nếu bạn muốn thiết lập ma trận quan điểm của bạn, bạn nên sử dụng canvas.clientWidth và canvas.clientHeight như đầu vào của bạn để quan điểm. Những thứ đó sẽ cung cấp cho bạn kết quả chính xác bất kể kích thước trình duyệt chia tỷ lệ canvas. Như trong trường hợp bạn đặt tỷ lệ khung hình tự động bằng 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); 

Đối với chế độ xem. Sử dụng gl.drawingBufferWidth và gl.drawingBufferHeight. Đó là cách chính xác để tìm ra kích thước của bạn drawingBuffer

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

Chỉ cần được rõ ràng có nhiều điều lồng việc ở đây

• canvas.width, canvas.height = kích thước mà bạn yêu cầu drawingBuffer của vải được
• gl.drawingBufferWidth , gl.drawingBufferHeight = kích thước bạn thực sự có. Trong 99,99% các trường hợp này sẽ giống như canvas.width, canvas.height.
• canvas.clientWidth, canvas.clientHeight = kích thước trình duyệt đang hiển thị canvas của bạn.

Để thấy sự khác biệt

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

hoặc

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

Trong những trường hợp canvas.width sẽ là 10, canvas.height sẽ là 20, canvas.clientWidth sẽ là 30, canvas.clientHeight sẽ 40. Đó là chung để đặt canvas.style.width và canvas.style.height thành phần trăm sao cho trình duyệt chia tỷ lệ cho phù hợp với bất kỳ yếu tố nào được chứa trong đó.

Ngày đầu đó có 2 điều bạn đưa lên

• viewport = thường bạn muốn đây là kích thước của tỉ lệ drawingBuffer
• của bạn = thường bạn muốn điều này là kích thước của bạn vải được thu nhỏ để

với những định nghĩa chiều rộng và chiều cao sử dụng cho viewport thường là không giống như chiều rộng và chiều cao sử dụng cho aspect ratio.