WebGL旋转着色器中的纹理

Question

我正在使用webgl将无光泽图像绑定到常规图像。磨砂图像使常规图像透明。

我能够成功地将两个图像都作为纹理上传，但是当我运行该程序时，我的颜色纹理和遮罩纹理没有对齐。正如您在下面的图片中看到的那样，黑色应该全部消失了，但是它似乎已缩放并翻转。

我发现非常奇怪，因为“颜色”通道和“ alpha”通道都使用相同的纹理。

我的问题是如何在着色器中旋转/调整Alpha Chanel的大小？还是我必须制作一个新的纹理坐标平面以将Alpha通道映射到该平面上。

作为参考，这是我的以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="text" pattern="[0-9]*" data-type="date" maxLength="10" id="date" class="form-control" placeholder="DD/MM/YYYY">

Answer 1

如果您只想翻转alpha纹理坐标

const vertexShaderScript = `
  attribute vec4 vertexPos;
  attribute vec4 texturePos;
  varying vec2 textureCoord;

  void main()
  {
    gl_Position = vertexPos;
    textureCoord = texturePos.xy;
  }
`;

const fragmentShaderScript = `
  precision highp float;
  varying highp vec2 textureCoord;
  uniform sampler2D ySampler;
  uniform sampler2D uSampler;
  uniform sampler2D vSampler;
  uniform sampler2D aSampler;
  uniform mat4 YUV2RGB;

  void main(void) {
    highp float y = texture2D(ySampler,  textureCoord).r;
    highp float u = texture2D(uSampler,  textureCoord).r;
    highp float v = texture2D(vSampler,  textureCoord).r;
    highp float a = texture2D(aSampler,  vec2(textureCoord.x, 1. - textureCoord.y).r;
    gl_FragColor = vec4(y, u, v, a);
  }
`;

但是在一般情况下，由您决定如何提供或生成纹理坐标。您可以随意操作它们。有人问我如何使值3变为3，1 + 1 + 1，2 + 1，5-2，15/5，300/100，7 * 30/70，4 ** 2- （3 * 4 +1）

更改纹理坐标的最通用方法是将它们乘以矩阵，就像位置一样

 uniform mat3 texMatrix;
 attribute vec2 texCoords;

 ... 

 vec2 newTexCoords = (texMatrix * vec3(texCoords, 1)).xy;

然后使用与纹理坐标位置相同的矩阵数学类型。

This article给出了一些通过纹理矩阵操纵纹理坐标的示例