import { IcosahedronGeometry } from "https://cdn.skypack.dev/three"
import * as THREE from "https://cdn.skypack.dev/three"
import { OrbitControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/OrbitControls"

const field = new Field([
  new PointSource(0, 0, 0, 0),
  new PointSource(1, 0, 0, 0),
  new PointSource(1, 1, 0, 0),
  new PointSource(3, 0, 0, 0)
], 40)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(90, 1, 0.1, 100)
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: document.getElementById('cvs')
})
renderer.setSize(300, 300)
renderer.setClearColor(0xffffff, 1)
const shaderMaterial = new THREE.ShaderMaterial({
  vertexShader: `
  varying float d;
  void main() {
    d = distance(position, vec3(0, 0, 0));
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }
  `,
  fragmentShader: `
float colormap_red(float x) {
    if (x < 0.7) {
        return 4.0 * x - 1.5;
    } else {
        return -4.0 * x + 4.5;
    }
}

float colormap_green(float x) {
    if (x < 0.5) {
        return 4.0 * x - 0.5;
    } else {
        return -4.0 * x + 3.5;
    }
}

float colormap_blue(float x) {
    if (x < 0.3) {
       return 4.0 * x + 0.5;
    } else {
       return -4.0 * x + 2.5;
    }
}
vec4 colormap(float x) {
    float r = clamp(colormap_red(x), 0.0, 1.0);
    float g = clamp(colormap_green(x), 0.0, 1.0);
    float b = clamp(colormap_blue(x), 0.0, 1.0);
    return vec4(r, g, b, 1.0);
}
  varying float d;
  void main() {
    gl_FragColor = colormap(d);
  }
  `
})
const obj = new THREE.Mesh(field.geometry, shaderMaterial)
scene.add(obj)
const controls = new OrbitControls(camera, renderer.domElement)
camera.position.set(0, 0, 1.5)
camera.lookAt(scene.position)
controls.minDistance = 1.2
controls.maxDistance = 3
controls.zoomSpeed = 0.1
controls.update()
function animate () {
  requestAnimationFrame(animate)
  controls.update()
  renderer.render(scene, camera)
}
animate()

function PointSource (x, y, z, phase) {
  this.x = 2 * Math.PI * x
  this.y = 2 * Math.PI * y
  this.z = 2 * Math.PI * z
  this.ri = Math.sqrt(this.x ** 2 + this.y ** 2 + this.z ** 2)
  this.phase = phase
}
function Field (points, detail = 20, useGPU = false) {
  this.points = points
  if (this.points.length === 0) {
    return
  }
  this.geometry = new IcosahedronGeometry(1, detail)
  if (useGPU) {
    // TODO: use compute shader
  } else {
    const attr = this.geometry.getAttribute('position')
    for (let i = 0; i < attr.count; i++) {
      const offset = i * attr.itemSize
      const x = attr.array[offset]
      const y = attr.array[offset + 1]
      const z = attr.array[offset + 2]
      const riComplex = this.points.reduce((pre, point) => {
        // vec(x,y,z) is unit vec
        const psi = (x * point.x + y * point.y + z * point.z) + point.phase
        pre[0] += Math.cos(psi)
        pre[1] += Math.sin(psi)
        return pre
      }, new Float32Array(2))
      const ri = Math.sqrt(riComplex[0] ** 2 + riComplex[1] ** 2) / points.length
      // update new coordinate
      // console.debug(ri)
      attr.array[offset] = ri * x
      attr.array[offset + 1] = ri * y
      attr.array[offset + 2] = ri * z
    }
  }
}