canvas+webgl实现三维shader驱动的音乐立体空间效果代码-html代码-BFW代码库

canvas+webgl实现三维shader驱动的音乐立体空间效果代码

代码语言：html

所属分类：三维

代码描述：canvas+webgl实现三维shader驱动的音乐立体空间效果代码，可拖动旋转切换视角，墙上流体动画。

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

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

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

  
</head>

<body>
  
  
      <script  >
const choose = a => a[Math.floor(Math.random() * a.length)];
const speeds = [.8];
const resont = [.9];
const volmns = [1];
const options = {
  volume: choose(volmns),
  resonance: choose(resont),
  speed: choose(speeds) };


let shaderTime = 0;
let pan = 0;
const Composer = () => {

  let context,
  main, verb, bus, compressor;

  const trigger = Object.freeze({
    trig: function () {
      let prev = 0;
      let t = false;
      return function (val) {
        t = prev < 0 && val >= 0;
        prev = val;
        return t;
      };
    },
    change: function () {
      let prev = 0;
      let t = false;
      return function (val) {
        t = prev != val;
        prev = val;
        return t;
      };
    },
    pulse: function (threshold) {
      let prev = 0;
      let t = false;
      return function (b) {
        if (b) prev++;
        if (prev == threshold) {
          t = true;
          prev = 0;
        } else {t = false;}
        return t;
      };
    },
    skip: function (n) {
      let count = n;
      return function (b) {
        return count++ % n == 0;
      };
    } });


  const lowTrig = trigger.trig();
  const highTrig = trigger.trig();
  const bassTrig = trigger.trig();
  const lowChanged = trigger.change();
  const bassChanged = trigger.change();
  const highChanged = trigger.change();
  const roots = [21, 23, 24, 26, 28, 30];

  let b = Float32Array.from({ length: 24 }, () => Math.random() < .25 ? Math.random() * 2 - 1 : 0);
  let m = [0, 4, 0, 9, 0, 4, 9];
  let root = pickItem(b[1], 0, 20, roots);

  function loop() {
    main.gain.value = dbamp(lerp(options.volume, 0, 1, -60, 3));
    compose();
    setTimeout(() => loop(), expInterp(options.speed, 0, 1, 800, 80));
  }

  function compose() {

    options.resonance = .2 + .8 * (1. - Math.abs(pan));

    for (let i = 0; i < b.length; i++) {
      b[i] = -Math.min(b[mod(i + 3, b.length)], Math.random() * 2 - 1);
    }


    if (lowTrig(b[21])) {
      const note = pickNote(b[21], 15, 35);
      if (lowChanged(note)) {
        sine(
        midicps(note),
        pickVolume(1 - Math.abs(pan), -24, -9),
        pan);

      }
    }

    {
      const note = pickNote(b[11], 20, 25);
      if (highChanged(note)) {
        tri(
        midicps(note),
        pickVolume(b[12], -24, -9),
        b[13]);

      }
      sine(
      midicps(pickNote(b[11], 15, 35)),
      pickVolume(1 - Math..........完整代码请登录后点击上方下载按钮下载查看