simondev.ThreeJS_Tutorial_BlendModes/main.js

import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';

import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';


const _VS = `
uniform float pointMultiplier;

attribute float size;
attribute float angle;
attribute float blend;
attribute vec4 colour;

varying vec4 vColour;
varying vec2 vAngle;
varying float vBlend;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

  gl_Position = projectionMatrix * mvPosition;
  gl_PointSize = size * pointMultiplier / gl_Position.w;

  vAngle = vec2(cos(angle), sin(angle));
  vColour = colour;
  vBlend = blend;
}`;

const _FS = `

uniform sampler2D diffuseTexture;

varying vec4 vColour;
varying vec2 vAngle;
varying float vBlend;

void main() {
  vec2 coords = (gl_PointCoord - 0.5) * mat2(vAngle.x, vAngle.y, -vAngle.y, vAngle.x) + 0.5;
  gl_FragColor = texture2D(diffuseTexture, coords) * vColour;
  gl_FragColor.xyz *= gl_FragColor.w;
  gl_FragColor.w *= vBlend;
}`;


const _VS_2 = `
uniform float pointMultiplier;

attribute float size;
attribute float angle;
attribute vec4 colour;

varying vec4 vColour;
varying vec2 vAngle;

void main() {
  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

  gl_Position = projectionMatrix * mvPosition;
  gl_PointSize = size * pointMultiplier / gl_Position.w;

  vAngle = vec2(cos(angle), sin(angle));
  vColour = colour;
}`;

const _FS_2 = `

uniform sampler2D diffuseTexture;

varying vec4 vColour;
varying vec2 vAngle;

void main() {
  vec2 coords = (gl_PointCoord - 0.5) * mat2(vAngle.x, vAngle.y, -vAngle.y, vAngle.x) + 0.5;
  gl_FragColor = texture2D(diffuseTexture, coords) * vColour;
}`;


class LinearSpline {
  constructor(lerp) {
    this._points = [];
    this._lerp = lerp;
  }

  AddPoint(t, d) {
    this._points.push([t, d]);
  }

  Get(t) {
    let p1 = 0;

    for (let i = 0; i < this._points.length; i++) {
      if (this._points[i][0] >= t) {
        break;
      }
      p1 = i;
    }

    const p2 = Math.min(this._points.length - 1, p1 + 1);

    if (p1 == p2) {
      return this._points[p1][1];
    }

    return this._lerp(
        (t - this._points[p1][0]) / (
            this._points[p2][0] - this._points[p1][0]),
        this._points[p1][1], this._points[p2][1]);
  }
}


class ParticleSystem {
  constructor(params) {
    const uniforms = {
        diffuseTexture: {
            value: new THREE.TextureLoader().load('./resources/fire.png')
        },
        pointMultiplier: {
            value: window.innerHeight / (2.0 * Math.tan(0.5 * 60.0 * Math.PI / 180.0))
        }
    };

    this._material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: _VS,
        fragmentShader: _FS,
        blending: THREE.CustomBlending,
        blendEquation: THREE.AddEquation,
        blendSrc: THREE.OneFactor,
        blendDst: THREE.OneMinusSrcAlphaFactor,
        depthTest: true,
        depthWrite: false,
        transparent: true,
        vertexColors: true
    });

    this._camera = params.camera;
    this._particles = [];

    this._geometry = new THREE.BufferGeometry();
    this._geometry.setAttribute('position', new THREE.Float32BufferAttribute([], 3));
    this._geometry.setAttribute('size', new THREE.Float32BufferAttribute([], 1));
    this._geometry.setAttribute('colour', new THREE.Float32BufferAttribute([], 4));
    this._geometry.setAttribute('angle', new THREE.Float32BufferAttribute([], 1));
    this._geometry.setAttribute('blend', new THREE.Float32BufferAttribute([], 1));

    this._points = new THREE.Points(this._geometry, this._material);

    params.parent.add(this._points);

    // Declare a few splines for different sets of particles. This isn't structured that well, we should
    // instead separate these out into new particle system instances with customizable parameters. But
    // for the purposes of a demo, more than enough.
    this._alphaSplineF = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._alphaSplineF.AddPoint(0.0, 0.0);
    this._alphaSplineF.AddPoint(0.1, 1.0);
    this._alphaSplineF.AddPoint(0.5, 1.0);
    this._alphaSplineF.AddPoint(1.0, 0.0);

    this._colourSplineF = new LinearSpline((t, a, b) => {
      const c = a.clone();
      return c.lerp(b, t);
    });
    this._colourSplineF.AddPoint(0.0, new THREE.Color(0xFFFF80));
    this._colourSplineF.AddPoint(1.0, new THREE.Color(0xFF8080));

    this._sizeSplineF = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._sizeSplineF.AddPoint(0.0, 1.0);
    this._sizeSplineF.AddPoint(0.25, 7.0);
    this._sizeSplineF.AddPoint(0.5, 2.5);
    this._sizeSplineF.AddPoint(1.0, 0.0);

    this._alphaSplineS = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._alphaSplineS.AddPoint(0.0, 0.0);
    this._alphaSplineS.AddPoint(0.1, 1.0);
    this._alphaSplineS.AddPoint(0.5, 1.0);
    this._alphaSplineS.AddPoint(1.0, 0.0);

    this._colourSplineS = new LinearSpline((t, a, b) => {
      const c = a.clone();
      return c.lerp(b, t);
    });
    this._colourSplineS.AddPoint(0.0, new THREE.Color(0x202020));
    this._colourSplineS.AddPoint(1.0, new THREE.Color(0x000000));

    this._sizeSplineS = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._sizeSplineS.AddPoint(0.0, 1.0);
    this._sizeSplineS.AddPoint(0.5, 8.0);
    this._sizeSplineS.AddPoint(1.0, 16.0);

    this._alphaSplineX = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._alphaSplineX.AddPoint(0.0, 0.0);
    this._alphaSplineX.AddPoint(0.1, 1.0);
    this._alphaSplineX.AddPoint(0.9, 1.0);
    this._alphaSplineX.AddPoint(1.0, 0.0);

    this._colourSplineX = new LinearSpline((t, a, b) => {
      const c = a.clone();
      return c.lerp(b, t);
    });
    this._colourSplineX.AddPoint(0.0, new THREE.Color(0xFF8080));
    this._colourSplineX.AddPoint(1.0, new THREE.Color(0xFFFFFF));

    this._sizeSplineX = new LinearSpline((t, a, b) => {
      return a + t * (b - a);
    });
    this._sizeSplineX.AddPoint(0.0, 1.0);
    this._sizeSplineX.AddPoint(1.0, 1.0);

    this._rateLimiter = 0.0;

    this._UpdateGeometry();
  }

  _CreateParticleF() {
    const life = (Math.random() * 0.75 + 0.25) * 10.0;
    return {
        position: new THREE.Vector3(
            (Math.random() * 2 - 1) * 4.0,
            (Math.random() * 2 - 1) * 4.0,
            (Math.random() * 2 - 1) * 4.0),
        size: (Math.random() * 0.5 + 0.5) * 2.0,
        colour: new THREE.Color(),
        alpha: 1.0,
        life: life,
        maxLife: life,
        rotation: Math.random() * 2.0 * Math.PI,
        velocity: new THREE.Vector3(0, 5, 0),
        blend: 0.0,
    };
  }

  _CreateParticleX() {
    const life = (Math.random() * 0.75 + 0.25) * 2.0;
    const dirX = (Math.random() * 2.0 - 1.0) * 3.0;
    const dirY = (Math.random() * 2.0 - 1.0) * 3.0;
    return {
        position: new THREE.Vector3(
            (Math.random() * 2 - 1) * 4.0,
            10 + (Math.random() * 2 - 1) * 4.0,
            (Math.random() * 2 - 1) * 4.0),
        size: (Math.random() * 0.5 + 0.5) * 0.5,
        colour: new THREE.Color(),
        alpha: 1.0,
        life: life,
        maxLife: life,
        rotation: Math.random() * 2.0 * Math.PI,
        velocity: new THREE.Vector3(dirX, 10, dirY),
        blend: 0.0,
    };
  }

  _CreateParticleS() {
    const life = (Math.random() * 0.75 + 0.25) * 15.0;
    return {
        position: new THREE.Vector3(
            (Math.random() * 2 - 1) * 4.0,
            10 + (Math.random() * 2 - 1) * 4.0,
            (Math.random() * 2 - 1) * 4.0),
        size: (Math.random() * 0.5 + 0.5) * 2.0,
        colour: new THREE.Color(),
        alpha: 1.0,
        life: life,
        maxLife: life,
        rotation: Math.random() * 2.0 * Math.PI,
        velocity: new THREE.Vector3(0, 5, 0),
        blend: 1.0,
    };
  }

  _AddParticles(timeElapsed) {
    this._rateLimiter += timeElapsed;
    const n = Math.floor(this._rateLimiter * 120.0);
    this._rateLimiter -= n / 120.0;

    for (let i = 0; i < n; i++) {
      const p = this._CreateParticleF();
      this._particles.push(p);
    }
    for (let i = 0; i < n; i++) {
      const p = this._CreateParticleS();
      this._particles.push(p);
    }
    for (let i = 0; i < n * 2; i++) {
      const p = this._CreateParticleX();
      this._particles.push(p);
    }
  }

  _UpdateGeometry() {
    const positions = [];
    const sizes = [];
    const colours = [];
    const angles = [];
    const blends = [];

    const box = new THREE.Box3();
    for (let p of this._particles) {
      positions.push(p.position.x, p.position.y, p.position.z);
      colours.push(p.colour.r, p.colour.g, p.colour.b, p.alpha);
      sizes.push(p.currentSize);
      angles.push(p.rotation);
      blends.push(p.blend);

      box.expandByPoint(p.position);
    }

    this._geometry.setAttribute(
        'position', new THREE.Float32BufferAttribute(positions, 3));
    this._geometry.setAttribute(
        'size', new THREE.Float32BufferAttribute(sizes, 1));
    this._geometry.setAttribute(
        'colour', new THREE.Float32BufferAttribute(colours, 4));
    this._geometry.setAttribute(
        'angle', new THREE.Float32BufferAttribute(angles, 1));
    this._geometry.setAttribute(
        'blend', new THREE.Float32BufferAttribute(blends, 1));
  
    this._geometry.attributes.position.needsUpdate = true;
    this._geometry.attributes.size.needsUpdate = true;
    this._geometry.attributes.colour.needsUpdate = true;
    this._geometry.attributes.angle.needsUpdate = true;
    this._geometry.attributes.blend.needsUpdate = true;

    this._geometry.boundingBox = box;
    this._geometry.boundingSphere = new THREE.Sphere();
    box.getBoundingSphere(this._geometry.boundingSphere);
  }

  _UpdateParticles(timeElapsed) {
    for (let p of this._particles) {
      p.life -= timeElapsed;
    }

    this._particles = this._particles.filter(p => {
      return p.life > 0.0;
    });

    for (let p of this._particles) {
      const t = 1.0 - p.life / p.maxLife;

      p.rotation += timeElapsed * 0.5;

      if (p.blend == 0.0) {
        if (p.velocity.x != 0.0) {
          p.alpha = this._alphaSplineX.Get(t);
          p.currentSize = p.size * this._sizeSplineX.Get(t);
          p.colour.copy(this._colourSplineX.Get(t));
        } else {
          p.alpha = this._alphaSplineF.Get(t);
          p.currentSize = p.size * this._sizeSplineF.Get(t);
          p.colour.copy(this._colourSplineF.Get(t));
        }
      } else {
        p.alpha = this._alphaSplineS.Get(t);
        p.currentSize = p.size * this._sizeSplineS.Get(t);
        p.colour.copy(this._colourSplineS.Get(t));
      }

      p.position.add(p.velocity.clone().multiplyScalar(timeElapsed));

      const drag = p.velocity.clone();
      drag.multiplyScalar(timeElapsed * 0.1);
      drag.x = Math.sign(p.velocity.x) * Math.min(Math.abs(drag.x), Math.abs(p.velocity.x));
      drag.y = Math.sign(p.velocity.y) * Math.min(Math.abs(drag.y), Math.abs(p.velocity.y));
      drag.z = Math.sign(p.velocity.z) * Math.min(Math.abs(drag.z), Math.abs(p.velocity.z));
      p.velocity.sub(drag);
    }

    this._particles.sort((a, b) => {
      const d1 = this._camera.position.distanceTo(a.position);
      const d2 = this._camera.position.distanceTo(b.position);

      if (d1 > d2) {
        return -1;
      }

      if (d1 < d2) {
        return 1;
      }

      return 0;
    });
  }

  Step(timeElapsed) {
    this._AddParticles(timeElapsed);
    this._UpdateParticles(timeElapsed);
    this._UpdateGeometry();
  }
}

class BlendingDemo {
  constructor() {
    this._Initialize();
  }

  _Initialize() {
    this._threejs = new THREE.WebGLRenderer({
      antialias: true,
    });
    this._threejs.setPixelRatio(window.devicePixelRatio);
    this._threejs.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(this._threejs.domElement);

    window.addEventListener('resize', () => {
      this._OnWindowResize();
    }, false);


    const loader = new THREE.CubeTextureLoader();
    const texture = loader.load([
        './resources/posx.jpg',
        './resources/negx.jpg',
        './resources/posy.jpg',
        './resources/negy.jpg',
        './resources/posz.jpg',
        './resources/negz.jpg',
    ]);

    this._backgroundScene = new THREE.Scene();
    this._backgroundScene.background = new THREE.Color(0x3f4f6a);

    const fov = 60;
    const aspect = 1920 / 1080;
    const near = 1.0;
    const far = 1000.0;
    this._backgroundCamera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    this._backgroundCamera.position.set(35, 10, 0);
    const controls = new OrbitControls(this._backgroundCamera, this._threejs.domElement);
    controls.target.set(0, 10, 0);
    controls.update();

    this._camera = new THREE.OrthographicCamera(0, 1920, 1280, 0, 0, 1);

    const mat = new THREE.MeshBasicMaterial({
        map: new THREE.TextureLoader().load('./resources/fire.jpg'),
        depthTest: true,
        depthWrite: false,
        transparent: true,
        blending: THREE.CustomBlending,
        blendEquation: THREE.AddEquation,
        blendSrc: THREE.OneFactor,
        blendDst: THREE.OneMinusSrcAlphaFactor,
    });

    const postPlane = new THREE.PlaneBufferGeometry(800, 800);
    const postQuad = new THREE.Mesh(postPlane, mat);
    postQuad.position.set(
        1920 - (800 * 0.5 + (1280 - 800) * 0.5),
        1280 * 0.5, 0);

    this._scene = new THREE.Scene();
    // this._scene.add(postQuad);

    this._particles = new ParticleSystem({
        parent: this._backgroundScene,
        camera: this._backgroundCamera,
    });

    this._UpdateText();

    this._previousRAF = null;
    this._RAF();
  }

  _OnWindowResize() {
    this._backgroundCamera.aspect = window.innerWidth / window.innerHeight;
    this._backgroundCamera.updateProjectionMatrix();
    this._camera.aspect = window.innerWidth / window.innerHeight;
    this._camera.updateProjectionMatrix();
    this._threejs.setSize(window.innerWidth, window.innerHeight);
  }

  _UpdateText() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('func').innerText = 'Subtract';
    document.getElementById('src').innerText = 'ONE';
    document.getElementById('dst').innerText = 'ONE';
  }

  _RAF() {
    requestAnimationFrame((t) => {
      if (this._previousRAF === null) {
        this._previousRAF = t;
      }

      this._Step(t - this._previousRAF);
      this._threejs.autoClear = true;
      this._threejs.render(this._backgroundScene, this._backgroundCamera);
      this._threejs.autoClear = false;
      this._threejs.render(this._scene, this._camera);
      this._RAF();

      this._previousRAF = t;
    });
  }

  _Step(timeElapsed) {
    const timeElapsedS = timeElapsed * 0.001;

    this._particles.Step(timeElapsedS);
  }
}


let _APP = null;

window.addEventListener('DOMContentLoaded', () => {
  _APP = new BlendingDemo();
});