js canvas webgl实现三维十二面体粒子效果代码-html代码-BFW代码库

js canvas webgl实现三维十二面体粒子效果代码

代码语言：html

所属分类：粒子

代码描述：js canvas webgl实现三维十二面体粒子效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  



</head>

<body>

      <script>
Object.assign(window, {
  random: Math.random,
  sin: Math.sin });


Object.assign(window, {
  ech(a, b, f) {a.forEach((e, i) => a[i] = f(e, b[i]));},
  add(a, b) {ech(a, b, (x, y) => x + y);},
  sub(a, b) {ech(a, b, (x, y) => x - y);},
  mult(a, s) {ech(a, a, x => x * s);},
  mag(p) {return Math.hypot(...p);},
  norm(a) {mult(a, 1 / mag(a));},
  g: 0.5 + Math.sqrt(5) / 2 });


function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = random() * (i + 1) | 0;
    [array[i], array[j]] = [array[j], array[i]];
  }
}

const count = 1e5;

const dodec = [
(m, n) => [-1, m, n],
(m, n) => [1, m, n],
(m, n) => [0, m * g, n / g],
(m, n) => [m * g, n / g, 0],
(m, n) => [n / g, 0, m * g]];


const d = [...Array(20)].map((e, i) => {
  const m = i / 5 | 0;
  return dodec[i % 5](m % 2 * 2 - 1, (m / 2 | 0) * 2 - 1);
});

let f = (x, i) => x + random() - 0.5;

function createPoints() {
  const arr = [];
  let p = [0, 0, 0.001];
  for (let i = 0; i < count; i++) {
    let dir = [...d[i % 20]];
    mult(dir, 5 + sin(i));
    sub(dir, p);
    norm(dir);
    mult(dir, f(mag(p), i));
    add(p, dir);
    arr.push(...p);
  }
  return arr;
}

const canvas = document.createElement("canvas");
canvas.style.background = "#000";
document.body.appendChild(canvas);
document.body.style.margin = 0;
document.body.style.overflow = "hidden";

const gl = canvas.getContext("webgl", { preserveDrawingBuffer: true });
const controls = OrbitControls(0, 0, 150);
const fullScreenTriangle = new Float32Array([-1, 3, -1, -1, 3, -1]);
let pts = new Float32Array(createPoints());
const colors = [1, 1, 1];
const color = new Float32Array([...Array(count)].map(() => colors).flat());

const clearPass = program(gl, `
attribute vec2 pt = () => fullScreenTriangle;
void main() {
    gl_Position = vec4(pt, 0.0, 1.0);
}`, `
void main() {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.5);
}`);


const particles = program(gl, `
attribute vec3 pt = () => pts;
attribute vec3 color = () => color;

uniform vec2 resolution = () => [innerWidth, innerHeight];
uniform float time = () => [window.t];
uniform float a1 = () => [controls.a1];
uniform float a2 = () => [controls.a2];
uniform float k = () => [controls.k];

varying vec3 col;

void main() {
    col = color;
    float far = 1000.0;
    float x = pt.x*cos(a1) + pt.z*sin(a1);
    float z = pt.z*cos(a1) - pt.x*sin(a1);
    float y = pt.y*cos(a2) + z*sin(a2);
    float d = z*cos(a2) - pt.y*sin(a2) + far;
    vec2 pos = vec2( (k/d)*x, (k/d)*y );
    pos.y *= resolution.x/resolution.y;
    gl_Position = vec4(pos, 0.0, 1.0);
    gl_PointSize =0.1/d;
}`, `
varying vec3 col;
void main() {
    gl_FragColor = vec4(col, 0.01);
}`);


gl.enable(gl.BLEND);

requestAnimationFrame(function draw(t) {
  window.t = t;

  if (canvas.width != innerWidth || canvas.height !== innerHeight)
  gl.viewport(0, 0, canvas.width = innerWidth, canvas.height = innerHeight);

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  clearPass(3, gl.T.........完整代码请登录后点击上方下载按钮下载查看