three打造多彩磷光波动动画效果

代码语言:html

所属分类:动画

代码描述:three打造多彩磷光波动动画效果

代码标签: 磷光 波动 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
*{
          padding: 0;
          margin: 0;
      }
</style>

</head>

<body>
<div id="container"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
          void main() {
              gl_Position = vec4( position, 1.0 );
          }
      </script>
<script id="fragmentShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 mouse;
uniform vec2 resolution;
      float noise(vec2 p) {
        p=(p);
        return fract(sin(p.x*45.11+p.y*97.23)*878.73+733.17)*2.0-1.0;
      }        

//参考: http://glslsandbox.com/e#65924.0

void main( void ){
        
    vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
          
    vec2 fMosaicScal = vec2(2.0,20.0);
    vec2 vScreenSize = vec2(resolution.x,resolution.y);
    
    vec4 o = gl_FragColor;    
    vec3 u = normalize(vec3(2.0*gl_FragCoord.xy-resolution.xy,resolution.xy.x))*1.2;
        
    u.x = floor(u.x * vScreenSize.x / fMosaicScal.x) / (vScreenSize.x / fMosaicScal.x);
    u.y = floor(u.y * vScreenSize.y / fMosaicScal.y) / (vScreenSize.y / fMosaicScal.y);
    u.z = floor(u.z * vScreenSize.y / fMosaicScal.y) / (vScreenSize.y / fMosaicScal.y);     
   
      
    for(float i=0.;i<4.;i++){
        u.y+=abs(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0