webgl GLea.js 催眠漩涡特效着色器代码

Hypnotizing Cyclone effects in webgl，经典催眠图形动画。

webgl, glea, shader

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1377
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<canvas></canvas>
<script type="x-shader/vertex">
precision mediump float;
attribute vec2 position;

void main () {
  gl_Position = vec4(position, 0, 1.0);
}
</script>
<script type="x-shader/fragment">
precision highp float;
uniform float time;
uniform float width;
uniform float height;

const int ITERS = 60;
const float PI = 3.141592654;
const float DEG = PI / 180.0;

vec2 coords() {
  float vmin = min(width, height);
  return vec2((gl_FragCoord.x - width * .5) / vmin,
              (gl_FragCoord.y - height * .5) / vmin);
}

vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
              p.x * sin(a) + p.y * cos(a));
}

vec2 repeat(in vec2 p, in vec2 c) {
  return mod(p, c) - 0.5 * c;
}

int gpf(int num) {
  int result = 1;
  int limit = int(sqrt(float(num)));
  for (int i = 0; i < ITERS; i++) {
    int factor = (i == 0) ? 2 : (1 + i * 2); 
    if (factor > limit) {
      break;
    }
    for (int j = 0; j < ITERS; j++) {
      if (int(mod(float(num), float(factor))) != 0) {
        break;
      }
      num = int(num / factor);
      result = factor;
    }
    if (factor > num) {
      break;
    }
  }
  if (num > 1) {
    result = num;
  }
  return result;
}

vec2 complexMul(vec2 a, vec2 b) {
  return vec2(a.x * b.x - a.y * b.y, a.y * b.x + a.x * b.y);
}

vec2 complexPow(vec2 a, int n) {
  vec2 result = vec2(1.0, 0.0);
  for (int i = 0; i < ITERS; i++) {
    if (i == n) {
      break;
    }
    result = complexMul(result, a);
  }
  return result;
}

// exponential generating function EG(gpf; z) = Σn=1∞ gpf(n) z^n / (n+1)!
vec2 exponential(vec2 p) {
  vec2 x = vec2(0.0, 0.0);
  int j = 1;
  for (int i = 0; i < 13; i++) {
    j = j * (i + 2);
    x = x + float(gpf(i + 1)) * complexPow(p * 8.0, int(i + 1)) / float(j);
  }
  return x;
}

vec3 palette(float x) {
  return vec3(.5 + .5 * sin(time * .1+ x * 2.0), .5 + .5 * sin(2.0 + time * .05 + x), .5 + .5 * sin(time *.1 + x + 1.0));
}
  
  
void main () {
  vec2 p00 = coords();
  vec2 p0 = rotate(p00 + sin(time * .1) * .2, time *.05);
  vec2 exp = exponential(p0 * (.3 + sin(time * .1) * .1));
  vec3 col = palette(
     .5 * sin(log(pow(length(exp),  
                      1.0 + 5.0 * sin(time *.05))) - 2.0 * atan(exp.y, exp.x) + time*.4));
  gl_FragColor = vec4(col, 1.0);
}  
</script>
<script type="module">
import GLea from '/uploads/2001/glea.mjs';
const frag = document.querySelector('[type="x-shader/fragment"]').textContent;
const vert = document.querySelector('[type="x-shader/vertex"]').textContent;
const glea = new GLea({
    shaders: [
        GLea.fragmentShader(frag),
        GLea.vertexShader(vert)
    ],
    buffers: {
        'position': GLea.buffer(2, [1, 1, -1, 1, 1, -1, -1, -1])
    }
}).create();

window.addEventListener('resize', () => {
    glea.resize();
});

function loop(time) {
    const {
        gl
    } = glea;
    glea.clear();
    glea.uni('width', glea.width);
    glea.uni('height', glea.height);
    glea.uni('time', time * .005);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(loop);
}

loop(0);
</script>

Hypnotizing Cyclone effects in webgl，经典催眠图形动画。

webgl, glea, shader

编辑器支持Emmet

快捷键

Hypnotizing Cyclone effects in webgl，经典催眠图形动画。

webgl, glea, shader

WebGL Three.js梦幻的彩色云霞特效着色器代码

WebGL Three.js破损的星球特效着色器代码

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：