DEV Community: Nikita Nafranets

Знакомство фронтендера с WebGL: четкие линии

Nikita Nafranets — Tue, 06 Jul 2021 22:39:46 +0000

Свой .obj парсер, свой webgl

Первое, что я сделал адаптировал код из песочницы и использовал gl.LINES.

(извиняюсь за качество, код с той песочницей потерял и даже по памяти результат восстановить не могу)

Показав дизайнеру, я ожидал услышать, что все идеально/перфектно, ты отлично поработал! Но услышал:

Выглядит круто! А теперь добавь текстуры, модель не должна просвечиваться...

И тут я понял, что gl.LINES мне никак не помогут для решения задачи, я просто пошел не совсем туда. Мне почему-то казалось, что самое важное это линии, но потом понял, что должен был залить цветом модельку и выделить на ней грани поверхностей другим цветом.

Я понял, что мне все же нужны uv (текстурные координаты), потому, что без них невозможно закрашивать фигуру правильно, но те uv который генерировал редактор моделей не подходили под закрашивание. Там была какая-та своя логика по генерации координат.

Подняв этот вопрос с человеком который показал парсинг. Он мне дал новую песочницу в которой показал, как генерировать текстурные координаты, чем вселил новую надежду. Он так же набросал простейший шейдер который рисовал линии. Взял его решение, я обновил свою песочницу и обновил парсер.
Код парсера в статье я покажу впервые.

const uv4 = [[0, 0], [1, 0], [1, 1], [0, 1]]; // захаркоженные координаты текстур

// функция которая парсит .obj и выплевывает вершины с текстурными координатами.
export function getVBForVSTFromObj(obj) {
  const preLines = obj.split(/[\r\n]/).filter(s => s.length);

  // функция которая отдавала все строки по первому вхождению
  const exNs = (a, fchar) =>
    a
      .filter(s => s[0] === fchar)
      .map(s =>
        s
          .split(" ")
          .filter(s => s.length)
          .slice(1)
          .map(Number)
      );

  // та же функция что выше, только для поверхностей (faces) и дополнительно парсила сами поверхности
  const exFs = s =>
    s
      .filter(s => s[0] === "f")
      .map(s =>
        s
          .split(/\s+/)
          .filter(s => s.length)
          .slice(1)
          .map(s => s.split("/").map(Number))
      );

  const vertexList = exNs(preLines, "v"); // получаем все вершины
  const faceList = exFs(preLines); // все поверхности

  const filteredFaceList = faceList.filter(is => is.length === 4); // собираем поверхности только с 4 точками, т.е. квады
  const vertexes = filteredFaceList
    .map(is => {
      const [v0, v1, v2, v3] = is.map(i => vertexList[i[0] - 1]);
      return [[v0, v1, v2], [v0, v2, v3]];
    }) // склеиваем треугольники 
    .flat(4);


  const uvs = Array.from({ length: filteredFaceList.length }, () => [
    [uv4[0], uv4[1], uv4[2]],
    [uv4[0], uv4[2], uv4[3]]
  ]).flat(4); // собираем текстурные координаты под каждую поверхность

  return [vertexes, uvs];
}

Дальше, я обновил у себя фрагментный шейдер:

precision mediump float;

varying vec2 v_texture_coords; // текстурные координаты из вершинного шейдера
// define позволяет определять константы
#define FN (0.07) // толщина линии, просто какой-то размер, подбирался на глаз
#define LINE_COLOR vec4(1,0,0,1) // цвет линии. красный.
#define BACKGROUND_COLOR vec4(1,1,1,1) // остальной цвет. белый.

void main() {
  if ( 
    v_texture_coords.x < FN || v_texture_coords.x > 1.0-FN ||
    v_texture_coords.y < FN || v_texture_coords.y > 1.0-FN 
  )
    // если мы находимся на самом краю поверхности, то рисуем выставляем цвет линии
    gl_FragColor = LINE_COLOR;
  else 
    gl_FragColor = BACKGROUND_COLOR;
}

(песочница)

И, о боже! Вот он результат который я так хотел. Да грубо, линии жесткие, но это шаг вперед. Дальше я переписал код шейдера на smoothstep (специальная функция которая позволяет делать линейную интерполяцию) и поменял еще стиль нейминга переменных.

precision mediump float;
uniform vec3 uLineColor; // теперь цвета и прочее передаю js, а не выставляю константы
uniform vec3 uBgColor;
uniform float uLineWidth;

varying vec2 vTextureCoords;

// функция которая высчитала на основе uv и "порога" и сколько должна идти плавность
// то есть через threshold я говорил где должен быть один цвет, а потом начинается другой, а с помощью gap определял долго должен идти линейный переход. Чем выше gap, тем сильнее размытость.
// и которая позволяет не выходить за пределы от 0 до 1
float calcFactor(vec2 uv, float threshold, float gap) {
  return clamp(
    smoothstep(threshold - gap, threshold + gap, uv.x) + smoothstep(threshold - gap, threshold + gap, uv.y), 0., 
    1.
  );
}

void main() {
  float threshold = 1. - uLineWidth;
  float gap = uLineWidth + .05;
  float factor = calcFactor(vTextureCoords, threshold, gap);
  // функция mix на основе 3 аргумента выплевывает 1 аргумент или 2, линейно интерпретируя.
  gl_FragColor = mix(vec4(uLineColor, 1.), vec4(uBgColor, 1.), 1. - factor);
}

И вот, красота! Дизайнер доволен и я тоже. Да есть какие-то мелочи, но это лучшее что я смог тогда родить.

Хотя особо внимательные сразу заметят, что размеры квадратов стали больше, чем на прошлой "грубой" версии.
А я был не особо внимательным, поэтому заметил это только спустя 2 недели. Возможно, эйфория от успеха вскружила мне голову...

Доработка шейдера

Когда я закончил первую реализация рендера, я пошел делать другие задачи по проекту. Но в течении 2 недель, я понял, что недоволен тем как выглядит модель, они точно не выглядели как на рендере у дизайнера, да еще меня беспокоило, что я толщина линий все равно была какой-то не такой.

Мне было не понятно, почему у меня такая крупная сетка на яблоке, хотя в cinema4d и блендер, она довольно мелкая.
Плюс, я решил поделиться со своими переживаниями с коллегой на работе, и когда я ему начал объяснять как работает мой шейдер, я понял, что уже и не помню как я вообще до него допер и при попытке объяснить ему, я начал по новой экспериментировать с шейдером.

Для начала я вспомнил трюк из уроков по шейдерам и просто закидывал цвета на основе x координаты и получил для себя интересный результат.

Я понял, что все это время у меня были вся эта мелкая сетка, но я почему-то игнорировал ее. Поиграв еще, я наконец-то понял, что зарисовал только 2 грани из 4 у каждой поверхности, что привело к тому, что у меня такая крупная сетка.

У меня не получалось используя степы и прочее, реализовать нужную мне сетку, я получал какой-то бред.

Тогда, я решил сначала написать топорно и родил такой шейдер.

if (vTextureCoords.x > uLineWidth && vTextureCoords.x < 1.0 - uLineWidth && vTextureCoords.y > uLineWidth && vTextureCoords.y < 1.0 - uLineWidth) {
    gl_FragColor = vec4(uBgColor, 1.);
  } else {
    gl_FragColor = vec4(uLineColor, 1.);
  }

Я наконец-то получил нужный результат.

Дальше, за час вместе с докой по функциям из webgl. Я смог переписать код на более близкий к webgl.

float border(vec2 uv, float uLineWidth, vec2 gap) {
  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);

  float br = border(vTextureCoords, uLineWidth, fw);
  gl_FragColor = vec4(mix(uLineColor, uBgColor, br), 1.);
}

Я получил мелкую сетку. Ура!

Но, у меня оставалась проблема, что чем ближе к краю, тем хуже различаются линии.
Насчет этого вопроса, я обратился за помощью в чат и мне рассказали про OES_standard_derivatives экстеншена для webgl. Это что-то вроде плагинов, которые добавляли в glsl новые функции или включали какие-то возможности в рендере. Добавив в код шейдера fwidth (не забывайте включать экстеншены, до того как соберете программу, а то буду проблемы), функцию которая появилась после подключение экстеншена. Я добился того, чего хотел.

  #ifdef GL_OES_standard_derivatives
    fw = fwidth(uv);
  #endif

Боже, какая красота!

Осталось только написать как я делал анимацию!

Знакомство фронтендера с WebGL: первые наброски

Nikita Nafranets — Tue, 06 Jul 2021 22:31:31 +0000

Вспоминаем ради чего мы начали изучать WebGL

После недельного чтения ресурса и экспериментов у меня появился кустарный REPL, в котором я мог быстро набрасывать шейдеры и другой код, чтоб поэкспериментировать и найти решение.

Я пишу статью, спустя 2 месяца после того как закончил работу над задачей и осталась только такая песочница ->

Вооружись знаниями и реплом, я пошел искать то, что сможет распарсить мне .obj файлик на вершины.
Единственное в интернете которое более/менее правильно распарсило мне файлик это был npm пакет
webgl-obj-loader. Хотя в нем был досадный баг который попортил мне немало крови.

Mesh: Fix bug with triangulation #66

qtip posted on Oct 30, 2019

The triangulate function splits an ngon into individual triangles. This commit fixes a bug where the mesh parsing code was ignoring the emitted triangles and instead using the original ngon indices.

View on GitHub

Первые наброски

С помощью библиотеки, я сразу смог добиться какого-то результата в своей песочнице.

Vertex:

attribute vec4 a_position; // объявляем переменную в которую будем прокидывать вершины яблока.

uniform mat4 u_matrix; // матрица которая будет нам помогать трансформировать модель

void main(){
    gl_Position = u_matrix * a_position; // у glsl есть встроенные возможности по работе с матрицами. Тут он сам за нас перемножает вершины на матрицы и тем самым смещает их куда надо.
}

Fragment:

precision mediump float; // точность для округления. 

void main() {
  gl_FragColor = vec4(1., 0., 0., 1.); // заливаем красным
}

Сам код

import { vertex, fragment } from './shaders'; // через parcel импортирует тексты
import { createCanvas, createProgramFromTexts } from "./helpers"; 
import { m4 } from "./matrix3d"; // после изучение webgl на webgl fund, мне в наследство досталась библиотека которая умеет работает с 3д матрицами.
import appleObj from "./apple.obj"; // моделька яблока
import * as OBJ from "webgl-obj-loader"; // наша либа которая распарсит obj


function main() {
  const apple = new OBJ.Mesh(appleObj); // загружаем модель
  const canvas = createCanvas(); // создаю canvas и вставляю в body
  const gl = canvas.getContext("webgl"); // получаю контекст
  const program = createProgramFromTexts(gl, vertex, fragment); // создаю программу из шейдеров
  gl.useProgram(program); // линкую программу к контексту

  // получаю ссылку на атрибут
  const positionLocation = gl.getAttribLocation(program, "a_position");

  // у либы была готовая функция, которая за меня создавала буфер и прокидывала распарсенные данные в буферы. Из .obj можно было достать не только вершины, но и другие координаты которые могут быть полезны.
  OBJ.initMeshBuffers(gl, apple);

  gl.enableVertexAttribArray(positionLocation); // активирую атрибут, зачем это делать не знаю, но не сделаешь, ничего не заработает.
  gl.vertexAttribPointer(
    positionLocation,
    apple.vertexBuffer.itemSize, // либа сама определяла сколько нужно атрибуту брать чисел, чтоб получить вершину
    gl.FLOAT,
    false, // отключаем нормализацию (это чтоб не пыталось конвертировать числа больше 1 в 1. Аля 255 -> 0.255.
    0,
    0
  ); // объясняю как атрибуту парсить данные

  // получаем ссылку на глобальную переменную которая будет доступна внутри шейдеров. В нее же мы будем прокидывать матрицы
  const matrixLocation = gl.getUniformLocation(program, "u_matrix");

  let translation = [canvas.width / 2, 400, 0]; // смещаю на центр экрана по вертикали и 400 px вниз
  let rotation = [degToRad(180), degToRad(0), degToRad(0)]; // вращение по нулям
  let scale = [5, 5, 5]; // увеличиваю модельку в 5 раз. scaleX, scaleY, scaleZ

  // выставляю вью порт
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.enable(gl.DEPTH_TEST); // включаем специальный флаг, который заставляет проверять видеокарту уровень вложенности и если какой-то треугольник перекрывает другой, то другой не будет рисоваться, потому, что он не виден.

  function drawScene() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // очищаем канвас на каждый рендер

    const matrix = m4.multiply(
      m4.identity(), // создаем единичную матрицу. Матрицу у которой все значения по умолчанию.
      m4.orthographic(
        0,
        gl.canvas.width,
        gl.canvas.height,
        0,
        400,
        -400
      ), // Создаем матрицу которая конвертирует неудобные размеры модельки яблока в координатное пространство -1 до 1.
      m4.translation(...translation), // перемещаем модельку 
      m4.xRotation(rotation[0]), // крутим по X
      m4.yRotation(rotation[1]), // крутим по Y
      m4.zRotation(rotation[2]), // крутим по Z
      m4.scaling(...scale) // увеличиваем модельку
    ); // перемножаем матрицы друг на друга, чтоб в конце получить 1 матрицу которую и прокинем в шейдер
    gl.uniformMatrix4fv(matrixLocation, false, matrix); // прокидываем матрицу
    // подключаю буфер с индексами
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, apple.indexBuffer);

    // рисуем яблоко треугольниками с помощью индексов
    gl.drawElements(
      gl.TRIANGLES,
      apple.indexBuffer.numItems,
      gl.UNSIGNED_SHORT,
      0
    );
  }

  drawScene();

  // Тут код который настраивает всякие слайдеры, чтоб изменять матрицы.
  // ...
  //
}

main();

На выход я получил такую штуку:

Мне кажется это маленький шаг для webgl, но огромный скачок для фронтендера.

Что такое index?

При работе с либой узнал про новую вещь: индексы.
На самом деле в .obj файле кроме вершин есть текстурные координаты, нормали, поверхности (faces).
Что это вообще такое?

Текстурные координаты это массив цифр который прокидывается в фрагментный шейдер и позволяет шейдеру понять где он вообще сейчас находится в модельке, чтоб наложить пиксель в зависимости от общего положения. Если их нет, то шейдер получается вообще изолированным и может только красить пиксели не зная где именно сейчас он закрашивает. Текстурные координаты прокидываются как атрибуты.
Нормали это тоже координаты, но их можно использовать в фрагментом шейдере, чтоб понять как рисовать тень от объекта(модель) в зависимости от того как должен падать свет на объект.
Поверхность - это массив индексов которые указывают на индекс в массиве вершин, текстур и нормалей. Поверхности это служебные данные для редактора моделей (аля cinema4d и других), которые позволяют объединять полигоны в квадраты и другие более сложные фигуры. В частности это нужно для того как рендерить именно модельку. Так вот индексы это и есть поверхности. Допустим мы прокинули в 2 атрибута данные от вершин и текстурных координат. И webgl смотрит на текущий индекс и по параметрам атрибутов (помните мы указывали size, сколько нужно брать чисел, чтоб получить вершину) берет из каждого атрибута нужный набор чисел и прокидывает их в шейдеры.

Дальше я попробовал изменить gl.TRIANGLES на gl.LINES. И получил следующий результат:

Мда, совершенно не то, что я ожидал. Где мои красивые линии как у дизайнера и че за треугольники. Я тогда впервые осознал простую истину, что все блин на треугольниках. В данной ситуации, я побежал в чат и тогда породил локальный мем.

у меня начали появляться подозрения, что рисовать фигуры можно только через треугольники.

Я просто не знал что делать дальше и спрашивал советов. Среди них было несколько:

- Используй в фрагментом шейдере uv, чтоб рисовать линии сам.

- Распарси .obj сам и получили нужные значения.

- Сделай uv разветку и натяну текстуру картинку.

Я не понял из 1 ответа, что такое uv, почему-то тогда мне никто не объяснил, что это и есть текстурные координаты. Да и где эти uv брать тоже было не понятно.

Из второе ответа, я тоже не понял что мне делать и какие значения использовать.

А третий ответ оказался хоть тоже загадочным, но мне объяснили что это значит. Нужно было через редактор моделей создать текстурные координаты и нарисовать под них текстуру.

В интернете я нашел гайды о том как сделать в cinema 4d uv разметку и там же нашел как нарисовать текстуру. В редакторе была возможность создать картинку и залить по граням поверхностей(faces) нужный цвет. Я считал, что это сразу решает мою проблему. Выплюнув texture.png и новый obj с uv (то есть так называются текстурные координаты).

Баг который попортил нервы

Я побежал читать статью на webgl fund как натянут текстуру. Кода стало больше, но не увидел сложностей. Сделал как в гайде и думал, щас будет все отлично!

Vertex

precision mediump float;

attribute vec4 a_position;
attribute vec2 a_texture_coords; // текстурные координаты из модели

uniform mat4 u_matrix;

varying vec2 v_texture_coords;

void main(){
    gl_Position = u_matrix * a_position;

    v_texture_coords = a_texture_coords; // прокидываем во фрагментный шейдер 
}

Fragment

precision mediump float;

varying vec2 v_texture_coords; // координаты из вершины
uniform sampler2D u_texture; // текстура

void main(){
  gl_FragColor = texture2D(u_texture, v_texture_coords);
}

  //...
  const textureCoordsLocation = gl.getAttribLocation(
    program,
    "a_texture_coords"
  ); // получили ссылку на новый атрибут
  // ...
  gl.enableVertexAttribArray(textureCoordsLocation);
  gl.bindBuffer(gl.ARRAY_BUFFER, apple.textureBuffer); // забиндили буфер которая выдала либа из модели
  gl.vertexAttribPointer(
    textureCoordsLocation,
    apple.textureBuffer.itemSize,
    gl.FLOAT,
    false,
    0,
    0
  );

  const texture = gl.createTexture(); // запрашиваем место для текстуры
  gl.bindTexture(gl.TEXTURE_2D, texture); // биндим

  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    1,
    1,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    new Uint8Array([0, 0, 255, 255])
  ); // сначала прокидываем пустышку, пока грузится текстура

  const image = new Image();
  image.src = textureImg; // загружаем текстуру
  image.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.texParameteri(
      gl.TEXTURE_2D,
      gl.TEXTURE_MIN_FILTER,
      gl.LINEAR_MIPMAP_LINEAR
    );
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); // какие-то неведомые настройки, чтоб все было круто
    drawScene();
  };

  // ...
  const textureLocation = gl.getUniformLocation(program, "u_texture");

  function drawScene() {
    // ...
    gl.uniform1i(textureLocation, 0);
    // ...
  }

И после тонны кода получаем вот это чудовище:

Что за??

И вот тут у меня началась эпопея в целый рабочий день с целью решить проблему. Я мало, что понимал и считал, что это я косячу, а не либа которую использую. Сначала я на самом деле откатил код с текстурой и просто попробовал закрасить и получил опять какой-то невероятный результат.

Что за фигня?

Я тогда решил, что проблема в экспорте и вообще в том, что я делал с uv mapping. Поиграв пару часов с экспортом, я решил попробовать в blender экспортировать и о чудо, моделька починилась!

Потратив еще кучу часов в попытке разобраться, в чем же дело. Я заметил, что blender по умолчанию преобразовывал поверхности из 4 точек в поверхности из 3 точек. И когда я отключал данную функцию, то модельки опять ломались. И тогда, я понял, что проблема все это время была в библиотеке webgl-obj-loader. Она ломалась если ей подавали поверхности из 4 точек (на самом деле мне это объяснили в чате).

Я сразу побежал писать жалобу на проблему, а потом нашел pull request который правил эту багу и прикрепил его к своему issue.

Отказ от webgl-obj-loader

Посмотрев на результат мучительной работы, я понял, что это не то, чего я хотел. Линии были толстыми, плюс чем сильней было скругление, тем плотней становилась область.
Еще я понимал, что есть какое-то другое решение, потому что когда я открывал модельку в просмотрщиках моделей, они правильно рисовали результат и красиво прорисовали линии.

Видя это, я понимал, что все можно рассчитать программно, но не знал как...

И в это время появился рыцарь в сияющих доспехах и спас меня из логова бессилия. Он был тем кто предложил:

Распарси .obj сам и получили нужные значения.

На тот момент я не понимал, что вообще это значит и как мне это поможет. И человек накидал в песочнице пример на three.js.

Этот пример был светом. Я сразу же понял, что можно выкидывать webgl-obj-loader и зажить как человек. Выбросил его без каких либо сожалений.

Продолжение есть.

Знакомство фронтендера с WebGL: почему WebGL?

Nikita Nafranets — Tue, 06 Jul 2021 22:31:11 +0000

Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:

Реальных моделей пока не было, поэтому на первое время мне предоставили модель яблока.

Основная проблема заключалась в том, что у меня не было опыта работы с 3D, я очень плохо знал математику и геометрию, а также у меня никогда не было опыта работы с WebGL. В общем, в свои силы я верил слабо. По итогу с задачей я справился, и я хочу рассказать об этом опыте в небольшом цикле статей.

Почему вообще WebGL?

Слово WebGL у меня ассоциируется с 3D. Я считаю, что больше нет нормальных способов отрендерить что-то в 3D без WebGL. Помимо того, что слово WebGL само по себе звучит очень круто, нашлись и другие причины выбрать эту технологию:

Мы хотели интерактивности. Например, чтобы моделька реагировала на движение курсора мыши по двум осям. С помощью видео такое сделать невозможно.
Адаптивность. Мы могли рисовать одну модельку под любые экраны и устройства (поддержка WebGL была подавляющей). Нам не нужно рендерить заранее кучу видюх под разные экраны и переживать о том, что на каком-то экране появится пикселизация.
Проблемы с iOS. На каждой версии были свои приколы с фоновыми видео на телефоне. На одной из версий видео вообще могло не запуститься из-за политик Apple, а иногда нужно было проводить специальный обряд, чтобы фоновое видео заработало. Таких проблем с WebGL пока нет и, надеюсь, не будет.
IE11 тоже поддерживает WebGL. Да, есть нюанс, но он даже не стоит внимания.
В SVG невозможно сделать полноценный 3D, только псевдо. Также браузеры плохо себя чувствуют, когда SVG элементов в DOM больше 10 000. Это показали мои попытки отрендерить модельку в SVG.

Я думаю, первого пункта хватит, чтоб принять решение в пользу webGL.

С чего начал ?

Модель яблока была в формате OBJ, другие форматы я решил не рассматривать. Это текстовый формат и это придавало мне какой-то уверенности в том, что решений в интернете для него должно быть много.

Я знал про существования библиотек three.js, Babylon.js и PixiJS (это вообще 2D-рендер). Вес 3D-библиотек огромный, как бы они не были сжаты. Не хотелось пускать таких монстров к себе на сайт, у меня и так был 100кб react-dom, куда еще больше? Да и чтоб разобраться в 3D-библиотеках, все равно нужно было иметь какие-то представления о 3D-графике.
Я гуглил «webgl obj model render» и находил только онлайн-просмотрщики или какие-то узко специфичные решения, которые запустить не смог.
Также искал демки на CodePen, но я не нашел ничего подходящего. А если что-то находил, не мог понять, что вообще происходит и что мне делать.
Понял, что нужно начать с основ, без базовых знаний webGL задачу не выполнить.

Погружение в WebGL

Не знаю как так получилось, но в интернете на глаза ресурсы по WebGL мне не попадались, поэтому я пошел Телеграм-чат @webgl_ru (найти его было просто) и спросил:
— как начать в WebGL фронту?

Похоже, что в чат постоянно заходили подобные мне ребята с аналогичными вопросами, поэтому у ребят из чата уже был заготовлен список ресурсов, который они мне и скинули. Впоследствии участники данного чата мне еще не раз помогли, за что им огромное спасибо.

Из списка, который мне скинули, я выбрал ресурс WebGL Fundamentals, у которого было довольно говорящее название, а также перевод на русский. Обычно я не вижу ничего ужасного в английской документации, но WebGL казался мне чем-то инородным и страшным, а также состоящим из подходов, которые доселе не были мне знакомы. То, что WebGL рендерит это всё через Canvas — это было единственное, что я знал об этой технологии.

Что вообще такое WebGL

Первое, что бросается в глаза, — это необычный API. Привычное нам браузерное API — это просто вызов методов у каких-то встроенных объектов/классов, тогда как апи WebGL это как будто вы программно настраиваете repl node.js, а потом прокидываете в этот repl строки javascript кода и получаете какой-то результат из этого.
В случаи webgl вы настраиваете внутри браузера обрезанную версию OpenGL(библиотека которая заставляет наши видеокарты что-то рисовать) и прокидываете в нее код на языке GLSL. GLSL обрезанный C подобный язык, погрузится несложно. Как будто пишешь на es3 javascript.

Если обобщить, то работа на webgl выглядит так:

Получаете доступ к webgl (по сути к openGL, но версия обрезанная и потому этому называется webgl).
Выставляете какие-нить специальные флаги, которые могут менять работу рендера.
Пишите программу на GLSL. Сама программа это просто функции которые принимает данные и выплевывает какой-то результат. Данные это точки в координатной системе, а также цвет этой точки. Тип как указать положение div 1х1 через absolute и поставить его центр на высоте 300 пикселей, покрасив в красный.
В случае 3D нужно еще указать глубину точки, ну это пока не важно.
Пространство в webgl имеет координаты от -1 до 1, потому, нам нужно преобразовывать координаты разных фигур в координаты от -1 до 1, если они за пределами. ВОТ ОНА МАТЕМАТИКА.
Пропускаете через апи координаты, цвета и другие параметры.
PROFIT! Мы получаем 2D/3D картинку.

Шейдеры

Выше я говорил про программы на GLSL, программа всегда состоит из 2 шейдеров. Шейдер есть функция.
Каждая программа состоит из вершинного шейдера (Vertex Shader) и фрагментного шейдера (Fragment Shader).

Вершинный шейдер - позволяет разметить пространство, а фрагментный - закрашивает это пространство. Так работают видеокарты.
Сначала им нужно выставить точки в пространстве, потом соединить эти точки невидимыми линиями, а потом закрасить каждый пиксель внутри получившийся фигуры.
Если приводить пример из жизни, у вас есть стенка 1м х 1м и есть художник по имени Видеокарта. Вот вы и ему говорите:

— Поставь мне точку на 30 сантиметров от верха и 50 см слева, потом точку в 50х50, потом в 70х80, соедини мне это линиями и закрась получившееся пространство красным.

Сами шейдеры выглядит так:

Вершинный шейдер (Vertex Shader)

// атрибут, который будет получать данные которые мы передали. атрибут === переменная/пропс
attribute vec4 a_position;

// все шейдеры имеют функцию main
// стандартная тема для компилируемых языков
void main() {

  // gl_Position - специальная переменная вершинного шейдера,
  // которая отвечает за установку положения
  gl_Position = a_position;
}

Фрагментный шейдер (Fragment Shader)

// фрагментные шейдеры не имеют точности по умолчанию, поэтому нам необходимо её
// указать. mediump подойдет для большинства случаев. Он означает "средняя точность"
precision mediump float;

void main() {
  // gl_FragColor - специальная переменная фрагментного шейдера.
  // Она отвечает за установку цвета.
  gl_FragColor = vec4(1, 0, 0, 1); // вернёт красный
}

В вершинном шейдере вы увидели attribute. Шейдере есть несколько типов переменных (дальше копипаста с webglfundamentals.org):

Атрибуты и буферы

Буферы - это массивы бинарных данных, загруженных в графический процессор. Обычно буферы содержат вещи вроде положений вершин, нормалей, координат текстур, цветов вершин и т.д., хотя вы вольны положить в них что угодно.

Атрибуты определяют, каким образом данные из ваших буферов передаются в вершинный шейдер. Например, вы можете поместить положения вершин в буфер как три 32-битных числа с плавающей точкой на одно положение. Вы указываете конкретному атрибуту, откуда брать положения вершин, какой тип данных используется (три 32-битных числа с плавающей точкой), начиная с какого индекса в буфере начинаются положения вершин и какое количество байтов нужно получить от одного положения до следующего.

Доступ к буферам не произвольный. Вместо этого вершинный шейдер выполняется заданное количество раз и каждый раз, когда он выполняется, выбирается следующее значение каждого из указанных буферов и назначается атрибуту.

Uniform-переменные

Uniform-переменные - это глобальные переменные, которые устанавливаются перед выполнением программы шейдера.

Текстуры

Текстуры - это массивы данных, к которым есть произвольный доступ в программе шейдера. Чаще всего в текстуру помещается картинка, но текстура - это просто набор данных и вы можете запросто поместить в неё что-то отличное от набора цветов.

constying-переменные

constying-переменные позволяют передавать данные из вершинного шейдера фрагментному шейдеру. Во фрагментном шейдере мы получим интерполированные значения вершинного шейдера - зависит от того, отображаем ли мы точки, линии или треугольники.

Вершинный шейдер выполняется на каждую порцию x,y,z (z может не указываться, если рисуем в 2D) координат. Каждые такие координаты создают вершину. А дальше уже эти вершины объединяются в треугольники (полигоны) и потом фрагментным шейдером эти треугольники закрашиваются.

Вы спросите, почему именно треугольники?

В процессе обучения я на это не обращал внимания, но когда начал предпринимать попытки нарисовать модельку тоже удивился, но оказывается любую фигуру можно нарисовать через ТРЕУГОЛЬНИКИ (ПОЛИГОНЫ) и потому, добавлять другие фигуры бессмысленно.

Треугольник есть абсолют.

В webgl можно рисовать только треугольниками, линиями и точками.

Если рисовать через линии, то будут только отрисовываться грани между вершинами, но все что внутри фигуры не будет закрашиваться.
Если рисовать через точки, то будут отрисовываться только точки! Удивительно!

Матрицы

Также я узнал про матрицы. Это пришло из математики и для js разраба это выглядит как массив из 9 или 12 чисел (12 для 3D).
Матрицы решают вопросы того как трансформировать модель (а точней вершины), чтоб поставить модельку в нужное место в пространстве, увеличить или покрутить.
Матрицы еще позволяют создавать камеры, то есть менять вид обзора и другое. Вы могли с ними встречаться, если работали transform: matrix(...n) в css.

Матрицы один из фундаментов 2D/3D графики. Наверно одна из немногих вещей которой можно пользоваться не разбираясь как она работает.

Достаточно запомнить, что чтоб применить несколько трансформаций нужно просто матрицы друг на друга перемножить и результат передать в шейдер.
Матрица 3х3 для 2D трансформаций, а 4х4 для 3D трансформаций.

Хорошие люди уже все за нас написали gl-matrix. Нам нужно вызывать только знакомые на слух название методов и получать нужный результат.
Более подробно про матрицы можно узнать на webgl fundumentals.

Hello world на webgl

Так как все же выглядит hello world код на webgl? Что вообще требуется для того, чтоб это запустить и нарисовать треугольник?

Нужно получить ссылку на canvas элемент.
Получить из него webgl контекст, то есть то что нам позволит общаться с webgl и рисовать через него.
Создать программу из вершинного шейдера и фрагментного шейдера.
Получить ссылки на переменные из шейдеров.
Присвоить переменным - данные.
Запустить функцию drawArrays у webgl.
Вуаля, мы получили наш треугольник.

И после такого количества кода (по ссылке), мы получаем треугольник.

Честно говоря, это безумное количества кода ради одного треугольника немного остудило желание, но автор учебника объяснил, что все это можно убрать под хелперы.
Посмотрев на этот пример, можно понять безумные размеры 3D либ.

Продолжение здесь.