html5 canvas基于webgl制作的仿ps羽化笔刷液态动画特效，羽化笔刷跟随鼠标移动绘画，很有梦幻效果。

查看演示

下载资源：

5

次 下载资源

下载积分：

20

积分

js代码

attribute vec4 a_position;

uniform mat4 u_modelViewMatrix;

uniform mat4 u_projectionMatrix;

void main() {

gl_Position = a_position;

}

precision highp float;

uniform vec2 u_resolution;

uniform vec2 u_mouse;

uniform float u_time;

uniform sampler2D u_noise;

uniform sampler2D u_buffer;

uniform bool u_bufferpass;

#define PI 3.141592653589793

#define TAU 6.283185307179586

vec2 getScreenSpace() {

vec2 uv = (gl_FragCoord.xy) / min(u_resolution.y, u_resolution.x);

return uv;

}

#define pow2(x) (x * x)

const int samples = 2;

const float sigma = float(samples) * 0.25;

float gaussian(vec2 i) {

return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));

}

vec3 blur(sampler2D sp, vec2 uv, vec2 scale) {

vec3 col = vec3(0.0);

float accum = 0.0;

float weight;

vec2 offset;

for (int x = -samples / 2; x < samples / 2; ++x) {

for (int y = -samples / 2; y < samples / 2; ++y) {

offset = vec2(x, y);

weight = gaussian(offset);

col += texture2D(sp, uv + scale * offset).rgb * weight;

accum += weight;

}

}

return col / accum;

}

const float blurStrength = 2.;

const float blurMultiplier = 0.998;

void main() {

vec2 uv = getScreenSpace();

vec2 sample = gl_FragCoord.xy / u_resolution;

vec3 colour = vec3(sin(uv.x)*.5+.5, sin(uv.y)*.5+.5, 1.);

float s = texture2D(u_buffer, sample).r;

vec2 ps = vec2(1.0) / u_resolution.xy;

if(u_bufferpass) {

s = (blur(u_buffer, sample + vec2(.001), ps*blurStrength) * blurMultiplier).r;

float c = s * .999 + smoothstep(length(ps)*20., .0, length(uv - u_mouse)*.5) * .5;

colour = vec3(c);

} else {

colour = mix(vec3(0.2), colour, sin(s)*.5+.5);

colour *= colour*2.;

}

gl_FragColor = vec4(colour,1.0);

}