import { glMatrix, mat4, vec3 } from "gl-matrix"; // либа которая поможет складывать
export class Matrix {
  // я решил добавить коллбек который будет вызываться каждый раз когда какой-то метод в классе вызывали.
  constructor(onUpdate = () => {}) {}
  // объект с матрицами, по сути кеш и поможет в правильном порядке собирать матрицы, а это очень важно!
  #matrices = {};
  // настройка камеры, до сих пор не разобрался как это работает, но позволяет разместить фигуру на нужной дистанции.
  setOrtho(left, right, bottom, top, near, far) {}
  // значение по умолчанию
  #scale = 1;
  // сеттер для управление scale
  setScale(ratio) {}
  // решил сделать геттор для получение актуального значения,
  // чтоб в будущем использовать для всяких рассчетов с анимацией.
  getScale() {}
  #translate = [0, 0, 0];
  /**
   * x, y, z смещение
   * @param {[number, number, number]}params
   */
  setTranslate(params) {}
  getTranslate() {}
  // ну и rotate, не объединял в один метод, потому, собирался анимировать каждое это значение отдельно.
  // если мне важно было знать для реализации translate и scale, то на rotate было все равно, поэтому геттеров не делал. Зачем?
  setRotateX(deg) {}
  setRotateY(deg) {}
  setRotateZ(deg) {}
  // перемножаем все матрицы и получаем итоговую которую нужно прокинуть в шейдер
  getCurrent() {}
}

import { Matrix } from "./Matrix";
export class Mesh {
  /**
   *
   * @param {Float32Array} positions
   * @param {Float32Array} uv
   */
  // получаем вершины и текстурные координаты
  constructor({ positions, uv }) {
    this.positions = positions;
    this.uv = uv;
    // указываем drawArrays сколько у нас треугольников, так как для треугольника всегда нужно 3 точки, то можем смело делить массив с точками на 3 и получим итоговое значение треугольников
    this.count = this.positions.length / 3;
    // личная матрица для модельки
    this.matrix = new Matrix();
  }
  // ссылочки на буфера
  positionsBuffer;
  uvBuffer;
  /**
   * @param {WebGLRenderingContext} gl
   */
  // придумал для себя такой способ как прокидывать контекст для модельки, мне хотелось чтоб нужные классы моделей были уже созданы, их нужно только прокинуть в класс рендера.
  attachRender(gl) {
    this.gl = gl;
  }
  /**
   * Создаем буфера, загружаем в них данные, храним эти буферы потом в классе, чтоб легко достать
   */
  initializeBuffers() {}
}

// вершинный шейдер
precision mediump float;
uniform mat4 uMeshMatrix; // смещение модели
uniform mat4 uCameraMatrix; // мировая камера
attribute vec4 aPosition; // вершины
attribute vec2 aTextureCoords; // текстурные координаты
varying vec2 vTextureCoords; // интерполированные переменные,
// на каждый пиксель между вершинами передаются интерполированные значения текстурных координат в фрагментный шейдер
void main(){
    gl_Position = uCameraMatrix * uMeshMatrix * aPosition;
    vTextureCoords = aTextureCoords;
}

// фрагментный шейдер
#extension GL_OES_standard_derivatives : enable // включаем штуку которая делает наши линии красивыми
precision mediump float; // выставляем как нужно округлять float значения
uniform vec3 uLineColor; // цвет линии
uniform vec3 uBgColor; // цвет фона
uniform float uLineWidth; // ширина линии
varying vec2 vTextureCoords; // текстурные координаты которые нужны чтоб высчитать грани
// моя супер логика для расчета границ
// я не могу вспомнить как я это считал, кажется полтора года назад я был умней.
float border(vec2 uv, float uLineWidth, vec2 gap) {
  // переменная gap нужна была, чтоб сделать линии более плавными, она рассчитывается динамически на основе текстурных координат благодаря директиве
  // smoothstep получал точка A и точку B, а потом получал какое-то значение и на основе этого значения возвращал плавное соотношение между А И Б.
  vec2 xy0 = smoothstep(vec2(uLineWidth) - gap, vec2(uLineWidth) + gap, uv);
  vec2 xy1 = smoothstep(vec2(1. - uLineWidth) - gap, vec2(1. - uLineWidth) + gap, uv);
  vec2 xy = xy0 - xy1;
  return clamp(xy.x * xy.y, 0., 1.);
}
void main() {
  vec2 uv = vTextureCoords;
  vec2 fw = vec2(uLineWidth + 0.05);
  #ifdef GL_OES_standard_derivatives
  // прогрессивное улучшение, на случай если директива не работает
    fw = fwidth(uv);
  #endif
  // получаем коэффициент который потом используем чтоб красить в нужным цветом.
  float br = border(vTextureCoords, uLineWidth, fw);
  // mix смешивает цвета, если значение 1 вернет полный цвет uLineColor, если 0, то вернет uBgColor.
  // А если значение где-то посередине, то вернет какой-то общий цвет между ними двумя.
  // ВИВА МАТЕМАТИКА
  gl_FragColor = vec4(mix(uLineColor, uBgColor, br), 1.);
}

import { vertex, fragment } from "./shaders"; // никакой магии, там просто шейдеры в строках
import { Mesh } from "./Mesh";
import { Matrix } from "./Matrix";
import {
  createProgramFromTexts,
  resizeCanvasToDisplaySize,
  saveRectAspectRatio,
} from "./helpers";
export class ModelRender {
  // я предпочел чтоб класс сам создавал себе канвас, ему нужно просто указать куда его вставлять
  canvas = document.createElement("canvas");
  // получаем контекст, тут еще полифил для ie11
  #gl = this.canvas.getContext("webgl");
  // Получаем экстеншен, чтоб дальше его включать.
  // Тут возвращается номер, который потом используется чтоб понять какой экстеншен нужно включить.
  #derivatives = this.#gl.getExtension("OES_standard_derivatives");
  // Создаем программу из любимых шейдеров
  #program = createProgramFromTexts(this.#gl, vertex, fragment);
  // удобные мапы для работы со ссылками на атрибуты
  #attrs = {
    position: this.#gl.getAttribLocation(this.#program, "aPosition"),
    textureCoords: this.#gl.getAttribLocation(this.#program, "aTextureCoords"),
  };
  // мапа для работы ссылками на переменные
  #uniforms = {
    meshMatrixLocation: this.#gl.getUniformLocation(
      this.#program,
      "uMeshMatrix"
    ),
    ...
  };
  constructor() {
    const gl = this.#gl;
    // говорим карте проверять уровень треугольников, чтоб рисовалось только то что на переднем фоне
    gl.enable(gl.DEPTH_TEST);
    // загружаем программу в карту
    gl.useProgram(this.#program);
    // включаем атрибуты, ВСЕ НУЖНО ВКЛЮЧАТЬ
    gl.enableVertexAttribArray(this.#attrs.position);
    gl.enableVertexAttribArray(this.#attrs.textureCoords);
  }
  meshesByType = {};
  models = {};
  // я загружал сразу все модели в класс, а потом по ключу инициализировал нужную
  #initializeModel = (type) => {};
  // `div` элемент в который вставят `canvas`
  /** @type {HTMLElement} */
  holder;
  #modelName;
  // мне показалось прикольным переключаться между модельками с помощью сеттера
  set modelName(type) {}
  /**
   * Сделал геттер, который возвращал текущую модель. Нужно, чтоб была возможность анимировать модельку. Менять ей состояние матрицы.
   * @returns {Object<string, Mesh>}
   */
  get currentModel() {
      return this.meshesByType[this.#modelName]
  }
  // объект из которого читались цвет фона и линии, а так же толщина
  // я заранее знал на какой странице какие цвета должны быть, поэтому не выносил этот объект в Mesh.
  meshParams = {
    bgColor: 0,
    lineColor: 0,
    lineWidth: 0.01,
  };
  // хелпер который позволит правильно позицинировать модельку при ресайзе экран
  resize = () => {};
  // просто матрица по умолчанию
  #cameraMatrix = mat4.create();
  // создал матрицу для мировой камеры, которая при каждом изменении записывала текущие расчеты матрицы.
  cameraMatrix = new Matrix(() => {
      this.#cameraMatrix = this.cameraMatrix.getCurrent();
  });
  // вставляем канвас в контейнер, выставляем камеру по значением которые подбирал вручную
  init() {
    const gl = this.#gl;
    this.holder.appendChild(this.canvas);
    this.cameraMatrix.setOrtho(0, 70, 70, 0, 120, -120);
    this.resize() // важный момент, который поможет правильно выстроить канвас и прочее
    // записываем значения в переменные которые получил из meshParams
    const { uLineColorLocation, uBgColorLocation, uLineWidthLocation } =
      this.#uniforms;
    gl.uniform3fv(uLineColorLocation, this.meshParams.lineColor);
    gl.uniform3fv(uBgColorLocation, this.meshParams.bgColor);
    gl.uniform1f(uLineWidthLocation, this.meshParams.lineWidth);
  }
  /**
   * @param {Mesh} mesh
   */
  #renderMesh = (mesh) => {
    const gl = this.#gl;
    // ссылки на атрибуты
    const { position, textureCoords } = this.#attrs;
    // включаем буфер и записываем буфер фигуры в атрибут
    gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionsBuffer);
    gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, mesh.uvBuffer);
    gl.vertexAttribPointer(textureCoords, 2, gl.FLOAT, false, 0, 0);
    gl.uniformMatrix4fv(
      this.#uniforms.meshMatrixLocation,
      false,
      mesh.matrix.getCurrent()
    );
    // РИСУЕМ!
    gl.drawArrays(gl.TRIANGLES, 0, mesh.count);
  };
  render() {
    const gl = this.#gl;
    // перед каждым рендером, очищаем полотно от всего.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    // на всякий случай всегда прокидываю актуальные значение, если произошел ресайз окна
    gl.uniformMatrix4fv(
      this.#uniforms.uCameraMatrixLocation,
      false,
      this.#cameraMatrix
    );
    // получил объект с фигурами
    const meshes = this.currentModel();
    // на каждую фигуры вызвал рендер фигуры
    Object.values(meshes).forEach(this.#renderMesh);
  }
}

let app = new ModelRender();
app.models = parsedModels; // объект с распарсенными моделями, { apple: { apple: { vertexes: [], uv: [] } }. Почему 2 apple? Потому, что код не учитывает, что у модельки не могут быть вложенных моделей.
app.holder = document.querySelector("#place");
app.modelName = "apple"; // указываем какую модель нужно рендерить
app.meshParams = appleParams; // цвет, толщина линии
app.init();
app.render(); // рендер с параметрами по умолчанию.
const model = app.currentModel();
const props = { x: 0 };
// Тут будет вся анимация.
anime({
  targets: props,
  easing: "linear",
  loop: true,
  x: { value: [0, 360], duration: 7e3 },
  update() {
    model.apple.setXRotate(props.x);
    app.render();
  },
});

app.canvas.addEventListener("webglcontextlost", () => {
  // your restore logic
  console.log("restore");
});