WebGl вращает текстуру внутри шейдера - PullRequest
Новая
       25

WebGl вращает текстуру внутри шейдера

0 голосов
/ 01 сентября 2018

Я использую webgl, чтобы связать матовое изображение с обычным изображением. Матовое изображение обеспечивает обычную прозрачность изображения.

Мне удалось успешно загрузить оба изображения в виде текстур, но при запуске программы моя цветовая текстура и матовая текстура не совпадают. Как вы можете видеть на рисунке ниже, черный цвет должен исчезнуть, но вместо этого он выглядит масштабированным и перевернутым.

enter image description here

Я нахожу это очень странным, поскольку и "цветной" канал, и "альфа" канал используют одну и ту же текстуру.

Мой вопрос: как я могу вращать / изменять размер альфа-канала внутри шейдера? Или мне придется создать новую координатную плоскость текстуры, чтобы отобразить альфа-канал.

Для справки это мой код ниже: 

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');

1 Ответ

0 голосов
/ 01 сентября 2018

Если все, что вы хотите сделать, это перевернуть координату альфа-текстуры 

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;

И затем используя тот же тип математической математики, который вы использовали бы для позиций для координат текстуры.

В этой статье приведены некоторые примеры манипулирования текстурными кооридинатами с помощью текстурной матрицы

...