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

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
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);

let light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(0.5, 1, 0.25);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

const arraybuffer = new Uint32Array([0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7]);
const geometry = new THREE.InstancedBufferGeometry().copy(new THREE.BoxGeometry(1, 1, 1));
geometry.instanceCount = Infinity;
const iIB = new THREE.InstancedInterleavedBuffer(arraybuffer, 2, 1);
geometry.setAttribute("attr1", new THREE.InterleavedBufferAttribute(iIB, 1, 0));
geometry.setAttribute("attr2", new THREE.InterleavedBufferAttribute(iIB, 1, 1));

let material = new THREE.MeshLambertMaterial({
  color: 0xff0000,
  //wireframe: true,
  onBeforeCompile: shader => {
    shader.vertexShader = `
      attribute uint attr1;
      attribute uint attr2;
      ${shader.vertexShader}
    `.replace(
      `#include <begin_vertex>`,
      `#include <begin_vertex>
        transformed.xy += vec2(attr1, attr2);
      `
    );
    console.log(shader.vertexShader)
  }
});

let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});