Meteor Mobile Canvas passt nicht zum Bildschirm

Ich probiere Meteor meteor run android-device aus. Ich habe die folgende einfache HTML:Meteor Mobile Canvas passt nicht zum Bildschirm

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

und die css:

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

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

, die diese Ausgabe gibt:

das ist nicht, was ich suche . Ich möchte, dass mein WebGl nicht durch verschiedene Bildschirmgrößen gestreckt wird. WebGL Code:

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

So wie kann ich erreichen, dass, wenn ich etwas ziehen, ohne dass sie relativ zu meiner Bildschirmgröße oder wenn so gerendert wird, wie ich dieses Problem beheben kann? hinweis: ich verwende nicht gl.viewport oder eine andere Kamera-Transformation YET

Quelle

2016-08-05 greedsin

Wie wäre es mit einigen WebGL tutorials?

Hinweis: nicht i gl.viewport oder jede Kamera Transformation

Ist das nicht genau NOCH verwenden, was Sie tun müssen?

Wahrscheinlich möchten Sie dynamically set the size of the canvas's drawingBuffer sonst werden Sie gestreckte Pixel bekommen.

Canvases haben 2 Größen, # 1 die Anzahl der Pixel in ihrem drawingBuffer, # 2 die Größe, die sie angezeigt werden.

Nach Ändern der Größe Sie gl.viewport

WebGL Koordinaten sind immer +1 bis -1 anrufen müssen und alles andere ist an Ihnen, wenn Sie also nicht Ihr Dreieck wollen Sie strecken suchen müssen in der Größe der Leinwand angezeigt (canvas.clientWidth,) und dann verwenden, um die entsprechenden Clip-Raum-Koordinaten für Ihr Dreieck auszuwählen. Wie du das machst, liegt ganz bei dir. Die meisten Menschen tun dies, indem sie ihre Eckpunktpositionen mit einer Projektionsmatrix in ihrem Vertex-Shader multiplizieren.

Wenn Sie 3D machen, dann würden Sie Ihren Aspekt (aspect = canvas.clientWidth/canvas.clientHeight) in Ihrer perspective matrix für Ihre Projektion einstellen. Für 2D würden die meisten wahrscheinlich nur eine orthographische Projektion verwenden. Setzen Sie es auf die Displaygröße (left = -canvas.clientHeight/2, right = canvas.clientWidth/2, top = -canvas.clientHeight/2, bottom = canvas.clientHeight/2), nicht die Zeichnung Puffergröße würde auch Ihre Sachen nicht dehnen.

Quelle

2016-08-05 23:55:35 gman

Meteor Mobile Canvas passt nicht zum Bildschirm

Antwort

Verwandte Themen