调整画布大小而不扩大元素WEBGL

Question

我是WebGl的新手，我希望在不扩大所有元素的情况下调整画布的大小。 我尝试在HTML文件中编辑以下代码行：

<canvas id="gl-canvas" width="512"" height="512">

使用新的

<canvas id="gl-canvas" width="1024"" height="1024">

但是html里面的数字会更大，我不想要。我只想调整包含元素的空间的大小。

我也尝试过这样做： 在JS文件中，我尝试编辑

gl.viewport( 0, 0, canvas.width, canvas.height );

与

gl.viewport( 0, 0, 0.5*canvas.width, 0.5*canvas.height );

该数字将缩小一半，但空间保持不变。我需要更多的动画空间，因为即使我还有很多可用空间（白色），动画有时也会退出屏幕。

我想上传一些照片以更好地说明我的观点

我的画布

Web检查器的详细信息

谢谢。

Answer 1

WebGL要求您自己绘制项目以匹配大小。 WebGL在（称为剪辑空间）中获取标准化坐标。无论大小如何，它们始终在画布上从-1变为+1，在画布上始终从-1变为+1。要绘制任何内容，您都可以通过JavaScript和/或GLSL着色器提供数学运算，这些着色器将获取您提供的任何数据并将其转换为剪贴空间。这意味着，如果您希望项目保持相同的大小，则需要调整用于绘制所绘制事物的数学运算。没有看到你的数学运算，我们真的不知道该怎么建议。

在WebGL中绘制事物的最常见方法是将2D或3D数据乘以1个或多个矩阵。您可以阅读有关here的信息。您可能需要阅读该文章之前的文章才能理解该文章。您可能还希望阅读那篇从2D到3D的文章

因此，除了说要由您决定解决方案以解决数学问题之外，没有简单的答案。不知道您正在使用什么数学，我们无法建议一种保持大小不变​​的方法。

如果直接使用剪辑空间坐标，则只需传递X和Y比例尺即可。如果画布变大两倍，然后缩放一半，则对象将保持相同大小。

gl_Position = someClipspaceCoordinates * vec4(scaleX, scaleY, 1, 1);

如果您使用的是an orthographic projection，则需要为每个像素选择一定数量的单位，并调整传递到正交投影矩阵制作函数中的值

const pixelsPerUnit = ???;
const unitsAcross = gl.canvas.clientWidth / pixelsPerUnit;
const unitsDown = gl.canvas.clientHeight / pixelsPerUnit;

// assuming you want 0,0 at the center
const left   = -unitsAcross / 2;
const right  =  unitsAcross / 2;
const bottom = -unitsDown / 2;
const top    =  unitsDown / 2;
const near   = ???;
const far    = ???;

const projectionMatrix = someOrthographicProjectionMatrixFunction(
    left, right, bottom, top, near, far);

如果您使用perspective projection进行3D绘制，则必须基于画布的宽度或高度计算视野以保持对象大小相同，或者，将相机移近些到物体或远离物体。

要按视场调整，您可以做类似的事情

const fovPerPixel = 0.1 * Math.PI / 180;
const fov = gl.canvas.clientHeight * fovPerPixel;
const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
const near = 0.5;
const far = 1000;
const projectionMatrix = somePerspectiveProjectionMatrixFunction(
    fov, aspect, near, far);

请注意，此方法的问题是，随着画布变大，朝着画布边缘绘制的对象将变得越来越失真，而视场越来越宽，以使所有尺寸保持相同。当视野达到180度或更大时，透视数学将中断，并且不会显示任何内容。

要通过移动相机进行调整，请以this answer为起点。