GLSL Shader-2D对象的Coverflow反射 [英] GLSL Shader - Coverflow Reflection of a 2D object

问题描述

我想编写一个着色器，用于创建类似于用于Coverflow的图像的反射.

I want to write a shader that creates a reflection of an image similiar to the ones used for coverflows.

// Vertex Shader
uniform highp mat4 u_modelViewMatrix;
uniform highp mat4 u_projectionMatrix;
attribute highp vec4 a_position;
attribute lowp vec4 a_color;
attribute highp vec2 a_texcoord;
varying lowp vec4 v_color;
varying highp vec2 v_texCoord;
mat4 rot = mat4( -1.0, 0.0, 0.0, 0.0,
                  0.0, -1.0, 0.0, 0.0,
                  0.0, 0.0, 1.0, 0.0,
                  0.0, 0.0, 0.0, 1.0 );
void main()
{
  gl_Position = (u_projectionMatrix * u_modelViewMatrix) * a_position * rot;
  v_color = a_color;
  v_texCoord = a_texcoord;
}

// Fragment Shader
varying highp vec2 v_texCoord;
uniform sampler2D u_texture0;
uniform int slices;
void main()
{
  lowp vec3 w = vec3(1.0,1.0,1.0);
  lowp vec3 b = vec3(0.0,0.0,0.0);
  lowp vec3 mix = mix(b, w, (v_texCoord.y-(float(slices)/10.0)));
  gl_FragColor = texture2D(u_texture0,v_texCoord) * vec4(mix, 1.0);
}

但是此着色器正在创建以下内容: 当前结果 而且我不知道如何水平翻转"图像，并且在旋转矩阵中尝试了很多不同的参数(甚至尝试使用所谓的镜像矩阵")，但是我不知道如何在图像底部反射图像.原始图像.

But this shader is creating the following: current result And I dont know how to "flip" the image horizontally and I tried so many different parameters in the rotation matrix (I even tried to use a so called "mirror matrix") but I dont know how to reflect the image on the bottom of original image.

推荐答案

如果您谈论的是images.google.com为"coverflow"结果返回的内容，那么您根本不需要旋转矩阵.

If you're talking about what images.google.com returns for "coverflow" result, then you don't need rotation matrix at all.

void main()
{
  gl_Position = (u_projectionMatrix * u_modelViewMatrix) * a_position;
  v_color = a_color;
  v_texCoord = vec2(a_texcoord.x, 1.0 - a_texcoord.y);
}

只需将其垂直翻转即可.

Simply flip it vertically.

如果您坚持使用矩阵并想制作一个镜子"着色器(将其作为对象，然后将其放置在地板"下进行反射)，则需要镜子矩阵(不要忘记调整正面/背面剔除):

If you insist on using matrix and want to make a "mirror" shader (the one that takes it object, and puts it under "floor" to make reflection) then you need mirror matrix (don't forget to adjust frontface/backface culling):

mat4(1.0, 0.0, 0.0, 0.0,
    0.0, -1.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0 );

而且您必须知道地板在哪里.

AND you must know where the floor is.

gl_Position = (u_projectionMatrix * u_modelViewMatrix) * (a_position * mirrorMatrix - floor);

或者，您可以将发言权平移放入相同的矩阵中.基本上，要反映任意高度，您需要组合三个转换(伪代码).

Alternatively you could put floor translation into same matrix. Basically, to mirror against arbitrary height, you need to combine three transforms (pseudocode).

translate(0, -floorHeight, 0) * scale(1, -1, 1) * translate(0, floorHeight, 0).

并将它们放入矩阵.

另外，将modelView矩阵分为"model"(对象/世界)和"view"矩阵也可能是有意义的.这样，执行这样的转换将变得更加容易.

Also it might make sense to split modelView matrix into "model"(object/world) and "view" matrices. This way it'll be easier to perform transformations like these.

这篇关于GLSL Shader-2D对象的Coverflow反射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！