Question

我正在尝试流星的meteor run android-device。我有以下简单的html：

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

和css：

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

那么我怎样才能实现，如果我绘制的东西它会被渲染而不是相对于我的屏幕尺寸或者如果是这样，我该如何解决这个问题呢？注意：我不使用gl.viewport或任何相机转换YET

Answer 1

阅读一些WebGL tutorials怎么样？

注意：我不使用gl.viewport或任何相机转换YET

那不就是你需要做的吗？

您可能希望dynamically set the size of the canvas's drawingBuffer，否则您将获得拉伸像素。

画布有两种尺寸，＃1是drawingBuffer中的像素数，＃2是它们显示的尺寸。

更改尺寸后，您需要致电gl.viewport

WebGL坐标始终为+1到-1，其他所有内容都取决于您，因此如果您不希望三角形伸展，则需要查看画布显示的大小（canvas.clientWidth，{ {1}}）然后使用它为三角形选择合适的剪辑空间坐标。你怎么做完全取决于你。大多数人通过将顶点位置与顶点着色器中的投影矩阵相乘来实现。

如果您正在进行3D操作，那么您可以在perspective matrix中为投影设置方面（canvas.clientHeight）。对于2D，大多数人可能只使用正交投影。将其设置为显示尺寸（aspect = canvas.clientWidth / canvas.clientHeight），不，drawingBuffer尺寸也会使您的东西无法拉伸。

流星移动画布不适合屏幕

1 个答案: