Fatal编程技术网
  • matrix/
  • Matrix 如何在webgl中缩放纹理？

Matrix 如何在webgl中缩放纹理？

matrix webgl

Matrix 如何在webgl中缩放纹理？,matrix,webgl,aspect-ratio,Matrix,Webgl,Aspect Ratio,我有一个尺寸为800x600的纹理。如何在webgl上以另一种尺寸缩放它，并保持原始纵横比？假设绘图缓冲区和画布具有相同的尺寸。如果WebGL只关心ClipsAppe坐标，您可以只绘制一个2个单位的四边形（-1到+1），并根据画布的纵横比和图像的纵横比对其进行缩放 换句话说 const canvasAspect = canvas.clientWidth / canvas.clientHeight; const imageAspect = image.width / image.heigh

我有一个尺寸为800x600的纹理。如何在webgl
上以另一种尺寸缩放它，并保持原始纵横比？假设绘图缓冲区和画布具有相同的尺寸。

如果WebGL只关心ClipsAppe坐标，您可以只绘制一个2个单位的四边形（-1到+1），并根据画布的纵横比和图像的纵横比对其进行缩放

换句话说

  const canvasAspect = canvas.clientWidth / canvas.clientHeight;
  const imageAspect = image.width / image.height;

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
请注意，您需要决定如何适合图像
scaleY=1
意味着图像将始终垂直适合，而水平适合任何结果

如果希望它水平安装，则需要将scaleX设为1

  let scaleX = 1;
  let scaleY = canvasAspect / imageAspect;
如果希望它包含，则

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX > 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX < 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }
如果您想让它覆盖，那么

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX > 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX < 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }


垂直安装
水平安装
包含
盖
鉴于WebGL只关心ClipsAppe坐标，您只需绘制一个2个单位的四边形（-1到+1），并根据画布的纵横比和图像的纵横比对其进行缩放

换句话说

  const canvasAspect = canvas.clientWidth / canvas.clientHeight;
  const imageAspect = image.width / image.height;

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
请注意，您需要决定如何适合图像
scaleY=1
意味着图像将始终垂直适合，而水平适合任何结果

如果希望它水平安装，则需要将scaleX设为1

  let scaleX = 1;
  let scaleY = canvasAspect / imageAspect;
如果希望它包含，则

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX > 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX < 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }
如果您想让它覆盖，那么

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX > 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }

  let scaleY = 1;
  let scaleX = imageAspect / canvasAspect;
  if (scaleX < 1) {
    scaleY = 1 / scaleX;
    scaleX = 1;
  }


垂直安装
水平安装
包含
盖
我不能真正理解这部分：
v_texcoord=position.xy*.5+.5（事实上，如果我忽略它，我会在重复边的情况下拉伸纹理）。位置坐标从-1到+1。乘以.5，再加上.5，它们将从0变为1，这就是您希望在四边形上显示整个纹理的内容。看，我能得到一些关于你是如何得到缩放公式的提示吗？我最近遇到了一个缩放问题。我在x方向拉伸，也就是说，用一些值水平拉伸，并做scaleY=scaleX/图像的纵横比。这里scaleX只是一些数字。图像是缩放的，但看起来在x方向拉伸有两个方面。画布的纵横比和图像的纵横比（还有四坐标的纵横比，但在上面的示例中，其纵横比为1.0，因此可以忽略）。设置scaleY=1和scaleX=1/canvasAspect将使四边形在画布上绘制时成为方形。但我们需要将其缩放为画布上的imageAspect。你应该在一个新问题中将你的代码作为一个片段发布。我真的不理解这部分：
v_texcoord=position.xy*.5+.5（事实上，如果我忽略它，我会在重复边的情况下拉伸纹理）。位置坐标从-1到+1。乘以.5，再加上.5，它们将从0变为1，这就是您希望在四边形上显示整个纹理的内容。看，我能得到一些关于你是如何得到缩放公式的提示吗？我最近遇到了一个缩放问题。我在x方向拉伸，也就是说，用一些值水平拉伸，并做scaleY=scaleX/图像的纵横比。这里scaleX只是一些数字。图像是缩放的，但看起来在x方向拉伸有两个方面。画布的纵横比和图像的纵横比（还有四坐标的纵横比，但在上面的示例中，其纵横比为1.0，因此可以忽略）。设置scaleY=1和scaleX=1/canvasAspect将使四边形在画布上绘制时成为方形。但我们需要将其缩放为画布上的imageAspect。您应该在新问题中以代码片段的形式发布代码。