Развлекайтесь с новым пакетом OpenSolid
В этом посте я хочу дать короткую демонстрацию реализации трехмерных векторных визуализаций в Elm, визуализированных как чистые SVG.
Вы можете найти живую демонстрацию здесь:
OpenSolid
Код в основном основан на новых пакетах OpenSolid. Я был очень взволнован, увидев, что в Elm появилась полнофункциональная векторная библиотека. Документация к пакету отличная, и есть много примеров его базовой функциональности. Я пропустил только конкретные примеры кода, использующие 3D-функции, и это было основным намерением при создании этой демонстрации.
OpenSolid состоит из набора библиотек Elm для работы с геометрией. Он призван обеспечить прочную основу для приложений на основе HTML в таких областях, как CAD (автоматизированное проектирование), CAM (автоматизированное производство) и 2D / 3D визуализация.
Погрузитесь в код…
Вы можете найти полный код в нашем репозитории GitHub, ссылка на который находится в конце этой статьи. Поэтому я укажу вам только на некоторые из наиболее интересных частей.
... давайте сгенерируем геометрию
Во-первых, нам нужен интересный объект для визуализации. OpenSolid предоставляет множество базовых типов 2D / 3D геометрии, таких как точки, многоугольники, плоскости и многое другое, которые можно использовать для создания любой сцены, которую вы можете себе представить.
Для демонстрации мы определяем пользовательский тип лица, который представляет собой просто список трехмерных точек плюс цвет. Затем сеточная функция генерирует фактическую геометрию в виде списка граней фиксированного размера. Отдельные грани расположены в сетке 25 x 25, где z и цвет вычисляются параметрической функцией на основе x, y и времени.
Проекция в 2D
Плоскости эскиза - это основной инструмент для преобразования между 2D и 3D.
Чтобы нарисовать что-либо на экране, каждая трехмерная точка проецируется на SketchPlane, которая преобразует трехмерные координаты в двухмерные. Полученные 2D-полигоны можно легко преобразовать в SVG.
Для целей анимации эта SketchPlane вращается во времени вокруг осей x и y. Таким образом, мы виртуально перемещаем голову вокруг объекта, который имеет фиксированное положение и ориентацию в пространстве.
Сортировка по расстоянию до зрителя
Чтобы гарантировать, что в конечном итоге перекрывающаяся геометрия имеет правильный порядок рисования, мы должны отсортировать каждую грань по ее расстоянию до зрителя, в данном случае до SketchPlane. Как видите, OpenSolid предоставляет функции для расчета расстояний в 3D между точками и плоскостями и многое другое.
Оставшаяся реализация предназначена только для встраивания SVG в Virtual DOM и типичного типа настройки «The Elm Architecture».
Вы можете найти полную реализацию в нашем репозитории GitHub: https://github.com/ninjaconcept/elm-vector-demo-1
Заключение
Выполнение визуализаций с помощью Elm - очень полезный опыт.
Замечательно видеть фантастические библиотеки, созданные из OpenSolid, созданные из этого удивительного сообщества. Как и большинство пакетов Elm, его можно использовать повторно и он очень стабилен. Еще одно подтверждение нашей веры в NinjaConcept в то, что Elm собирается изменить мир.
Это был мой первый пост, так что, если он вам понравился, пожалуйста :-) Спасибо!
