10

キャンバスのサイズ変更とgl.viewport同期に問題があります。キャンバス300x300キャンバスと、同じサイズ（）での初期化の
両方から始めたとしましょう。 その後、ブラウザのコンソールでテストを行います。gl.viewportgl.vieport(0, 0, 300, 300)

  1. jqueryを使用して、キャンバスのサイズを変更しています。$("#scene").width(200).height(200)

  2. この後、resizeWindow関数を呼び出しています： 

    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);
}
    • ビューポートを必要な寸法と同期させる関数。

残念ながら、gl.viewportこの電話の後、私のキャンバスの一部しか使用しません。
誰かが何が悪いのか教えてもらえますか？

4

1 に答える 1

19

そのようなことはありませんgl.viewportWidthまたはgl.viewportHeight

パースペクティブマトリックスを設定する場合は、パースペクティブへの入力として使用する必要がcanvas.clientWidthあります。canvas.clientHeightこれらは、ブラウザがキャンバスを拡大縮小するサイズに関係なく、正しい結果を提供します。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ます。これが、drawingBufferのサイズを見つける正しい方法です。

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

明確にするために、ここで混乱していることがいくつかあります

  • canvas.width、canvas.height=キャンバスのdrawingBufferをリクエストしたサイズ
  • 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 = 10;
canvas.height = 20;
canvas.style.width = "30px";
canvas.style.height = "40px";

これらの場合canvas.width、10にcanvas.heightなり、20にcanvas.clientWidthなり、30にcanvas.clientHeightなり、40になります。ブラウザが含まれる要素に合わせてスケーリングするように、パーセンテージcanvas.style.widthに設定するのが一般的です。canvas.style.height

その上、あなたが育てた2つのことがあります

  • ビューポート=通常、これをdrawingBufferのサイズにします
  • アスペクト比=通常、これをキャンバスの拡大縮小サイズにします

これらの定義を考えると、に使用される幅と高さviewportは、に使用される幅と高さと同じではないことがよくありaspect ratioます。

于 2012-08-06T19:07:49.223 に答える