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