webgl实现canvas生命游戏三维进化动画代码-html代码-BFW代码库

webgl实现canvas生命游戏三维进化动画代码

代码语言：html

所属分类：动画

代码描述：webgl实现canvas生命游戏三维进化动画代码

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

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

<head>
  <meta charset="UTF-8">

  
  
<style>
html {
  --side: max(100vw, 100vh);
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  position: fixed;
  background-color: #111;
}

canvas {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--side);
  height: var(--side);
  position: fixed;
}
</style>

  
</head>

<body translate="no">
  <script>console.clear()</script>
<canvas id="canvas"></canvas>
  
      <script >
"use strict";
//////// SETUP
const settings = [
    [32, 64, 0.02, 0.67],
    [64, 64, 0.02, 0.67],
    [128, 64, 0.01, 0.33], // 2
];
// settings index
const S = 1;
const side = settings[S][0];
const height = settings[S][1];
const scale = settings[S][2];
const y_offset = settings[S][3];
// total number of cubes
const N = side * side * height;
// texture side
const t_side = Math.sqrt(N);
// grid (of chunks on texture) side
const g_side = t_side / side;
// half side
const h_side = side / 2;
// coordinate of last chunk (life chunk)
const l_chunk = t_side - side;
//////// PREPARE WEBGL CONTEXT
const gl = (() => {
    const dpr = Math.min(2, devicePixelRatio);
    let c_side = Math.max(innerWidth, innerHeight);
    c_side = Math.max(c_side * dpr, t_side);
    canvas.width = c_side;
    canvas.height = c_side;
    return canvas.getContext("webgl2", {
        preserveDrawingBuffer: true,
        alpha: false,
    });
})();
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.067, 0.067, 0.067, 1);
//////// ATTRIBUTES
// indices
var A;
(function (A) {
    A[A["QUAD"] = 0] = "QUAD";
    A[A["ID"] = 1] = "ID";
    A[A["POS"] = 2] = "POS";
    A[A["IPOS"] = 3] = "IPOS";
    A[A["NORM"] = 4] = "NORM";
})(A || (A = {}));
{
    // quad from a triangle
    const quad = new Float32Array([
        -1, -3,
        3, 1,
        -1, 1,
    ]);
    set_attrib(quad, [A.QUAD, 2]);
    // cube data -> pos, norm
    const cube = new Float32Array([
        // face, face, normal
        [0, 0, 0, 1, 0, 0, 1, 1, 0,
            1, 1, 0, 0, 1, 0, 0, 0, 0,
            0, 0, -1],
        [1, 0, 0, 1, 0, 1, 1, 1, 1,
            1, 1, 1, 1, 1, 0, 1, 0, 0,
            1, 0, 0],
        [1, 0, 1, 0, 0, 1, 0, 1, 1,
            0, 1, 1, 1, 1, 1, 1, 0, 1,
            0, 0, 1],
        [0, 0, 1, 0, 0, 0, 0, 1, 0,
            0, 1, 0, 0, 1, 1, 0, 0, 1,
            -1, 0, 0],
        [1, 1, 0, 1, 1, 1, 0, 1, 1,
            0, 1, 1, 0, 1, 0, 1, 1, 0,
            0, 1, 0],
    ].reduce((arr, e) => {
        const n = e.slice(18), data = [];
        for (let i = 0; i < 18; i += 3) {
            e[i + 0] -= 0.5;
            e[i + 1] -= 0.5;
            e[i + 2] -= 0.5;
            data.push(e[i], e[i + 1], e[i + 2], ...n);
        }
        return arr.concat(data);
    }, []));
    set_attrib(cube, [A.POS, 3], [A.NORM, 3]);
    // instanced cubes data -> ipos, id
    const icubes = new ArrayBuffer(N * 6 * 4);
    for (let i = 0; i < N; i++) {
        const x = i % side;
        const z = (i / t_side | 0) % side;
        const y = (() => {
            // grid id — coord of chunk on texture
            const x = (i % t_side) / side | 0;
            const y = i / (t_side * side) | 0;
            return y * g_side + x;
        })();
        const o = i * 6 * 4;
        const ipos = new Float32Array(icubes, o, 3);
        ipos[0] = x - h_side;
        ipos[1] = y - height;
        ipos[2] = h_side - z;
        const id = new Int32Array(icubes, o + 12, 3);
        id[0] = x;
        id[1] = y;
        id[2] = z;
    }
    set_attrib(icubes, [A.IPOS, 3, 1], [A.ID, 3, 1, true]);
}
//////// MESH PROGRAM
const mesh = (() => {
    const vert = /*glsl*/ `#version 300 es
  layout(location=${A.ID})   in ivec3 id;
  layout(location=${A.POS}) .........完整代码请登录后点击上方下载按钮下载查看