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 = .........完整代码请登录后点击上方下载按钮下载查看