webgl实现蚂蚁粘液动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：webgl实现蚂蚁粘液动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
/*   height: 100vh;
  width: 100vw; */
  touch-action: none;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */
</style>



</head>

<body >
  <script id="vertexShader_particle" type="x-shader/x-vertex">
  attribute vec4 a_position;
  attribute vec3 a_colour;
  attribute vec2 a_reference;
  
  uniform vec2 u_resolution;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  
  vec3 hsv2rgb(vec3 c) {
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }
  
  void main() {
    vec2 position = texture2D(b_position, a_reference).xy;
    vec2 velocity = texture2D(b_velocity, a_reference).xy;
    float size = texture2D(b_blur, position).r;
    
    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
    
    gl_Position = pos;
    gl_PointSize = 1.;
    v_colour = vec3(0);
  }
</script>
<script id="vertexShader_buffer" type="x-shader/x-vertex">attribute vec4 a_position;  
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader_velocity" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  #define PI 3.141592653589793
  #define HPI 1.5707963267948966
  #define TAU 6.283185307179586
  #define G 0.67408
  
  uniform vec2 u_resolution;
  uniform vec3 u_mouse;
  uniform float u_time;
  uniform vec2 u_screen;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  uniform sampler2D b_species;
  uniform sampler2D b_blur;
  /*
  1. move speed
  2. turn speed
  3. sensor angle
  4. sensor size
  */
  
  struct Settings {
    float moveSpeed;
    float turnSpeed;
    float sensorAngle;
    float sensorOffsetDst;
  };
  
  float sense(vec4 creature, Settings settings, float direction) {
    float a = creature.z + settings.sensorAngle * direction;
    vec2 dir = vec2(cos(a), sin(a));

    vec2 pos = creature.xy + dir * settings.sensorOffsetDst;

    float p = 0.;
    
    const float s = 2.;

    for (float x = -s; x <= s; x ++) {
      for (float y = -s; y <= s; y ++) {
        vec2 s = (pos + vec2(x, y))/u_screen;
        p += texture2D(b_blur, s).x;
      }
    }

    return p;
    // return smoothstep(0., 100., sum);
  }
  
  float rand(float n){return fract(sin(n) * 43758.5453123);}
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  
  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 position = texture2D(b_position, uv).xy;
    vec4 velocity = texture2D(b_velocity, uv);
    vec4 settingsA = texture2D(b_species, uv);
    
    Settings settings = Settings(settingsA.x, settingsA.y, settingsA.z, settingsA.w);
    
    vec4 creature = vec4(position.xy, velocity.zw);
    
    vec3 w = vec3(
      sense(creature, settings, 0.),   // forward
      sense(creature, settings, -1.),  // left
      sense(creature, settings, 1.)    // right
    );
    
    float r = abs(rand(length(creature.xy)))*.05;
    r = rand(creature.xy+u_time);
    float turnSpeed = settings.turnSpeed * 2. * 3.1415;
    if(w.x > w.y && w.x > w.z) { }
    else if(w.x < w.y && w.x < w.z) {
      creature.z += (r-.5) * 2. * turnSpeed;
    }
    else if(w.z > w.y) {
      creature.z -= r * turnSpeed;
    }
    else if(w.z < w.y) {
      creature.z += r * turnSpeed;
    }
    
    velocity.zw = creature.zw;
    
    
    velocity.xy = vec2( cos(creature.z) * settings.moveSpeed, sin(creature.z) * settings.moveSpeed );
    
    if(u_mouse.z == 1.) {
      vec2 m = position - u_mouse.xy;
      float d = dot((position), (u_mouse.xy));
      float a = atan(m.y, m.x);
      velocity.z = mix(velocity.z, a, smoothstep(200., 100., length(m)));
      float l = 1. / length(m*.001);
      velocity.xy += vec2( cos(a)*l, sin(a)*l ) * smoothstep(100., 10., length(m));
    }
    
    // if(position.x > u_screen.x) velocity.z = rand(agent.xy+u_time) * 2. * 3.14159;
    // else if(position.x < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    // if(position.y > u_screen.y) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    // else if(position.y < 0.) velocity.z += rand(agent.xy+u_time) * 2. * 3.14159;
    
    gl_FragColor = velocity;
  }
</script>
<script id="fragmentShader_position" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  uniform vec2 u_screen;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;

  void main() {
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec2 position = texture2D(b_position, uv).xy;
    vec2 velocity = texture2D(b_velocity, uv).xy;
    
    vec2 pos = position+velocity*.99;
    if(pos.x > u_screen.x + 20.) pos.x = -10.;
    else if(pos.x < -20.) pos.x = u_screen.x + 10.;
    if(pos.y > u_screen.y + 20.) pos.y = -10.;
    else if(pos.y < -20.) pos.y = u_screen.y + 10.;
    
    // if(pos.x > u_screen.x) pos.x = u_screen.x - .1;
    // else if(pos.x < 0.) pos.x = 0.;
    // if(pos.y > u_screen.y) pos.y = u_screen.y - .1;
    // else if(pos.y < 0.) pos.y = 0.;
    
    gl_FragColor = vec4(pos, 0., 1.0);
  }
</script>
<script id="fragmentShader_particle" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_position;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }

  void main() {
    vec2 uv = gl_PointCoord.xy - .5;
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
    gl_FragColor = vec4(0, 0, 0, 1);
    
    float l = length(uv);
    float c = smoothstep(.5, 0., l);
    float fog = smoothstep(-200., -1., v_fogDepth);
    float opacity = c * fog;
    
    gl_FragColor = vec4(.2);
  }
  
</script>
<script id="fragmentShader_blur" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec3 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  
  const float diffuseSpeed = .1;
  const float fadeSpeed = .002;
  
  #define PI 3.141592653589793
  #define TAU 6.283185307179586
  #define pow2(x) (x * x)
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  vec4 blur(sampler2D sampler, vec2 p, vec2 ps) {
    vec4 v;
    for(float x = -1.; x <= 1.; x++) {
      for(float y = -1.; y <= 1.; y++) {
        vec2 s = p+vec2(x * ps.x, y * ps.y);
        v += texture2D(sampler, s);
      }
    }
    return v /= 9.;
  }

  void main() {
    vec2 s = gl_FragCoord.xy / u_resolution;
    
    vec2 ps = vec2(1.0) / u_resolution.xy;
    
    vec4 p = texture2D(b_prime, s);
    vec4 bo = texture2D(b_blur, s);
    vec4 b = blur(b_blur, s, ps);
    
    float d = mix(bo.x, b.x, diffuseSpeed);
    
    float opt = mix(d*(1.-fadeSpeed), 1., p.a);
    opt = d*(1.-fadeSpeed) + (p.a);
    
    if(u_mouse.z == 1.) {
      vec2 m = gl_FragCoord.xy - u_mouse.xy;
      float d = dot(gl_FragCoord.xy, (u_mouse.xy));
      float a = atan(m.y, m.x);
      opt = mix(opt, opt*.9, smoothstep(200., 10., length(m)));
    }

    gl_FragColor = vec4(vec3(opt), 1.);
  }
  
</script>
<script id="fragmentShader_output" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  const int samples = 8;
  const float sigma = float(samples) * 0.25;
  
  #define PI 3.141592653589793
  #define TAU 6.283185307179586
  #define pow2(x) (x * x)
  
  float gaussian(vec2 i) {
    return 1.0 / (2.0 * PI * pow2(sigma)) * exp(-((pow2(i.x) + pow2(i.y)) / (2.0 * pow2(sigma))));
  }
  vec4 blur(sampler2D sp, vec2 uv, vec2 scale) {
      vec4 col = vec4(0.0);
      float accum = 0.0;
      float weight;
      vec2 offset;

      for (int x = -samples / 2; x < samples / 2; ++x) {
          for (int y = -samples / 2; y < samples / 2; ++y) {
              offset = vec2(x, y);
              weight = gaussian(offset);
              col += texture2D(sp, uv + scale * offset) * weight;
              accum += weight;
          }
      }

      return col / accum;
  }

  void main() {
    vec2 s = gl_FragCoord.xy / u_resolution;
    
    vec4 p = texture2D(b_prime, s);
    vec4 b = texture2D(b_blur, s);
    vec3 c = b.rgb*.05;
    c *= c;
    c = smoothstep(-1., 5., b.rgb) - smoothstep(30., 35., b.rgb);
    // c = smoothstep(0., 1., b.rgb);
    
    gl_FragColor = vec4(clamp(c, 0., 1.), 1.);
    // gl_FragColor = opt;
  }
  
</script>


  
      <script type="module">
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';

import gifJs from 'https://cdn.skypack.dev/gif.js';

console.clear();

const setup = function () {
  // Simulation dimensions
  const px = Math.min(window.devicePixelRatio, 2);
  // const px = Math.min(window.devicePixelRatio, 2);
  const dimensions = [window.innerWidth, window.innerHeight];
  const texturesize = 128;
  const particles = Math.pow(texturesize, 2);
  const textureArraySize = particles * 4;

  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);

  const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: true, premultipliedAlpha: false, preserveDrawingBuffer: true, pxRatio: px });
  const ctx = renderer.ctx;

  let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);
  const ants = new Float32Array(particles * 2).fill(0);
  const references = new Float32Array(particles * 2).fill(0);
  const positionData = new Float32Array(particles * 4).fill(0);
  const velocityData = new Float32Array(particles * 4).fill(0);
  const speciesData = new Float32Array(particles * 4).fill(0);
  for (let i = 0; i < ants.length; i += 2) {
    const index = i / 2;
    const tindex = i * 2;

    ants[i] = index % texturesize; // x position
    ants[i + 1] = Math.floor(index / texturesize); // y position

    references[i] = ants[i] / texturesize; // x position of the texture particle representing this ant
    references[i + 1] = ants[i + 1] / texturesize; // y position of the texture particle representing this ant

    const r = Math.random() * 3.14159 * 2.;
    const l = Math.random() * 400;
    const x = dimensions[0] * .5 + Math.cos(r) * l;
    const y = dimensions[1] * .5 + Math.sin(r) * l;

    // positionData[tindex] = Math.random() * (dimensions[0] * px + 40);
    // positionData[tindex + 1] = Math.random() * (dimensions[1] * px + 40);
    positionData[tindex] = x;
    positionData[tindex + 1] = y;
    positionData[tindex + 2] = 0;
    positionData[tindex + 3] = 1;

    velocityData[tindex] = -positionData[tindex];
    velocityData[tindex + 1] = -positionData[tindex + 1.];
    velocityData[tindex + 2] = r - Math.PI;
    velocityData[tindex + 3] = .5;

    speciesData[tindex] = 1.; // move speed
    speciesData[tindex + 1] = .7; // turn speed
    speciesData[tindex + 2] = .6; // sensor angle
    speciesData[tindex + 3] = 20; // sensor offset
  }

  const positionBuffer = new FrameBuffer(renderer, 'position', {
    width: texturesize,
    height: texturesize,
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1,
    data: positionData });

  const velocityBuffer = new FrameBuffer(renderer, 'velocity', {
    width: texturesize,
    height: texturesize,
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1,
    data: velocityData });

  const speciesBuffer = new FrameBuffer(renderer, 'species', {
    width: texturesize,
    height: texturesize,
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1,
    data: speciesData });

  const blurBuffer = new FrameBuffer(renderer, 'blur', {
    width: dimensions[0],
    height: dimensions[1],
    tiling: Texture.IMAGETYPE_REGULAR,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: px });

  const primaryBuffer = new FrameBuffer(renderer, 'prime', {
    width: dimensions[0],
    height: dimensions[1],
    tiling: Texture.IMAGETYPE_REGULAR,
    pxRatio: px });


  const drawBuffer = new Buffer(ctx, drawing);
  const antBuffer = new Buffer(ctx, ants, {
    attributes: [{
      name: 'ants',
      numComponents: 2 }] });


  const referenceBuffer = new Buffer(ctx, references, {
    attributes: [{
      name: 'reference',
      numComponents: 2 }] });



  const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;
  const vertexShader_particle = document.getElementById('vertexShader_particle').innerText;

  const programPosition = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_position').innerText, {
    renderType: Program.RENDER_STRIP });
  const programVelocity = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_velocity').innerText, {
    renderType: Program.RENDER_STRIP });
  const programBlur = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_blur').innerText, {
    renderType: Program.RENDER_STRIP });
  const programMain = new Program(ctx, vertexShader_particle, document.getElementById('fragmentShader_particle').innerText, {
    // clearColour: [.15,.1,.05, 1.], 
    clearColour: [.9, .9, .9, 0.],
    renderType: Program.RENDER_POINTS,
    blending: Renderer.BLENDING_NORMAL,
    depthTesting: false,
    transparent: false,
    premultiplied: false });

  const programOutput = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_output').innerText, {
    clearColour: [.0, .0, .0, 1.],
    renderType: Program.RENDER_STRIP });

  const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
  const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
  const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V3, [0., 0., 0.]);
  const screen = new Uniform(ctx, 'screen', Uniform.TYPE_V2, [dimensions[0] * px, dimensions[1] * px]);

  const noise = new Texture(ctx, 'noise', {
    textureType: Texture.IMAGETYPE_TILE,
    url: 'https://assets.codepen.io/982762/noise.png' });


  noise.preload().then(n => {
    requestAnimationFrame(run);
  });

  let pointerdown = false;
  let lastPos = new Vec2();
  window.addEventListener('pointerdown', e => {
    if (e.button == 0) {
      pointerdown = true;
      lastPos = new Vec2(e.x, e.y);
      mouse.value[0] = lastPos.x * px;
      mouse.value[1] = (window.innerHeight - lastPos.y) * px;
      mouse.value[2] = 1.;
    }
  });
  window.addEventListener('pointerup', e => {
    pointerdown = false;
    mouse.value[2] = 0.;
  });
  window.addEventListener('pointermove', e => {
    if (pointerdown) {
      let newPos = new Vec2(e.x, e.y);
      mouse.value[0] = newPos.x * px;
      mouse.value[1] = (window.innerHeight - newPos.y) * px;
    }
  });

  let playing = true;
  const setPlaying = value => {
    playing = value;
  };

  let autoTransitionTimer = 0;
  let timeToTransition = 0;
  const setupValues = i => {
    dimensions[0] = window.innerWidth;
    dimensions[1] = window.innerHeight;

    time.value = -10000;
  };

  setupValues(0);

  let timeout;
  window.addEventListener('resize', () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      dimensions[0] = window.innerWidth;
      dimensions[1] = window.innerHeight;
      renderer.resize(dimensions[0], dimensions[1]);
      blurBuffer.resize(dimensions[0], dimensions[1]);
      primaryBuffer.resize(dimensions[0], dimensions[1]);
      screen.value = [dimensions[0] * px, dimensions[1] * px];
    }, 100);
  });

  let then = 0;
  const run = delta => {

    let now = Date.now() / 1000;
    let _delta = now - then;
    then = now;

    if (_delta > 1000) {
      requestAnimationFrame(run);
      return;
    }

    if (playing) {
      uDelta.value = Math.min(_delta, 0.5);
      time.value += _delta * .05;

      renderer.setViewport([velocityBuffer.width, velocityBuffer.height]);
      // window.renderer = renderer;
      // console.log(renderer.uniformResolution.value)
      renderer.setupProgram(programVelocity, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen, speciesBuffer, blurBuffer]);
      velocityBuffer.render(4);

      renderer.setupProgram(programPosition, [drawBuffer], [], [time, mouse, velocityBuffer, positionBuffer, uDelta, screen]);
      positionBuffer.render(4);

      renderer.setViewport();
      renderer.setupProgram(programMain, [referenceBuffer], [], [time, mouse, velocityBuffer, positionBuffer, screen, blurBuffer]);
      primaryBuffer.render(particles);

      renderer.setupProgram(programBlur, [drawBuffer], [], [time, mouse, primaryBuffer]);
      blurBuffer.render(4);

      renderer.setupProgram(programOutput, [drawBuffer], [], [time, primaryBuffer, blurBuffer]);
      renderer.render(4);

      requestAnimationFrame(run);
    }
  };
};

// Determine whether a number is a power of 2
function powerOf2(v) {
  return v && !(v & v - 1);
}
// Return the next greatest power of 2
function nextPow2(v) {
  v--;
  v |= v >> 1;
  v |= v >> 2;
  v |= v >> 4;
  v |= v >> 8;
  v |= v >> 16;
  v++;
  return v;
}
// Update a provided image to the nearest power of 2 in size.
const pow2Image = c => {
  const newWidth = powerOf2(c.width) ? c.width : nextPow2(c.width);
  const newHeight = powerOf2(c.height) ? c.height : nextPow2(c.height);
  const _c = document.createElement('canvas');
  const ctx = _c.getContext('2d');
  _c.width = newWidth;
  _c.height = newHeight;
  ctx.drawImage(c, 0, 0, newWidth, newHeight);
  return _c;
};
const asyncImageLoad = function (img, src) {
  return new Promise((resolve, reject) => {
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
};
const glEnumToString = function () {
  const haveEnumsForType = {};
  const enums = {};

  function addEnums(gl) {
    const type = gl.constructor.name;
    if (!haveEnumsForType[type]) {
      for (const key in gl) {
        if (typeof gl[key] === 'number') {
          const existing = enums[gl[key]];
          enums[gl[key]] = existing ? `${existing} | ${key}` : key;
        }
      }
      haveEnumsForType[type] = true;
    }
  }

  return function glEnumToString(gl, value) {
    addEnums(gl);
    return enums[value] || (typeof value === 'number' ? `0x${value.toString(16)}` : value);
  };
}();
const addExtensions = ctx => {
  // Set up the extensions
  ctx.getExtension('OES_standard_derivatives');
  ctx.getExtension('EXT_shader_texture_lod');
  ctx.getExtension('OES_texture_float');
  ctx.getExtension('WEBGL_color_buffer_float');
  ctx.getExtension('OES_texture_float_linear');
  ctx.getExtension('EXT_color_buffer_float');
};
function createContext(c, opt_attribs, params) {
  const ctx = c.getContext("webgl", params) || this._el.getContext("experimental-webgl", params);

  addExtensions(ctx);

  return ctx;
}

const quatToMat4 = q => {
  if (q.array) q = q.array; // This just transforms a provided vector into to an array.

  if (q instanceof Array && q.length >= 4) {
    const [x, y, z, w] = q;
    const [x2, y2, z2] = q.map(x => x * 2.);

    const xx = x * x2,
    yx = y * x2,
    yy = y * y2,
    zx = z * x2,
    zy = z * y2,
    zz = z * z2,
    wx = w * x2,
    wy = w * y2,
    wz = w * z2;

    return new Mat4(
    1 - yy - zz, yx - wz, zx + wy, 0,
    yx + wz, 1 - xx - zz, zy - wx, 0,
    zx - wy, zy + wx, 1 - xx - yy, 0,
    0, 0, 0, 1);

  }
};var _blending = new WeakMap();var _blendingEnabled = new WeakMap();var _buffers = new WeakMap();

class Renderer {






















  constructor(canvas, options) {_defineProperty(this, "isWebgl2", false);_blending.set(this, { writable: true, value: void 0 });_blendingEnabled.set(this, { writable: true, value: false });_buffers.set(this, { writable: true, value: [] });
    options = Object.assign({}, _classStaticPrivateFieldSpecGet(Renderer, Renderer, _defaultOptions), options);
    this.width = options.width;
    this.height = options.height;
    this.pxRatio = options.pxRatio;
    this.clearing = options.clearing;
    this.depthTesting = options.depthTesting;
    this.canvas = canvas || document.createElement('canvas');
    this.canvas.width = this.width * this.pxRatio;
    this.canvas.height = this.height * this.pxRatio;
    this.premultipliedAlpha = options.premultipliedAlpha;

    this.ctx = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options);

    this.ctx.viewportWidth = this.canvas.width;
    this.ctx.viewportHeight = this.canvas.height;

    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);

    this.addExtensions();
  }
  resize(w, h, ratio) {
    this.width = w;
    this.height = h;
    this.pxRatio = ratio || this.pxRatio;
    this.canvas.width = this.width * this.pxRatio;
    this.canvas.height = this.height * this.pxRatio;

    this.ctx.viewportWidth = this.canvas.width;
    this.ctx.viewportHeight = this.canvas.height;

    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [this.canvas.width, this.canvas.height]);
  }
  setViewport(dimensions) {
    let w = this.width * this.pxRatio;
    let h = this.height * this.pxRatio;
    if (dimensions) {
      w = dimensions[0];
      h = dimensions[1];
    }
    this.ctx.viewport(0, 0, w, h);
    this.uniformResolution = new Uniform(this.ctx, 'resolution', Uniform.TYPE_V2, [w, h]);
  }
  addExtensions() {
    this.ctx.getExtension('OES_standard_derivatives');
    this.ctx.getExtension('EXT_shader_texture_lod');
    this.ctx.getExtension('OES_texture_float');
    this.ctx.getExtension('WEBGL_color_buffer_float');
    this.ctx.getExtension('OES_texture_float_linear');
    this.ctx.getExtension('EXT_color_buffer_float');
  }
  linkBuffer(buffer) {
    let hasBuffer = false;
    _classPrivateFieldGet(this, _buffers).forEach(b => {
      if (buffer === b) hasBuffer = true;
    });
    if (!hasBuffer) {
      this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, buffer.buffer);
      this.ctx.bufferData(
      this.ctx.ARRAY_BUFFER,
      buffer.data,
      buffer.drawType);
    }
    buffer.link(this.currentProgram.program);
  }
  setupProgram(program, buffers, attributes, uniforms) {
    this.currentProgram = program;
    this.ctx.useProgram(program.program);

    this.premultiplied = program.premultiplied;

    this.depthTesting = program.depthTesting;


    if (program.blending === Program.BLENDING_NORMAL && program.transparent === false) {
      this.blending = Program.BLENDING_OFF;
    } else {
      this.blending = program.blending;
    }

    this.clearColour = program.clearColour;
    const a = this.clearColour[3];
    // console.log('prem', this.premultipliedAlpha)
    if (this.premultipliedAlpha) this.clearColour = this.clearColour.map((c, i) => c * a);

    this.ctx.clearColor(...this.clearColour);

    // TODO: Unlink unused buffers during this setup phase as well.
    buffers.forEach(buffer => {
      this.linkBuffer(buffer);
    });

    // this.ctx.enable(ctx.DEPTH_TEST);
    if (this.depthTesting) this.ctx.enable(this.ctx.DEPTH_TEST);else
    this.ctx.disable(this.ctx.DEPTH_TEST);

    uniforms.forEach(uniform => {
      uniform.bind(program.program);
    });
    this.uniformResolution.bind(program.program);
  }
  render(points, buffer) {
    this.ctx.bindFramebuffer(this.ctx.FRAMEBUFFER, (buffer === null || buffer === void 0 ? void 0 : buffer.fb) || null);
    if (this.clearing) {
      this.ctx.clear(this.ctx.COLOR_BUFFER_BIT);

      if (this.depthTesting) this.ctx.clear(this.ctx.DEPTH_BUFFER_BIT);
    }
    switch (this.currentProgram.renderType) {
      case Program.RENDER_TRIANGLES:
        this.ctx.drawArrays(this.ctx.TRIANGLES, 0, points);
        break;
      case Program.RENDER_STRIP:
        this.ctx.drawArrays(this.ctx.TRIANGLE_STRIP, 0, poi.........完整代码请登录后点击上方下载按钮下载查看