three+maath+webgl实现彩色点汇集动画效果代码
代码语言:html
所属分类:动画
代码描述:three+maath+webgl实现彩色点汇集动画效果代码
代码标签: three maath webgl 彩色 点 汇集 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0px; cursor: pointer; } </style> </head> <body > <div id="shader"></div> <script id="vertex" type="x-shader/x-vertex"> varying vec2 vUv; uniform float uTime; attribute vec3 position2; varying vec3 pos; uniform float u_progress; varying float size; void coswarp(inout vec3 trip, float warpsScale ){ trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (uTime * .015)); trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (uTime * .015)); trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (uTime * .015)); } void main(){ vec4 modelPosition = modelMatrix * vec4(position, 1.); modelPosition.y += sin((uTime * .02) + length(modelPosition.xy)) * 8.; modelPosition.z += sin((uTime * .02) + length(modelPosition.xy)) * 8.; vec4 modelPosition2 = modelMatrix * vec4(position, 1.); vec4 viewPosition = viewMatrix * modelPosition; vec4 projectionPosition = projectionMatrix * viewPosition; gl_Position = projectionPosition; gl_PointSize = (250. * 1.-(length(modelPosition.xy))) ; gl_PointSize *= (1.0/ -viewPosition.z); vUv = uv; pos = modelPosition.xyz; size = gl_PointSize; } </script> <script id="fragment" type="x-shader/x-fragment"> uniform float uTime; varying vec2 vUv; uniform vec2 uResolution; varying vec3 pos; const float PI = 3.1415926535897932384626433832795; varying float size; vec2 rotate2D (vec2 _st, float _angle) { _st -= 0.5; _st = mat2(cos(_angle),-sin(_angle), sin(_angle),cos(_angle)) * _st; _st += 0.5; return _st; } void coswarp(inout vec3 trip, float warpsScale ){ trip.xyz += warpsScale * .1 * sin(3. * trip.yzx + (uTime * .15)); trip.xyz += warpsScale * .05 * sin(uTime * trip.yzx + (uTime * .15)); trip.xyz += warpsScale * .025 * sin(17. * trip.yzx + (uTime * .15)); } void uvRipple(inout vec2 uv, float intensity){ vec2 p = uv -.5; float cLength=length(p); uv= uv +(p/cLength)*cos(cLength*15.0-uTim.........完整代码请登录后点击上方下载按钮下载查看
网友评论0