- Рисуем треугольник, задаем только вершины
- Меняем цвет из JS с помощью юниформы
- Передаем цвет через атрибуты
- Добавляем 3-ю размерность
- Рисуем куб увеличивая количество треугольников до 12
- Скейлим куб через
.map(x => x * 0.5)
- Добавляем
gl-matrix
, скейлим через матрицу
- Скейлим куб через
- Добавляем вращение на 45 градусов
- Добавляем
gl.enable(gl.CULL_FACE);
- Добавляем
- Добавляем анимацию
- Переносим умножение на матрицу из JS в шейдеры
- Добавляем перспективу в существующую матрицу
- Расширяем пример для отрисовки большего количества кубов
- Разбиваем матрицу на 2: матрица камеры и матрица объекта
- Добавляем массив матриц для каждого объекта
- Отрисовку 1-го кубика выносим в отдельную функцию
renderObject
В папке src
содержатся исходники для каждого пункта.
wstyle
— добавление стилей для канвасаwcanvas
— получение канваса в JSwsize
— задание width и heightwcanvassize
— задание размеров канвасуwcreateshader
— создание шейдеровwvertcode
— код вершинного шейдераwfragcode
— код фрагментного шейдераwshadersource
– подключение кода к шейдерамwshadercompile
— компиляция шейдеровwprogram
— создание шейдерной программыwlocations
— метосположение переменных в программеwbuffervertexstart
— создание буфера вершин из пустого массиваwbuffervertex
— создание буфера вершин
wuseprogram
— использование программыwbindvertex
— связывание данных вершинwclear
— очистка экранаwrendertriangle
— вызов drawArrays
wbinduniform
— связанывание цвета через юниформуwbuffercolor
— создание буфера цветовwcubevertices
— массив вершин для кубаwcubecolors
— массив цветов для кубаwimportmatrix
— импортgl-matrix
wrotatevector
— поворот вершин с помощью матрицы в JS
- Серия уроков WebGL Learning
- Бесплатный курс на Udacity с объяснением основ 3D-графики и использования библиотеки Three.js для WebGL
- Книга "WebGL. Программирование трехмерной графики"