Как смешивать текстуры с разным размером в WebGL - PullRequest
Новая
       4

Как смешивать текстуры с разным размером в WebGL

0 голосов
/ 24 июня 2018

У меня 2 картинки разных размеров. Скажем, bgImage - это 300 * 200, а modelImage - это 50 * 20. Это может быть описано ниже, где x и y могут быть (100, 50)

Вот мой код glsl:

против 

attribute vec4 a_position;
attribute vec2 a_texCoord;

uniform float u_flipY;

varying vec2 v_texCoord;

void main() {
   gl_Position = a_position * vec4(1.0, u_flipY, 0.0, 1.0);
   v_texCoord = a_texCoord;
}

фс: 

  precision mediump float;



  uniform sampler2D u_bgImage;
  uniform sampler2D u_modelImage;

  varying vec2 v_texCoord;

  vec3 compose(vec4 bgRGBA, vec4 modelRGBA) {
     vec3 bgRGB = bgRGBA.rgb;
     float alpha = modelRGBA.a;
     vec3 modelRGB = modelRGBA.rgb;

     return modelRGB + bgRGB * (1.0 - alpha);
  }

  void main() {
     vec4 bgRGBA = texture2D(u_bgImage, v_texCoord);
     vec4 modelRGBA = texture2D(u_coverImage, v_texCoord);
     gl_FragColor = vec4(compose(bgRGBA, modelRGBA), 1.0);
  }

Похоже, что при рендеринге webgl bgImage и modelImage всегда будут иметь одинаковый размер. Так как же смешать текстуры разных размеров?

...