three+webgl实现一个彩虹飘飘动画效果代码

代码语言:html

所属分类:动画

代码描述:three+webgl实现一个彩虹飘飘动画效果代码

代码标签: 彩虹 飘飘 动画 效果

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

<html lang="en"><head>

  <meta charset="UTF-8">

<style>
body {
  margin: 0;
}
</style>


</head>

<body >
  <div id="container"></div>

<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
  #define PI 3.14159265359

  uniform float u_time;
  uniform vec2 u_resolution;

  float V(float v) {
    return v/255.0;
  }

  float sharpRainbow(float y, vec2 st, float offset, float width) {

    float edge = y-(offset*width);
    return step(edge-width, st.y) - step(edge, st.y);
  }

  void main() {

    //original 1978 colors
    //https://en.wikipedia.org/wiki/Rainbow_flag_(LGBT)
    vec3 pink   = vec3(V(255.0),    V(105.0),   V(180.0));
    vec3 red    = vec3(V(255.0),    0.0,        0.0);
    vec3 orange = vec3(V(255.0),    V(142.0),   0.0);
    vec3 yellow = vec3(V(255.0),    V(255.0),   0.0);
    vec3 green  = vec3(0.0,         V(142.0),   0.0);
    vec3 turq   = vec3(0.0,         V(192.0),   V(192.0));
    vec3 indigo = vec3(V(64.0),     0.0,        V(152.0));
    vec3 violet = vec3(.........完整代码请登录后点击上方下载按钮下载查看

网友评论0