WebGL рендерер и реализация булевой геометрии
Тестовое задание для WebGears.
Билд
npm i
npm run dev
На всё тестовое задание я потратил 3-4 дня. По-моему, код получился достаточно изящным и удобным в использовании, но главной ошибкой было оставление реализации булевой геометрии на последний день — банально не хватило времени. Сначала я попытался сделать её через вызовы WebGL, пробовал играться с различными типами буферов (см. тут), но это не сработало, да и накладывало много ограничений на форму объекта. Далее, я попробовал начать делать SCS алгоритм, но не успевал. В конце я сдался и сделал попытку использования csg.js, но решил, что лучше пусть части задания не будет, но всё будет своё.
Что есть
- класс камеры с указанием target, position, rotation
- контролы для управления камерой при помощи указателя (мышки или пальца). поворот камеры с зажатой левой кнопкой, изменение fov с зажатой правой
- курсор становится «таскательным» при перетаскивании камеры
- класс геометрии с вертексами, индексами и нормалями
- класс геометрии сферы с указанием точности триангуляции и возможности выбрать thetaStart, thetaLenght, phiStart и phiLength
- класс для работы с матрицами 4х4
- класс для работы с векторами 3
- класс 3д объекта, внутри которого происходит сдвиг матрицы объекта, используя его положение, поворот и масштаб
- класс меша, внутри которого создаются геометрия, uniforms, attributes, а также обновляются uniforms
- класс меша сферы, объединяющий геометрию сферы и меш
- pointer manager, обрабатывающий события указателя (мышки или пальца), переводящий экранные координаты в координаты сцены, а также считающий разницу между координатами
- канвас автоматически подстраивается под размер контейнера
- контейнер канваса может быть любых размеров и в любом месте на странице
- класс для работы с WebGLAttribute
- класс для работы с WebGLUniform с автовыбором типа переменной при обновлении на видеокарте
- класс шейдера, компилирующий, обрабатывающий ошибки
- классы вертексного и фрагментоного шейдера
- класс шейдерной программы, прикрепляющий шейдеры и линкующий программу
- рендерер, умеющй отрисовывать как через drawElements, так и через drawArrays
- использование VAO
- матрицы 3д объектов обновляются автоматически — можно просто поменять позицию, поворот и масштаб объекта и всё само обновится
- в случае ошибки компиляции шейдера, в консоли будет исходный код шейдера с номерами строк для быстрого нахождения проблемного места (просто захотелось :)
Чего нет
- булевой геометрии
- тонировки фонга
Что можно улучшить
- сделать класс материала, внутри которого будет шейдеры, программа и нужные материалу unforms
- большее использование типов, иногда не хватало времени всё прописать
- хочется улучшить управление камерой: исправить баги, сделать инерцию
- направленное освещение
- реализация булевой геометрии