WebGL

Матрицы

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

Поворачиваем объекты

Мы продолжаем «издеваться» над объектом сцены и на этот раз добавляем повороты. Вращаться объект будет только в одной плоскости — плоскости XY. И первым делом мы рассмотрим математическую составляющую, которая будет немного сложнее, чем в переносе и масштабировании. Итак, у

Масштабируем объекты

Следующим на очереди будет масштабирование (то есть растягивание и сжатие) объекта сцены без использования матриц. При этом мы не собираемся терять функционал перетягивания объектов. Пусть масштабирование будет происходить с зажатой клавишей Shift. После того, как мы рассмотрели перенос объектов, масштабирование

Двигаем объекты

При переносе объекта из одних координат в другие у меня не было понимания, как именно это происходит. Был лишь вызов функции переноса: mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]); И затем всю магию делал вершинный шейдер gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,

Обработка изображений

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

Загрузка модели из Blender

Что ж, с рисованием точек, линий и треугольников мы справились. Теперь хотелось бы получить что-то более сложное. Например, тор — фигура популярная и в то же время посложнее треугольника. Но писать функцию генерации, а тем более задавать все точки вручную