WebGl在着色器中旋转纹理

我正在使用webgl将蒙版图像绑定到常规图像。蒙版图像提供常规图像透明度

我能够成功地将两幅图像作为纹理上传，但当我运行程序时，我的颜色纹理和哑光纹理没有对齐。正如你在下面的图片中所看到的，黑色应该全部消失了，但它看起来是缩放和翻转的

我发现这很奇怪，因为颜色通道和alpha通道都使用相同的纹理

我的问题是如何在着色器中旋转/调整alpha通道的大小？或者我必须创建一个新的纹理坐标平面来映射alpha通道

以下是我的代码供参考：

vertexShaderScript = [
  'attribute vec4 vertexPos;',
  'attribute vec4 texturePos;',
  'varying vec2 textureCoord;',

  'void main()',
  '{',
  '  gl_Position = vertexPos;',
  '  textureCoord = texturePos.xy;',
  '}'
].join('\n');

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,  textureCoord).r;',
  '  gl_FragColor = vec4(y, u, v, a);',
  '}'
].join('\n');

---

如果您只想翻转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;

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

---

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

我没有意识到您可以直接在text2D参数列表中声明新的vec并进行数学运算。谢谢你，这很有效！