流星のキャンバスがスクリーンに合っていない

私は流星のmeteor run android-deviceを試しています。流星のキャンバスがスクリーンに合っていない

<body> 
    <canvas id='id'></canvas> 
</body>

とcss：私は、次のような単純なHTMLを持って、この出力を与える

html, body { 
    margin: 0; 
    padding: 0; 
} 

canvas { 
    width: 100vw; 
    height: 100vh; 
    position: absolute; 
}

：私は探していますものではありません

。私は自分のWebGlが異なる画面サイズで伸ばされないようにしたい。 WebGLのコード：

var canvas = this.find('#id'); 
if (!canvas) { 
    console.log('Strange Error occured'); 
    return; 
} 
var gl = canvas.getContext('webgl'); 
if (!gl) { 
    console.log("gl not supported"); 
    return; 
} 


gl.clearColor(0.4, 0.7, 0.9, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT); 
renderTriangle();

は、どのように私はそれが比較的私の画面サイズにORもしそうならせずにレンダリングされる何かを描く場合、どのように私はこの問題を解決できることを、達成することができますか？注：私はgl.viewportまたは任意のカメラ変換を使用しないでください。

出典

2016-08-05 greedsin

WebGL tutorialsを読んでみてはいかがですか？

注：私はまだ

は、それはあなたが何をする必要があるかを正確じゃないですgl.viewportまたは任意のカメラ変換を使用していけませんか？

おそらくdynamically set the size of the canvas's drawingBufferにすると、伸びたピクセルが得られます。

キャンバスには2つのサイズがあります.1つはdrawingBufferのピクセル数、2は表示されるサイズです。あなたが見てする必要があり伸ばすためにあなたの三角形をしたくないので、もし

サイズを変更した後は、gl.viewport

WebGLの座標が-1に常に1であり、他のすべてはあなた次第です呼び出す必要があります（canvas.clientWidth、canvas.clientHeight）キャンバスのサイズで表示し、それを使って三角形の適切なクリップ空間座標を選択します。どのようにすればそれはあなた次第です。ほとんどの人は、頂点の位置に頂点シェーダの投影行列を掛けて計算します。

3Dを行っている場合は、perspective matrixにアスペクト（aspect = canvas.clientWidth/canvas.clientHeight）を設定してください。 2Dの場合、ほとんどの人は、おそらく正射投影を使用します。ディスプレイサイズ（left = -canvas.clientHeight/2, right = canvas.clientWidth/2, top = -canvas.clientHeight/2, bottom = canvas.clientHeight/2）に設定すると、ではなく、のdrawingBufferのサイズは、あなたのものが伸ばさないようにもなります。

出典

2016-08-05 23:55:35 gman

流星のキャンバスがスクリーンに合っていない

答えて

関連する問題