import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { mergeGeometries } from "three/addons/utils/BufferGeometryUtils.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";

console.clear();

let scene = new THREE.Scene();
scene.background = new THREE.Color(0xaaaaaa);
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 1000);
camera.position.set(3, 5, 8).setLength(10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
//renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let light = new THREE.DirectionalLight(0xffffff, 1.8);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.2));

let solids = [
  new THREE.BoxGeometry(0.75, 0.75, 0.75).toNonIndexed(),
  new THREE.TetrahedronGeometry(0.5),
  new THREE.IcosahedronGeometry(0.5),
  new THREE.DodecahedronGeometry(0.5)
];
solids.forEach(s => {let scale = 0.25; s.scale(scale, scale, scale)});
let gFabric = () => {
  return solids[Math.floor(Math.random() * solids.length)].clone();
}

let setAttributes = (geometry, geometryIndex, colorIndex) => {
  let vertAmount = geometry.attributes.position.count;
  let gIndex = new Array(vertAmount).fill(geometryIndex);
  geometry.setAttribute("gIndex", new THREE.Float32BufferAttribute(gIndex, 1));
}

let amount = 4096;
let colors = {
  value: [new THREE.Color(0xff0000), new THREE.Color(0xffffff)]
}
let morphFactor = {value: 0}

let gs = new Array(amount).fill().map((_, idx) => {
  let gf = gFabric()
    .rotateX(Math.PI * 2 * Math.random())
    .rotateY(Math.PI * 2 * Math.random())
    .rotateZ(Math.PI * 2 * Math.random());
  setAttributes(gf, idx);
  return gf;
});
//console.log(gs)
let g = mergeGeometries(gs);

let vertexData = [];
let v = new THREE.Vector3();
let rv = new THREE.Vector3();
// box
for(let z = 0; z < 16; z++){
  for(let y = 0; y < 16; y++){
    for(let x = 0; x < 16; x++){
      rv.randomDirection().setLength(Math.random() * 0.25 + 0.25);
      v.set(x,y,z).subScalar(7.5).add(rv);
      vertexData.push(v.x, v.y, v.z, Math.random() < 0.125 ? 0 : 1);
    }
  }
}

// helix
let scale = new THREE.Vector3(20, 30, 0.5);
let axis = new THREE.Vector3(0, 1, 0);
let turns = 2.7 * 0.5;
for(let i = 0; i < amount; i++){
  v.random();
  let a = v.y * Math.PI * 2 * turns;
  v.subScalar(0.5).multiply(scale).applyAxisAngle(axis, a);
  vertexData.push(v.x, v.y, v.z, 0);
}

// init rotation
for(let i = 0; i < amount; i++){
  v.random().subScalar(0.5).multiplyScalar(Math.PI * 2);
  vertexData.push(v.x, v.y, v.z, 0);
}

// rotation speed
for(let i = 0; i < amount; i++){
  v.random().subScalar(0.5).multiplyScalar(Math.PI * 2 * ( 0.1 + Math.random() * 0.1));
  vertexData.push(v.x, v.y, v.z, 0);
}

let dataTexture = new THREE.DataTexture(new Float32Array(vertexData), amount, 4, THREE.RGBAFormat, THREE.FloatType);
dataTexture.needsUpdate = true;
//console.log(dataTexture);
let posData = {value: dataTexture};

let time = {
  value: 0
}

let m = new THREE.MeshLambertMaterial({
  //wireframe: true,
  vertexColors: true,
  onBeforeCompile: shader => {
    shader.uniforms.time = time;
    shader.uniforms.colors = colors;
    shader.uniforms.morphFactor = morphFactor;
    shader.uniforms.posData = posData;
    shader.vertexShader = `
      uniform float time;
      uniform vec3 colors[2];
      uniform float morphFactor;
      uniform sampler2D posData;
      
      attribute float gIndex;
      
      // https://forum.gamemaker.io/index.php?threads/solved-3d-rotations-with-a-shader-matrix-or-a-matrix-glsl-es.61064/
      mat4 rx(float a) {
        return mat4( 1.0, 0.0, 0.0, 0.0,
                     0.0,cos(a),sin(a), 0.0,
                     0.0,-sin(a),cos(a), 0.0,
                     0.0, 0.0, 0.0, 1.0);
      }

      mat4 ry(float a){
        return mat4( cos(a),0.0, -sin(a), 0.0,
                     0.0, 1.0, 0.0, 0.0,
                     sin(a), 0.0, cos(a), 0.0,
                     0.0,0.0,0.0,1.0);
      }
               
      mat4 rz(float a){
        return mat4( cos(a), sin(a), 0.0, 0.0,
                     -sin(a), cos(a), 0.0, 0.0,
                     0.0        , 0.0       ,1.0 ,0.0,
                     0.0        , 0.0       ,0.0 ,1.0);
      }
      ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      
      mat4 rotationXYZ(vec3 angles){
        return rz(angles.z) * ry(angles.y) * rx(angles.x);
      }
      
      
      ${shader.vertexShader}
    `.replace(
      `#include <color_vertex>`,
      `#include <color_vertex>
        
        ivec2 tSize = textureSize(posData, 0);
        
        int colIdx = int(mod(gIndex, float(tSize.x)));
        int rowIdx = int(floor(gIndex / float(tSize.x))) * 2;
        
        vec4 source = texelFetch(posData, ivec2(colIdx, rowIdx), 0);
        int colorIdx = int(source.a);
        vec3 posSource = source.rgb;
        vec3 posDestiny = texelFetch(posData, ivec2(colIdx, rowIdx + 1), 0).rgb;
        
        vColor = colors[colorIdx];
        
        // rotation
        vec3 rotInit = texelFetch(posData, ivec2(colIdx, rowIdx + 2), 0).rgb;
        vec3 rotSpeed = texelFetch(posData, ivec2(colIdx, rowIdx + 3), 0).rgb;
        
        float t = time;
        
        vec3 totalRotation = rotInit + rotSpeed * t;
        
        mat4 rotXYZ = rotationXYZ(totalRotation);
        
      
      `
    ).replace(
      `#include <beginnormal_vertex>`,
      `#include <beginnormal_vertex>
      
      objectNormal = normalize(vec3(rotXYZ * vec4(objectNormal, 1.)));
      `
    )
     .replace(
      `#include <begin_vertex>`,
      `#include <begin_vertex>
        transformed = vec3(rotXYZ * vec4(transformed, 1));
        transformed += mix(posSource, posDestiny, morphFactor);
      `
    );
    console.log(shader.vertexShader);
  }
})

let o = new THREE.Mesh(g, m);
scene.add(o);

let clock = new THREE.Clock();

let gui = new GUI({width: 400});
gui.add(morphFactor, "value", 0, 1).name("morph factor");

renderer.setAnimationLoop((_) => {
  let t = clock.getElapsedTime();
  time.value = t;
  controls.update();
  renderer.render(scene, camera);
});