dxf-render: зачем показывать DXF-чертежи прямо в браузере

Проблема: DXF в браузере без CAD-программы

Есть стандартная ситуация, знакомая проектировщикам, архитекторам и всем, кто работает с техническими чертежами. Заказчик или коллега просит прислать чертёж. Вы отдаёте DXF-файл — и получаете в ответ: «а как его открыть?». Бесплатных решений немного, AutoCAD стоит дорого, онлайн-просмотрщики то работают, то нет, а показать чертёж прямо в рабочем интерфейсе своего сервиса вообще не получается без серьёзных вложений в разработку.

Библиотека dxf-render, о которой рассказал её автор на Dev.to, закрывает именно эту дыру: рендерит DXF-файлы непосредственно в браузере, без серверной обработки и без установки CAD-программ на стороне пользователя. Речь идёт о просмотре и отображении чертежей — не о редакторе и не о замене AutoCAD.

Что такое DXF и почему с ним неудобно работать вне CAD

DXF (Drawing Exchange Format) — это открытый формат обмена чертежами, разработанный Autodesk. Практически все CAD-системы умеют экспортировать в DXF: AutoCAD, BricsCAD, FreeCAD и другие. Именно поэтому DXF стал де-факто стандартом для передачи технических чертежей между разными программами и командами.

Проблема в том, что формат создавался для CAD-среды, а не для веба. Внутри DXF-файла могут быть десятки типов объектов — линии, дуги, размеры, штриховки, аннотации с текстом, составные полилинии. Каждый объект описывается в координатной системе чертежа, которая может быть повёрнута относительно экрана (Object Coordinate System). Отрисовать это корректно в браузере без специализированного разбора — задача нетривиальная. Большинство существующих решений либо поддерживают только базовые примитивы, либо требуют серверного конвертирования файла в PNG или PDF перед показом.

Что делает dxf-render

dxf-render — это npm-библиотека, написанная на TypeScript. Она разбирает DXF-файл на стороне браузера и преобразует его в объекты Three.js для отображения. Для рендеринга векторного текста используется opentype.js.

Поддерживаемые возможности, согласно публикации автора:

• 21 тип объектов DXF, включая все 7 типов размеров (линейные, радиальные, угловые, ординатные, диаметральные, выровненные, повёрнутые)
• Штриховки — 25 встроенных паттернов (ANSI31, HONEY, BRICK и другие)
• Аннотации LEADER и MULTILEADER
• Полная поддержка Object Coordinate System через алгоритм Arbitrary Axis
• Паттерны типов линий с геометрическими штрихами
• Векторный рендеринг текста

Библиотека фреймворконезависима: работает с React, Vue, Svelte, Angular и чистым JavaScript. Установка стандартная:

npm install dxf-render three

Автор описывает базовое подключение как пять строк кода: разобрать DXF, загрузить шрифты, создать объекты Three.js и добавить в сцену. Для случаев, когда нужен только разбор данных без визуализации, есть отдельная точка входа без зависимостей.

Для производительности реализован батчинг геометрии — количество draw calls сокращается с тысяч до примерно 50. Большие файлы обрабатываются асинхронно с отчётом о прогрессе. Смена темы (светлая/тёмная) происходит без повторного рендеринга.

Что уже можно попробовать

Код открытый, репозиторий — на GitHub (dxf-kit). Живое демо доступно на dxf-vuer.netlify.app — там можно перетащить собственный DXF-файл и сразу увидеть результат. На npm опубликован готовый компонент для Vue 3 — dxf-vuer. Для старта есть шаблоны на StackBlitz под Vanilla TypeScript, React и Vue.

Практические сценарии

Где это реально полезно:

• Платформы согласования проектов. Строительное бюро сдаёт чертёж заказчику — тот видит его прямо в браузере, не скачивая ничего и не устанавливая программ. Комментирование и согласование происходит в интерфейсе сервиса.
• Внутренние инструменты команды. Технический отдел выгружает DXF из CAD-системы, менеджер проекта или клиент открывает в браузере без CAD-лицензии. Устраняется стандартный барьер «как открыть файл».
• SaaS для проектировщиков. Разработчики платформ для архитекторов или инженеров получают готовый рендерер вместо того, чтобы писать его с нуля или платить за стороннее API конвертации.
• Личные инструменты и прототипы. Фрилансер или небольшая команда может быстро добавить просмотр чертежей в свой инструмент без серверной инфраструктуры.

Что стоит проверить перед использованием

Прежде чем встраивать библиотеку в продакшн, важно учесть несколько вещей.

• Поддержка ваших конкретных объектов. 21 тип — это много, но не всё. Если в чертежах используются специфичные объекты или нестандартные расширения DXF, нужно проверить совместимость на реальных файлах. Автор честно указывает: вариации ширины полилинии пока не поддерживаются.
• Интерактивность. На момент публикации интерактивные события (клик по объекту, hover) находились в планах, но не были реализованы. Если нужна реакция на действия пользователя с элементами чертежа — это нужно уточнять по актуальному состоянию репозитория.
• Размер бандла. Three.js — весомая зависимость. Для веб-приложений, где критичен размер загружаемого кода, стоит оценить влияние на производительность страницы.
• Лицензия и поддержка. Это open source проект одного автора. Перед встраиванием в коммерческий продукт стоит проверить лицензию репозитория и активность поддержки.

Кому стоит смотреть

dxf-render имеет смысл рассматривать разработчикам, которые строят веб-инструменты вокруг технических чертежей: платформы для согласования проектов, системы управления документацией в строительстве и проектировании, SaaS для инженеров и архитекторов.

Для конечных пользователей, которым просто нужно разово открыть DXF-файл, лучше подойдёт готовое демо или существующие онлайн-просмотрщики. Библиотека ориентирована на разработчиков, которым нужно встроить просмотр DXF в собственный продукт.

Ключевое преимущество перед серверными решениями — всё происходит на стороне клиента: файл не покидает браузер, нет зависимости от стороннего API, нет задержек на загрузку и конвертацию. Для сценариев, где конфиденциальность технической документации важна, это существенный аргумент.

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

---

Источник: dxf-render — статья автора на Dev.to. Материал основан на открытых источниках.