WebGL Particle

based on https://github.com/kotofurumiya/xenogl/tree/master/__tests__/browser/particle

by mizarjp

HTML

<script src="https://cdn.rawgit.com/kotofurumiya/xenogl/v0.1.1/build/xenogl.min.js"></script>

JavaScript 1.7

'use strict';
// based on https://github.com/kotofurumiya/xenogl/tree/master/__tests__/browser/particle
// see license https://github.com/kotofurumiya/xenogl/blob/master/LICENSE.md 

(async function main() {
const canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const xgl = new XenoGL.WebGL2(canvas);
const gl = xgl._context;

// パーティクル数
const PARTICLE_NUM = 4096;
// 初速度上限
const MAX_SPEED = 0.005;
// 生存時間上限(ミリ秒)
const MAX_LIFE = 2000.0;
// 初速度偏心
const VELOCITY_X_ECC = 0.0;
const VELOCITY_Y_ECC = 0.001;
// 加速
const ACCEL_X = 0.0;
const ACCEL_Y = -0.000003;
// 加速揺れ幅
const ACCEL_DEVI = 0.000003;
// 速度抵抗
const RESISTANCE = 0.998;

// 発生元座標
const originPoint = new Float32Array([0.0, 0.0]);
canvas.addEventListener('mousemove', (mEvent) => {
  originPoint[0] = -1.0 + (mEvent.clientX / canvas.width) * 2;
  originPoint[1] = 1.0 - (mEvent.clientY / canvas.height) * 2;
});
canvas.addEventListener('mouseout', (mEvent) => {
  originPoint[0] = NaN;
  originPoint[1] = NaN;
});

// 加速度ベクトル
const accelVector = new Float32Array([ACCEL_X, ACCEL_Y]);

const updaterVsSource = `#version 300 es
uniform vec2 origin;
uniform float elapsedTimeDelta;
uniform vec2 accel;
uniform float decel;
in vec2 particlePosition;
in vec2 particleVelocity;
in vec2 particleInitialVelocity;
in float particleAge;
in float particleLife;
out vec2 vertexPosition;
out vec2 vertexVelocity;
out vec2 vertexInitialVelocity;
out float vertexAge;
out float vertexLife;
void main() {
  if(particleAge > particleLife) {
    vertexPosition = origin;
    vertexVelocity = particleInitialVelocity;
    vertexInitialVelocity = particleInitialVelocity;
    vertexAge = 0.0;
    vertexLife = particleLife;
  } else {
    vertexPosition = particlePosition + (particleVelocity * elapsedTimeDelta);
    vertexVelocity = (particleVelocity + accel) * decel;
    vertexInitialVelocity = particleInitialVelocity;
    vertexAge = particleAge + elapsedTimeDelta;
   ...