shader-art+webgl实现彩色柔和光束波动动画效果代码
代码语言:html
所属分类:动画
代码描述:shader-art+webgl实现彩色柔和光束波动动画效果代码
代码标签: shader-art webgl 彩色 柔和 光束 波动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin:0; height: 100vh; } shader-art { display: block; width: 100vw; height: 100vh; } </style> </head> <body translate="no"> <shader-art autoplay role="img" aria-label="An animated gradient that looks like a laser beam, using the trans pride colors. The beam does not run in a straight line, but in curves."> <script type="buffer" name="position" data-size="2"> [-1, 1, -1,-1, 1,1, 1, 1, -1,-1, 1,-1] </script> <script type="buffer" name="uv" data-size="2"> [ 0, 0, 0, 1, 1,0, 1, 0, 0, 1, 1, 1] </script> <script type="vert"> precision highp float; attribute vec4 position; attribute vec2 uv; varying vec2 vUv; varying vec4 vPos; void main() { vUv = uv; vPos = position; gl_Position = position; } </script> <script type="frag"> precision highp float; varying vec2 vUv; varying vec4 vPos; uniform vec2 resolution; uniform float time; #define SPEED 1.2 #define CYAN vec3(0,1.,1.) #define RED vec3(1.,0,0) #define GREEN vec3(0,1.,0) #define BLUE vec3(0,0, 1.) float f(float x) { return sin(x + time * SPEE.........完整代码请登录后点击上方下载按钮下载查看
网友评论0