GLSL 偏移多纹理

Posted

技术标签:

【中文标题】GLSL 偏移多纹理【英文标题】:GLSL offsetting multitexture 【发布时间】:2015-03-05 20:37:10 【问题描述】:

如何在 GLSL 着色器中执行类似的操作?

vec2 attribute texture_sky;
vec2 attribute texture_floor;

if(texture_sky) gl_position = position+Xoffset;
else gl_position = position; 

我想将一个纹理移到另一个之上。是否可以使用顶点着色器?

【问题讨论】:

改进格式和语法 使用顶点着色器绝对可以移动顶点。但我不完全明白你想做什么。 if 没有任何意义。主要功能在哪里? Xoffset 的类型是什么? 我在那里输入的是伪代码:不是实际代码。更多解释;假设我有两个纹理(2 个图像绑定为纹理)彼此重叠。我想显示一个具有 X+0.5 位移的纹理,而另一个保持不变。我面临的问题是区分着色器代码中的两个纹理。 【参考方案1】:

我在那里输入的是伪代码:不是实际代码。更多解释;假设我有两个纹理(2 个图像绑定为纹理)彼此重叠。我想显示一个具有 X+0.5 位移的纹理,而另一个保持不变。我面临的问题是区分着色器代码中的两个纹理。

这不是单独使用顶点着色器可以做到的。

您可以在顶点着色器中对纹理坐标应用偏移量,但您肯定不会更改顶点位置。多重纹理的整个想法是一次应用多个纹理,避免绘制多边形的两个不同副本。

在硬件能够一次采样多个纹理 (Riva TNT) 之前,您实际上必须多次绘制每个多边形并混合结果才能应用多个纹理。现在,您只需使用片段着色器就可以了,因为 OpenGL 3.0 要求所有硬件支持至少 16 个同时纹理。

非常粗略,伪代码如下所示:

  顶点着色器

#version 110

// Input texture coordinates (from vertex buffer)
attribute vec2 texture_sky;
attribute vec2 texture_floor;

// Output texture coordinates (to fragment shader)
varying vec2 sky_tc;
varying vec2 floor_tc;

// Your offset
uniform vec2 Xoffset;

void main (void) 
  sky_tc   = texture_sky + Xoffset;
  floor_tc = texture_floor;

  gl_Position = ...;

  片段着色器

#version 110

// Input texture coordinates (from vertex shader)
varying vec2 sky_tc;
varying vec2 floor_tc;

// Samplers
uniform sampler2D sky_tex;
uniform sampler2D floor_tex;

void main (void) 
  vec4 sky   = texture2D (sky_tex,   sky_tc);
  vec4 floor = texture2D (floor_tex, floor_tc);

  //
  // You have to blend these, so pick one of the following...
  //

  // Additive Blending (GL_ONE, GL_ONE):
  gl_FragColor = sky + floor;

  // or

  // Alpha Blending (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA):
  gl_FragColor = mix (sky, floor, sky.a);

【讨论】:

以上是关于GLSL 偏移多纹理的主要内容,如果未能解决你的问题,请参考以下文章

ThreeJS纹理偏移动画

OpenGL:使用 FBO 和视口偏移问题渲染到纹理

GameObject上的材质中使用的移位/偏移纹理?

GLSL 多纹理 - 混合纹理

threejs5plane纹理涉及+平铺偏移流动

Sketch 03/26