使用纹理方向和纹理速度/GLSL移动像素

我写了一个小程序来简单解释我的问题，我尝试用一个纹理来改变图片的像素位置，其中x分量是方向，另一个代表速度。最终的目标是使用CPU中的数据，在CPU中计算NAVIER-STROKE流体来移动GLSL中的像素。CPU代码在处理java库中。 我试图弄清楚我的代码中有什么错误，但我不明白像素转换是如何工作的。 首先，我在CPU中将颜色值的方向从0变换为255，然后在GPU中将这个方向变换为矢量方向，将这个方向乘以速度，并在1x1中缩放这个方向，但这不起作用。。。对不起，如果我的解释不是很容易理解，但英语不是很流利

处理：

PImage tex_velocity, tex_direction ;
PShader warping;
PImage img ;
int grid_w, grid_h ;
void setup() {
  size(600,375,P2D);
  // img = loadImage("pirate_small.jpg");
  img = loadImage("puros_girl_small.jpg");
  grid_w = 60 ;
  grid_h = 37 ;
  tex_velocity = createImage(grid_w,grid_h,RGB);
  tex_direction = createImage(grid_w,grid_h,RGB);  
  warping = loadShader("shader/warp/rope_warp_frag.glsl");
  noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
    noise_img(tex_direction, 360, .1, .1); // degree direction
}

void draw() {

    println(frameRate);
    if(frameCount%30 == 0) {
        noise_img(tex_velocity, 20, .1, .1); // max translate for the pixel
        noise_img(tex_direction, 360, .1, .1); // degree direction
    }

    warping.set("mode", 0) ;
    warping.set("texture",img);
    warping.set("roof_component_colour",g.colorModeX);
    warping.set("wh_ratio",1f/grid_w, 1f/grid_h);

  warping.set("vel_texture",tex_velocity);
  warping.set("dir_texture",tex_direction);

  shader(warping);

  image(img,0,0);
  resetShader();
  image(tex_velocity,5,5);
  image(tex_direction,grid_w +15 ,5 );
}


float x_offset, y_offset ;
void noise_img(PImage dst, int max, float ratio_x, float ratio_y) {
    noiseSeed((int)random(10000));
    for(int x = 0 ; x < dst.width ; x++) {
        x_offset += ratio_x ;
        for(int y = 0 ; y < dst.height ; y++) {
            y_offset += ratio_y ;
            float v = map(noise(x_offset,y_offset),0,1,0,max);
            v = (int)map(v,0,max,0,g.colorModeX);
            int c = color(v,v,v,g.colorModeA) ;
            dst.set(x,y,c);
        }
    }
}

---

纹理格式为

GL\u RGBA8

，这意味着每个颜色通道存储到中的一个字节，该字节是0到255范围内的整数数据类型。
但是，当您从纹理采样器读取文本时，您将得到一个介于0.0到1.0之间的浮点值。（见附件）

在片段着色器中，必须将从纹理采样器读取的颜色通道（在[0，1]中）映射到-PI到PI的范围。为此，可以使用GLSL函数，该函数在两个值之间进行线性插值：

vec2 translate(float fdir, float fvel) // fdir, fvel in [0.0, 1.0] 
{
  float angle = mix(-PI, PI, fdir);
  return vec2(cos(angle), sin(angle)) * fvel;
}

纹理坐标在[0,1]范围内。您必须将

平移

转换为纹理坐标。为此，您必须知道图像纹理的大小：

vec2 wh_ratio;     // 1f/grid_w, 1f/grid_h
vec2 imageTexSize; // size of "texture"

vec2 scale = imageTexSize * wh_ratio;
vec2 coord_dest = vertTexCoord.st + translation / scale;

---

Thx的帮助，现在我知道了GLSL中图片的图片大小：）

[0,1]

，但这不是预期的工作，我使用渲染大小或图片的必须扭曲，因此在我的想法中，

vec2 imageTexSize

是

img.width

和

img.height

是从

imageTexSize

uniform vec2 imageTexSize;
.../...
vec2 scale = imageTexSize * wh_ratio;
vec2 coord_dest = vertTexCoord.st + translation / scale;

结果是顶部图像

当我尝试这个代码时

vec2 ratio = gl_FragCoord.xy *wh_ratio;
vec2 coord_dest = vertTexCoord.st +translation / ratio ;

结果是中间图像

当我尝试这个的时候

vec2 coord_dest = vertTexCoord.st +translation / wh_ratio ;

结果是底部图像

很抱歉，我只发布了一张图片，因为我不能发布多张具有初学者声誉的图片：）

---

我修复了全窗口显示的显示错误，但现在是y坐标对平移进行了反转，这很奇怪，因为纹理速度和方向在y中没有反转，相反的y效果在解释中。这是在3模式下发生的。我试着像那样扭转协调

float coord_dest_y = mix(coord_dest.y, vertTexCoord.t, 0);
gl_FragColor = texture2D(texture, vec2(coord_dest.x, coord_dest_y));

但这并不是什么改变

我尝试：

float coord\u dest\u y=mix（coord\u dest.y，0，vertTexCoord.t）但这会让事情变得很奇怪，所以这不太管用

这里是完整的GLSL代码

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

#define PI 3.1415926535897932384626433832795

varying vec4 vertTexCoord;
uniform sampler2D texture;

uniform int mode;

uniform sampler2D vel_texture;
uniform sampler2D dir_texture;

uniform vec2 wh_grid_ratio;
uniform vec2 wh_renderer_ratio;


vec2 cartesian_coord(float angle) {
  float x = cos(angle);
  float y = sin(angle);
  return vec2(x,y);
}


vec2 translate(float fdir, float fvel) {
  //float angle = mix(PI, -PI,fdir);
  float angle = mix(fdir, PI, -PI);
  return cartesian_coord(angle) *fvel ;
}



void main() {
  vec2 ratio = gl_FragCoord.xy *wh_renderer_ratio;
  vec4 vel = texture2D(vel_texture, ratio);
  vec4 dir = texture2D(dir_texture, ratio);

  float direction = dir.x;
  float velocity = vel.x;
  vec2 translation = translate(direction,velocity);

  // mode 0 perfect
  // mode 1 interesting
  // mode 2 bizarre, but fun

  // mode 500 warp image direction
  // mode 501 warp image velocity

  // perfect
  if(mode == 0) {
    vec2 scale = gl_FragCoord.xy *wh_renderer_ratio; 
    vec2 coord_dest = vertTexCoord.st +translation /scale;
    float coord_dest_y = mix(coord_dest.y, vertTexCoord.t, 0);
    // float coord_dest_y = mix(coord_dest.y, 0, vertTexCoord.t);

    gl_FragColor = texture2D(texture, vec2(coord_dest.x, coord_dest_y));
    //  gl_FragColor = texture2D(texture, coord_dest);
  }

   // interesting
  if(mode == 1) {
    vec2 scale = gl_FragCoord.xy *wh_grid_ratio;
    vec2 coord_dest = vertTexCoord.st +translation /scale ;
    gl_FragColor = texture2D(texture, coord_dest);
  }

  // bizarre
  if(mode == 2) {
    vec2 coord_dest = vertTexCoord.st +translation /wh_grid_ratio;
    gl_FragColor = texture2D(texture, coord_dest);
  }


  // velocity
  if(mode == 500 ) {
    vec4 tex_colour = texture2D(vel_texture, vertTexCoord.st);;
    gl_FragColor = tex_colour;
  }
  // direction force field
  if(mode == 501) {
    vec4 tex_colour = texture2D(dir_texture, vertTexCoord.st);;
    gl_FragColor = tex_colour;

  }
}

这里是图片结果，可以看到最终扭曲中的光标错误y

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER

#define PI 3.1415926535897932384626433832795

varying vec4 vertTexCoord;
uniform sampler2D texture;

uniform int mode;

uniform sampler2D vel_texture;
uniform sampler2D dir_texture;

uniform vec2 wh_grid_ratio;
uniform vec2 wh_renderer_ratio;


vec2 cartesian_coord(float angle) {
  float x = cos(angle);
  float y = sin(angle);
  return vec2(x,y);
}


vec2 translate(float fdir, float fvel) {
  //float angle = mix(PI, -PI,fdir);
  float angle = mix(fdir, PI, -PI);
  return cartesian_coord(angle) *fvel ;
}



void main() {
  vec2 ratio = gl_FragCoord.xy *wh_renderer_ratio;
  vec4 vel = texture2D(vel_texture, ratio);
  vec4 dir = texture2D(dir_texture, ratio);

  float direction = dir.x;
  float velocity = vel.x;
  vec2 translation = translate(direction,velocity);

  // mode 0 perfect
  // mode 1 interesting
  // mode 2 bizarre, but fun

  // mode 500 warp image direction
  // mode 501 warp image velocity

  // perfect
  if(mode == 0) {
    vec2 scale = gl_FragCoord.xy *wh_renderer_ratio; 
    vec2 coord_dest = vertTexCoord.st +translation /scale;
    float coord_dest_y = mix(coord_dest.y, vertTexCoord.t, 0);
    // float coord_dest_y = mix(coord_dest.y, 0, vertTexCoord.t);

    gl_FragColor = texture2D(texture, vec2(coord_dest.x, coord_dest_y));
    //  gl_FragColor = texture2D(texture, coord_dest);
  }

   // interesting
  if(mode == 1) {
    vec2 scale = gl_FragCoord.xy *wh_grid_ratio;
    vec2 coord_dest = vertTexCoord.st +translation /scale ;
    gl_FragColor = texture2D(texture, coord_dest);
  }

  // bizarre
  if(mode == 2) {
    vec2 coord_dest = vertTexCoord.st +translation /wh_grid_ratio;
    gl_FragColor = texture2D(texture, coord_dest);
  }


  // velocity
  if(mode == 500 ) {
    vec4 tex_colour = texture2D(vel_texture, vertTexCoord.st);;
    gl_FragColor = tex_colour;
  }
  // direction force field
  if(mode == 501) {
    vec4 tex_colour = texture2D(dir_texture, vertTexCoord.st);;
    gl_FragColor = tex_colour;

  }
}