Processing 018 Shader

Processing 018 Shader

1 processing 中可以用调用 glsl shader进行渲染

PShader shader;
PImage img;

void setup() {
  clearImage();
  size(680, 480, P2D);
  noStroke();
  img = loadImage("1.jpg");
  shader = loadShader("shader.frag");
}

void draw() {
  shader.set("u_resolution", float(width), float(height));
  shader.set("u_time", millis() / 500.0);
  shader.set("u_tex0",img);
  shader(shader);
  beginShape();
  vertex(0, 0);
  vertex(width, 0);
  vertex(width,height);
  vertex(0,height);
  endShape(CLOSE);
}

2 shader 用法

通过 loadShader 可以加载一个shader 文件，通过 shader.set 向 shader 中传递变量，本代码中传递了窗体大小、运行时间、和一张图片。

uniform vec2 u_resolution;
uniform float u_time;
uniform sampler2D u_tex0;

void main() {
    vec2 st = gl_FragCoord.xy / u_resolution.xy;
    st.y = 1 - st.y;
    vec3 off = log(vec3(pow(length(st) + 0.992, 1.2)));
    off = fract(off * 5.0 + u_time / 10.) * 1.1;
    st = st + 0.005 * vec2(sin(u_resolution.x * st.x * off.x * 0.05 + u_time), cos(u_resolution.y * st.y * off.x * .05 + u_time));
    vec3 color = texture2D(u_tex0, st).xyz;
    gl_FragColor = vec4(color, 1.0);
}

代码中 uniform 变量是通过processing程序传递过来的，gl_FragCoord 表示每一个片元的坐标，st 是纹理采样坐标，采样图片对应坐标，加上适量的偏移形成水波效果。gl_FragColor是最终的显示颜色。
shader部分比较复杂，还要进一步研究

3 效果