在使用WebGL中的texture2D渲染图像到画布时，如何保持纵横比？

Question

我有一个宽*高=1442 * 1303的图像，我能够阅读它们，并通过webgl的文本2D成功地渲染到画布上。

在客户端，我有一个数组缓冲区，它获取大小=宽度*高度*4的图像数据。

所以，当我的画布宽度和高度为窗口时，如何保持图像的纵横比。innerWidth*0.90和窗口。内部高度*0.90。

此外，我必须直接渲染使用数组缓冲区通过WEBGL 2d的纹理，所以，我不能使用任何2d canvs API，如绘制图像。请提出一些建议。

Answer 1

这个问题有一百万个答案。

首先是图像的大小，然后是您决定绘制的大小，画布的大小，然后是画布显示的大小。还有你使用的顶点的位置，可以是任何东西。

请参阅WebGL上的这篇文章，其中指出WebGL使用剪辑空间坐标（-1到1），这篇文章指出画布显示的大小与其分辨率是分开的。

让我们假设您希望将图像绘制得尽可能大，并使其适合画布。

首先让我们查看画布显示的大小

var canvasDisplayWidth  = gl.canvas.clientWidth;
var canvasDisplayHeight = gl.canvas.clientHeight;

让我们假设我们想要绘制的图像尽可能大所以首先尝试拟合的宽度到画布

var imageDisplayWidth  = canvasDisplayWidth;
var imageDisplayHeight = img.height * imageDisplayWidth / img.width;

现在让我们看看它是否合适？如果没有，我们就用高度

if (imageDrawHeight > canvasDisplayHeight) { 
  imageDisplayHeight = canvasDisplayHeight;
  imageDisplayWidth  = img.width * imageDisplayHeight / img.height;
}

现在我们需要将imageDisplayWidth和imageDisplayHeight转换为画布中像素的大小。注意：如果画布显示的大小与其分辨率相同，则可以跳过此步骤，因为显示大小和绘图大小将相同。

// make our image take into account the pixel aspect
var canvasPixelsAcrossPerDisplayPixel = gl.canvas.width  / canvasDisplayWidth;
var canvasPixelsDownPerDisplayPixel   = gl.canvas.height / canvasDisplayHeight;

var imageDrawWidth  = imageDisplayWidth  * canvasPixelsAcrossPerDisplayPixel;
var imageDrawHeight = imageDisplayHeight * canvasPixelsDownPerDisplayPixel;     

现在我们需要把它转换成夹子空间

var clipWidth  = imageDrawWidth  / canvas.width;
var clipHeight = imageDrawHeight / canvas.height;

现在，给定一个单位四，我们可以缩放它以适应那个尺寸。

var m = m4.identity();

// convert our square unit quad match the size we want
m4.scale(m, [clipWidth, clipHeight, 1], m);

// move our unit square from 0,0 (the center) to the bottom, top corner
m4.translate(m, [-1, 1, 0], m);

// scale our unit sqaure to cover the clip space
m4.scale(m, [2, -2, 1], m); 

现在我们可以用矩阵和我们的单位四元组画图了

var m4 = twgl.m4;
var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: {
    numComponents: 2,
    data: [
      0, 0,
      1, 0,
      0, 1,
      0, 1,
      1, 0,
      1, 1,
    ],
  },
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

// Lets make a texture using a 2d canvas
// There's a circle in the middle. If our
// code is correct it will be a circle when
// drawn (not an oval or ellipse)
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 100;
ctx.canvas.height = 75;
ctx.fillStyle = "red";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, ctx.canvas.width - 20, ctx.canvas.height - 20);
ctx.strokeStyle = "yellow";
ctx.lineWidth = 20;
ctx.beginPath();
ctx.arc(
  ctx.canvas.width / 2, ctx.canvas.height / 2,
  Math.min(ctx.canvas.width, ctx.canvas.height) / 2 - 20,
  0, Math.PI * 2, false);
ctx.stroke();

var img = ctx.canvas;
      
var tex = twgl.createTexture(gl, {
  src: img,
});

var canvasDisplayWidth  = gl.canvas.clientWidth;
var canvasDisplayHeight = gl.canvas.clientHeight;

// Let's assume we want to draw the image as large as possible so
// first try fitting the width to the canvas

var imageDisplayWidth  = canvasDisplayWidth;
var imageDisplayHeight = img.height * imageDisplayWidth / img.width;

// Now let's check if it fit? If not let's use the height
if (imageDisplayHeight > canvasDisplayHeight) { 
  imageDisplayHeight  = canvasDisplayHeight;
  imageDisplayWidth   = img.width * imageDisplayHeight / img.height;
}
      
// Now we need to convert `imageDisplayWidth` and `imageDisplayHeight` to the size of pixels
// in the canvas. Note: If the canvas is being displayed the same size
// as the its resolution you can skip this step

var canvasPixelsAcrossPerDisplayPixel = gl.canvas.width  / canvasDisplayWidth;
var canvasPixelsDownPerDisplayPixel   = gl.canvas.height / canvasDisplayHeight;

var imageDrawWidth  = imageDisplayWidth  * canvasPixelsAcrossPerDisplayPixel;
var imageDrawHeight = imageDisplayHeight * canvasPixelsDownPerDisplayPixel;     

// Now we need to convert that to clip space

var clipWidth  = imageDrawWidth  / gl.canvas.width;
var clipHeight = imageDrawHeight / gl.canvas.height;

// Now, given a unit quad we can just scale it to fit that size.
var m = m4.identity();

// convert our square unit quad to something to match the image's aspect
m4.scale(m, [clipWidth, clipHeight, 1], m);

// move our unit square from 0,0 (the center) to the bottom, left corner
m4.translate(m, [-1, 1, 0], m);

// scale our unit square to cover the clip space
m4.scale(m, [2, -2, 1], m); 

var uniforms = {
  texture: tex,
  matrix: m,
};

gl.useProgram(programInfo.program);
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
twgl.setUniforms(programInfo, uniforms);
twgl.drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);

<script id="vs" type="notjs">
attribute vec4 position; 

uniform mat4 matrix; 
varying vec2 v_texcoord; 

void main() {
  gl_Position = matrix * position; 
  
  // using position since we know it's a unit quad 
  v_texcoord = position.xy;
}
</script>
<script id="fs" type="notjs">
precision mediump float; 

uniform sampler2D texture; 

varying vec2 v_texcoord; 

void main() { 
  gl_FragColor = texture2D(texture, v_texcoord); 
}
</script>
<script src="https://twgljs.org/dist/twgl-full.min.js"></script>
<canvas id="c" width="50" height="100" style="width: 300px; height: 150px; border: 1px solid black;"></canvas>