glfx 光圈效果

最新推荐文章于 2024-05-17 15:47:31 发布

阿豪boy

最新推荐文章于 2024-05-17 15:47:31 发布

阅读量75

点赞数

文章标签： css3 shader oracle 数据可视化 html

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064492

版权

原文链接: glfx 光圈效果

上一篇: glfx 色相和饱和度调节

下一篇: glfx 聚焦模糊

两个参数都是 [0, 1], 调节大小和边缘模糊程度

const vert = `
precision highp float;
attribute vec2 vertex;
attribute vec2 uv;
varying vec2 texCoord;
void main() {
  texCoord=uv;
  gl_Position = vec4(vertex, 0.0, 1.0);
}
`;

const frag = `
precision highp float;
uniform sampler2D texture;
uniform float size;
uniform float amount;
varying vec2 texCoord;
void main() {
  vec4 color = texture2D(texture, texCoord);
  float dist = distance(texCoord, vec2(0.5, 0.5));
  color.rgb *= smoothstep(0.8, size * 0.799, dist * (amount + size));
  gl_FragColor = color;
}
`;