import * as THREE from "https://cdn.skypack.dev/three@0.148.0";

// THREE.js particle system
const PARTICLE_COUNT = 100000; // fastest of all, runs well up to 1mil or more
const PARTICLE_SIZE = 2.0;

const canvas = document.getElementById('particles');
const width = window.innerWidth;
const height = window.innerHeight;

// initialize a THREE renderer & scene
const renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
const scene = new THREE.Scene();

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
camera.position.z = 1;
camera.position.x = width/2;
camera.position.y = height/2;
scene.add( camera );

// initialize particle geometry
const geo = new THREE.BufferGeometry();

// initialize shader material
// SHADER CODE
const fragShader = `
uniform float time;
varying vec2 vUv;
uniform vec2 resolution;
void main()	{
    gl_FragColor = vec4(1.);
}
`;

const vertShader = `
uniform float time;
varying vec2 vUv;
attribute vec3 velocity;
uniform vec2 resolution;
void main() {
    vUv = uv;
    vec3 p = position + velocity * time;
    p = mod(p, vec3(resolution, 0.));
    gl_Position = projectionMatrix * modelViewMatrix * vec4( p, 1.0 );
    gl_PointSize = ${PARTICLE_SIZE.toFixed(2)};
}
`;

const mat = new THREE.ShaderMaterial({
  fragmentShader: fragShader,
  vertexShader: vertShader,
  alpha: true,
  transparent: true,
  uniforms: {
    time: { value: 1.0 },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
  },
});

// an empty array to hold particle positions (x,y and z, so 3x the PARTICLE_COUNT)
const pos = new Float32Array(PARTICLE_COUNT*3);
const vel = new Float32Array(PARTICLE_COUNT*3);

// spawn particles / set initial pos/vel
for(let i = 0; i < PARTICLE_COUNT; i++) {
  let pidx = i*3;
  
  // set its initial position + speed
  vel[pidx] = Math.random()-.5;   // random x vel
  vel[pidx+1] = Math.random()-.5; // random y vel
  
  pos[pidx] = (window.innerWidth / 2);
  pos[pidx+1] = (window.innerHeight / 2);
}

// instantiate the buffer attributes
geo.setAttribute( 'position', new THREE.BufferAttribute( pos, 3 ) );
const geoPos = geo.attributes.position.array;

geo.setAttribute( 'velocity', new THREE.BufferAttribute( vel, 3 ) );

// create a mesh
const mesh = new THREE.Points(geo, mat);
scene.add(mesh);

// animation loop
const loop = (time) => {
 
  mat.uniforms.time.value = time * .25;
  
  // render the scene
  renderer.render(scene, camera);
  
  window.requestAnimationFrame(loop);
}

// make rocket go now
window.requestAnimationFrame(loop);