Это история в несколько частей: Знакомство фронтендера с WebGL: почему WebGL? (часть 1) Знакомство фронтендера с WebGL: первые наброски (часть 2) Знакомство фронтендера с WebGL: четкие линии (часть 3) Знакомство фронтендера с WebGL: рефакторинг, анимация (часть 4) Первое, что я сделал адаптировал код из песочницы и использовал gl.LINES. Показав дизайнеру, я ожидал услышать: "все идеально, ты отлично поработал!".Но услышал: "выглядит круто! А теперь добавь текстуры, модель не должна просвечиваться". И тут я понял, что gl.LINES мне никак не помогут с решением задачи. Я пошел не совсем туда. Мне почему-то казалось, что самое важное это линии, но потом понял, что должен был залить цветом модельку и выделить на ней грани поверхностей другим цветом. Я понял, что мне все же нужны uv (текстурные координаты), потому, что без них невозможно закрашивать фигуру правильно, но те uv который генерировал редактор моделей не подходили для закрашивания. Там была какая-то своя логика по генерации координат. Подняв этот вопрос с человеком который показал как парсить obj. Он мне дал новую песочницу в которой показал, как генерировать текстурные координаты, чем вселил новую надежду. Он так же набросал простейший шейдер который рисовал линии. Взяв его решение, я обновил свою песочницу и обновил парсер.Код парсера в статье я покажу впервые. Дальше, я обновил фрагментный шейдер: И, о боже! Вот он результат который я так хотел. Да грубо, линии жесткие, но это шаг вперед. Дальше я переписал код шейдера на smoothstep (специальная функция которая позволяет делать линейную интерполяцию) и поменял еще стиль нейминга переменных. Красота! Я доволен собой, а дизайнер моей работой. Да есть какие-то мелочи, но это лучшее что я смог тогда родить.Хотя особо внимательные сразу заметят, что размеры квадратов стали больше, чем на прошлой "грубой" версии.А я был не особо внимательным, поэтому заметил это только спустя 2 недели. Возможно, эйфория от успеха вскружила мне голову... Когда я закончил первую реализация рендера, я пошел делать другие задачи по проекту. Но в течении 2 недель, я понял, что недоволен тем как выглядит модель, она точно не выглядела как на рендере у дизайнера, да еще меня беспокоило, что я толщина линий все равно была какой-то не такой. Мне было не понятно, почему у меня такая крупная сетка на яблоке, хотя в cinema4d и блендере, она довольно мелкая.Плюс, я решил поделиться со своими переживаниями с коллегой на работе, и когда я ему начал объяснять как работает мой шейдер, я понял, что уже и не помню как я вообще до него допер и при попытке объяснить ему, я начал по новой экспериментировать с шейдером. Для начала я вспомнил трюк из уроков по шейдерам и просто закидывал цвета на основе x координаты и получил для себя интересный результат. Я понял, что все это время у меня была мелкая сетка, но я почему-то игнорировал ее. Поиграв еще, я наконец-то понял, что зарисовал только 2 грани из 4 у каждой поверхности, что привело к тому, что у меня такая крупная сетка. У меня не получалось используя `step` и прочее, реализовать нужную мне сетку, я получал какой-то бред. Тогда, я решил сначала написать топорно и родил такой шейдер. Я наконец получил нужный результат. Дальше, за час вместе с докой по функциям из webgl. Я смог переписать код как-то по модному чтоль. Я получил мелкую сетку. Ура! Но, у меня оставалась проблема, что чем ближе к краю, тем хуже различаются линии.Насчет этого вопроса, я обратился за помощью в чат и мне рассказали про OES_standard_derivatives экстеншена для webgl. Экстеншены это что-то вроде плагинов, которые добавляли в glsl новые функции или включали какие-то возможности в рендере. Добавив в код шейдера fwidth (не забывайте включать экстеншены, до того как соберете программу, а то буду проблемы), функцию которая появилась после подключение экстеншена. Я добился того, чего хотел. И вот оно! Все, я закончил со своим движком, а результат был божественным. Осталось дело за малым, отрефачить код и добавить анимации. Frontend разработчик