mousetrail.js

import { component } from 'bidello';
import { visibility } from '../bidello';
import FBO from './fbo';
import { pointer } from '../bidello/index';

import {
  Vector2,
  LinearFilter,
} from 'three';

class Trail extends component() {
  init() {
    this.fbo = new FBO({
      width: 256,
      height: 256,
      name: 'trail',
      shader: `precision highp float;
      uniform sampler2D texture;
      uniform vec2 uPointer;
      uniform float uSpeed;
      uniform float uRatio;

      float circle(vec2 uv, vec2 disc_center, float disc_radius, float border_size) {
        uv -= disc_center;
        float dist = sqrt(dot(uv, uv));
        return smoothstep(disc_radius+border_size, disc_radius-border_size, dist);
      }

      void main() {
        vec2 uv = gl_FragCoord.xy / RESOLUTION.xy;
        vec4 color = texture2D(texture, uv + vec2(0.0, -0.002));
      
        vec2 center = uPointer;
        uv.x *= uRatio;
        center.x *= uRatio;
      
        color.r += circle(uv, center, 0.0, 0.1) * uSpeed;
        color.r = mix(color.r, 0.0, .009);
        color.r = clamp(color.r, 0.0, 1.0);
      
        color.g = color.r * 5.0;
      
        gl_FragColor = color;
      }
      `,
      debug: true,
      uniforms: {
        uRatio: { value: 1.0 },
        uPointer: { value: new Vector2() },
        uSpeed: { value: 0 },
      },
      rtOptions: {
        minFilter: LinearFilter,
        magFilter: LinearFilter,
      },
    });

    this.speed = 0;
    this.pointerTarget = new Vector2();
  }

  onResize({ ratio }) {
    this.fbo.uniforms.uRatio.value = ratio;
  }

  onPointerMove({ pointer }) {
    this.pointerTarget.set(
      pointer.x / window.innerWidth,
      1 - (pointer.y / window.innerHeight)
    );
  }

  onRaf({ delta }) {
    this.fbo.uniforms.uPointer.value.lerp(this.pointerTarget, 0.2);
    this.fbo.uniforms.uSpeed.value = this.speed;
    this.fbo.update();


    const diff = Math.max(Math.abs(pointer.delta.x), Math.abs(pointer.delta.y)) * 0.005;
    this.speed += Math.min(diff, 0.10);
    this.speed *= 0.9;

    this.speed = Math.min(2, this.speed);

    if (!visibility.isFocus) {
      this.speed = 0;
    }
  }
}

export default new Trail();