regl+gl-matrix实现webgl隧道穿越动画效果代码-html代码-BFW代码库

regl+gl-matrix实现webgl隧道穿越动画效果代码

代码语言：html

所属分类：动画

代码描述：regl+gl-matrix实现webgl隧道穿越动画效果代码

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

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

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

  
  
<style>
#display {
  position: absolute;
  inset: 0;
}

.input {
  position: absolute;
  left: 0;
  top: 0;
}
</style>



  
  
</head>

<body translate="no">

  

  
   <div id="display"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/regl.2.1.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gl-matrix-3.4.2.js"></script>
      <script  >
const regl = createREGL({
  container: document.querySelector("#display"),
  pixelRatio: Math.min(2, globalThis.devicePixelRatio),
  extensions: ["ANGLE_instanced_arrays"]
});
const { mat4 } = glMatrix;

const c = document.querySelector("#display");
const mouse = { x: c.offsetWidth / 2, y: c.offsetHeight / 2 };

window.addEventListener("mousemove", (e) => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

const depth = 12
const step = 1;
const length = Math.floor(depth / step);
const tubeOffsets = [];
const tubeVfxOffsets = [];
const tubeIndexes = [];

for (let i = 0; i < length; i++) {
  tubeOffsets.push([Math.sin(i) * 0.2, 0, step * i - 10]);
  tubeIndexes.push([i]);
}

const offsetBuffer = regl.buffer(tubeOffsets);

const drawPlane = regl({
  vert: `
      precision mediump float;
      
      attribute vec2 position;
      attribute vec3 offset; // Смещение инстансов
      attribute float instanceId; // instanceId
      
      uniform mat4 projection, view, model;
      uniform float time;
      
      varying vec2 uv;
      varying float vInstanceId;
      varying vec4 vWorldPosition;
  
      void main() {
        vec3 pos = vec3(position, 0.0) + offset;
        uv = 0.5 * (position + 1.0);
  .........完整代码请登录后点击上方下载按钮下载查看