webgl滤镜水彩过滤效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #container { width: 60vw; height: 33vw; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 7px solid rgba(255, 255, 255, 0.1); box-shadow: 0px 0px 10px #00000038; cursor: pointer; } .help { font-family: sans-serif; position: absolute; bottom: 10px; text-align: center; width: 100%; color: rgba(0, 0, 0, 0.4); } </style> </head> <body translate="no"> <script id="fragmentShader" type="x-shader/x-fragment"> varying vec2 vUv; uniform float dispFactor; uniform float dispFactor2; uniform float dispFactor3; uniform float dispFactor4; uniform float dispFactor5; uniform sampler2D map; uniform sampler2D map3; vec4 layer(vec4 foreground, vec4 background) { return foreground * foreground.a + background * (1.0 - foreground.a); } vec2 rotateUV(vec2 uv, float rotation) { float mid = 0.5; return vec2( cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid, cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid ); } void main() { vec4 color = vec4(0.0, 0.0, 0.0, 0.0); vec4 OG = texture2D(map, vUv); OG.a = 0.0; vec2 scaleCenter = vec2(0.5, 0.5); for(float i = 0.0; i < 10.0; i++) { // float rnd = random( st ); vec2 myUV = vUv; myUV = (myUV - scaleCenter) * ((i * 0.075)) + scaleCenter; myUV = rotateUV(myUV, (2.0) * (i + 1.0)); vec4 image = texture2D(map3, myUV); image.a *= step(myUV.x, 1.)* step(0., myUV.x) * step(myUV.y, 1.) * step(0., myUV.y); image.rgb += 1.0; // image.rgb += 1.0 - (dispFactor2 / 10.0); if(i == 0.0 || i == 9.0) { image.rgb -= (dispFactor); } if(i == 1.0 || i == 8.0) { image.rgb -= (dispFactor2); } if(i == 2.0 || i == 7.0) { image.rgb -= (dispFactor3); } if(i == 3.0 || i == 6.0) { image.rgb -= (dispFactor4); } if(i == 4.0 || i == 5.0) { image.rgb -= (dispFactor5); } color = layer(image, color); } OG.a = 1.0 - color.r; gl_FragColor = OG; } </script> <script id="fragmentShader2" type="x-shader/x-fragment"> varying vec2 vUv; uniform float dispFactor; uniform float dispFactor2; uniform float dispFactor3; uniform float dispFactor4; uniform float dispFactor5; uniform sampler2D map; uniform sampler2D map3; vec4 layer(vec4 foreground, vec4 background) { return foreground * foreground.a + background * (1.0 - foreground.a); } vec2 rotateUV(vec2 uv, float rotation) { float mid = 0.5; return vec2( cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid, cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid ); } void main() { vec4 color = vec4(0.0, 0.0, 0.0, 0.0); vec4 OG = texture2D(map, vUv); // OG.a -= 1.0; vec2 scaleCenter = vec2(0.5, 0.5); for(float i = 0.0; i < 10.0; i++) { vec2 myUV = vUv; myUV = (myUV - scaleCenter) * ((i * 0.075)) + scaleCenter; myUV = rotateUV(myUV, (2.0) * (i + 1.0)); vec4 image = texture2D(map3, myUV); image.a *= step(myUV.x, 1.)* step(0., myUV.x) * step(myUV.y, 1.) * step(0., myUV.y); image.rgb += 1.0; // image.rgb += 1.0 - (dispFactor2 / 10.0); if(i == 0.0 || i == 9.0) { image.rgb -= (dispFactor); } if(i == 1.0 || i == 8.0) { image.rgb -= (dispFactor2); } if(i == 2.0 || i == 7.0) { image.rgb -= (dispFactor3); } if(i == 3.0 || i == 6.0) { image.rgb -= (dispFactor4); } if(i == 4.0 || i == 5.0) { image.rgb -= (dispFactor5); } color = layer(image, color); } float alpha = mix(OG.a, 0.0, color.r); gl_FragColor = vec4(OG.rgb, alpha); } </script> <script id="vertexShader" type="x-shader/x-vertex"> varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } </script> <div id="container"> </div> <div class="help">click on the frame</div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script> <script> var lastUpdate; var container; var camera, scene, renderer; var uniforms; function init() { // basic setup var width = window.innerWidth * 0.6; var height = window.innerWidth * 0.33; container = document.getElementById(&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0