canvas+webgl实现草莓粒子跟随鼠标动画效果代码-html代码-BFW代码库

canvas+webgl实现草莓粒子跟随鼠标动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas+webgl实现草莓粒子跟随鼠标动画效果代码

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

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

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

    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@900&amp;display=swap'>
<style>
    body {
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: url("//repo.bfw.wiki/bfwrepo/image/6435154a8272d.png") no-repeat center center;
  background-size: cover;
}

body.hide-background {
  background: none;
}

canvas {
  display: block;
}
</style>

</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ogl.umd.js"></script>
    <script>
        function App() {
  const { Renderer, Geometry, Program, Mesh, Vec2, Vec3, Texture, GPGPU } = ogl;

  let renderer, gl;
  let time, mouse, ratio;
  let points, positionB, dataB;
  let texture;

  init();

  function init() {
    renderer = new Renderer({ dpr: 2, alpha: true, depth: false, autoClear: true, preserveDrawingBuffer: false });
    gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    time = { value: 0 };
    mouse = { value: new Vec2() };
    ratio = { value: new Vec2() };

    texture = new Texture(gl);
    const images = [
    { texture: texture, src: '//repo.bfw.wiki/bfwrepo/image/6435154a8272d.png' }];


    Promise.all(images.map(loadImage)).then(responses => {
      initAfterLoad();
    });
  }

  function initAfterLoad() {
    resize();
    window.addEventListener('resize', resize, false);
    function resize() {
      const tR = texture.image.width / texture.image.height;
      const w = window.innerWidth,h = window.innerHeight,r = w / h;
      if (r > tR) ratio.value.set(1, h / w * tR);else
      ratio.value.set(w / h / tR, 1);
      renderer.setSize(w, h);
    }

    document.addEventListener('click', () => {
      document.body.classList.toggle('hide-background');
    });

    initScene();
    initListeners();
    requestAnimationFrame(animate);
  }

  function initScene() {
    const numParticles = 256 * 256;
    const positions = new Float32Array(numParticles * 4);
    const data = new Float32Array(numParticles * 4);
    const random = new Float32Array(numParticles * 4);
    const v = new Vec3();
    for (let i = 0; i < numParticles; i++) {
      v.set(rnd(-1, 1), rnd(-1, 1), 0);
      positions.set([v.x, v.y, v.z, 1], i * 4);
      data.set([2, 0, 0, 1], i * 4);
      random.set([rnd(0.1, 1), rnd(-1, 1), rnd(-1, 1), rnd(-1, 1)], i * 4);
    }

    positionB = new GPGPU(gl, { data: positions });
    dataB = new GPGPU(gl, { data: data });
    dataB.addPass({
      uniforms: {
        uTime: time,
        uMouse: mouse,
        tPosition: positionB.uniform },

      fragment: `
        precision highp float;

        uniform float uTime;
        uniform vec2 uMouse;
        uniform sampler2D tMap;
        uniform sampler2D tPosition;

        varying vec2 vUv;

        void main() {
          vec4 position = texture2D(tPosition, vUv);
          vec4 data = texture2D(tMap, vUv);

          float toMouse = length(position.xy - uMouse);
          if (toMouse<.2) {
            data.x += abs(.2 - toMouse);
            data.x = min(data.x, 3.0);
          }
          // data.x = min(data.x + 1.0, 3.0);
  .........完整代码请登录后点击上方下载按钮下载查看