Comments 5
Этой статье очень не хватает ссылки на репу с кодом, а ещё лучше ссылки на демо-страницу (благо бесплатных хостингов для статики много)
Про 3d, и ни одной картинки. Прогеры такие прогеры.
Тема разработки веб-приложений с помощью библиотеки Three.js для создания трёхмерной графики довольно интересна. Сейчас и игры делают с её помощью, коммерческие приложения или просто визуализации (например, для кластерного трёхмерного анализа это может быть применимо).
Однако по ходу чтения статьи я обнаружил, что после её прочтения - мало что из неё понял и уяснил, хотя с трёхмерной графикой опыт работы уже имел. Хотел бы выразить ряд замечаний связанных с материалом самой статьи и её оформлением, с целью мотивировать авторов данной статьи её улучшить.
Начнём с замечаний по материалу. В статье не ясно какой будет конечный результат, как мы к этому результату пришли, что для этого нужно сделать (нумерованный список с действиями это не объясняет, а только добавляет вопросов). Понятно, что в начале было (косвенно) о разработке механизма, с помощью которого можно будет преобразовать картинку в 3D модель (если я правильно понял):
Возможность конвертировать картинки разных форматов в 3d визуал.
Но, что-то, ни картинки, ни 3D модели в конечном итоге я не увидел в статье.
Когда пишут статьи где подразумевается работа с графикой (2D, 3D, 4D), то в статье, как бы, хорошим тоном считается добавлять картинки начального, промежуточного и конечного результата. Особенно радует когда понятно с помощью каких алгоритмов, программного кода или подхода мы пришли от A к B и от B к C.
Начнем с того, что такое файл JSON.
Мы так и не узнали что такое файл JSON :) Возможно Вы имели ввиду файл package.json, т.к. после этого предложения идёт описание и предназначение файла package.json. В любом случае, наблюдается непоследовательность изложения. Файл package.json просто так появиться не может, он создаётся с помощью специальной утилиты npm (для командной строки это утилита, а вообще это пакетный менеджер). И после описания файла package.json идёт следующий текст:
Для начала установите Node.js, если у вас его еще нет, а так же установим
webpack(чуть позже он нам пригодится)
Если вы хотите объяснить что такое package.json, то это следует делать только после того, как вы опишите что такое Node.js и NPM, потому что складывается ощущение что этот файл нужно создать самому, а Node.js это так - что-то стороннее. Файл package.json описывает в целом конфигурацию JS/TS модуля, с зависимостями и прочими вещами.
Команда для macOS
Мы живём в мире, где царствует кроссплатформенная и кроссбраузерная разработка. Не у всех читателей на Хабре компьютер с MacOS, поэтому если вы решаетесь написать команду для установки Node.js на свою ОС, то следует дать ссылку или написать где-нибудь рядом команды для установки под другие ОС (например, Ubuntu или Windows).
Если же ваша работа целиком и полностью охватывает только MacOS, то об этом следует написать сразу в начале, чтобы пользователи понимали в какой среде будет происходить работа и, соответственно, сможет ли пользователь все эти эксперименты повторить.
После этого мы запускаем команду
npm init -y, которая создает нам файл json с базывыми настройками
Данный текст требуется доработать. Есть ошибка в слове "базовыми" и не ясно что за файл создаёт нам утилита npm, при вызове команды npm init -y (а он создаёт как раз package.json).
Я постараюсь кратко описать всю структуру и математику проекта, поэтому опишу основной алгоритм выполнения
Формулировка данного текста довольна не точная, потому что структуру проекта Вы не описываете. Вы описываете основной алгоритм, который заложили в программный код на JavaScript, но не структуру проекта. Обычно под структурой проекта понимается набор файлов, папок (или каталогов), которые определённым образом упорядочены и это упорядочение имеет какую-то смысловую нагрузку. Например, в каталоге app у нас входная точка в программу, а в каталоге hooks специальные хуки. Или в каталоге models у нас модели, а в shader у нас шейдеры.
Необходимо скачать библиотеку
threeтак же через brew
Здесь нужна также команда и также на более распространённые ОС чем MacOS (так вы увеличите число заинтересованных читателей).
с собитием нажатия
Стоит обнаружить и поправить побольше таких слов, потому что читается это забавно :)
которая будет используется
Это сюда же :)
Очистка группы
Что за группа? В представленном статье коде непонятно что под группой (переменной или константой group) подразумевается? Почему её нужно очистить? Зачем? Что она из себя представляет? Думаю здесь нужно подумать над тем, чтобы добавить описание этой ... ячейки (ячейкам) оперативной памяти, которую занял и выделил под ваш скрипт браузер и который контролирует доступ к этой ячейки памяти из вашего скрипта (через, например, движок V8 или любой другой, который есть в популярных MacOS браузерах). Переменная это или константа - непонятно, поэтому написал абстрактно :)
Цикл для создания 3D-объектов
Здесь в программном коде ошибка. Нужна закрывающая фигурная скобка в конце цикла. В общем-то дальше такие ошибки также встречаются (нужно вычитывать статью, перед публикацией, чтобы таких "мелких" недочётов не было, иначе из-за этого можно "нахватать минусов").
В принципе, это все. Нам осталось загрузить результат в объект
imgи отрисовать это все с помощью функции, которая вызывает саму себя и обновляет данные сцены и камеры
И дальше идёт код анимации, по видимому, а не отрисовки объекта img. Как я понял, в функции animation идёт рендеринг сцены и камеры, а не объекта img.
Значения нормализуются, деля на 255
Деля что на что, и зачем нужна нормализация в данном случае? Тема не раскрыта.
В общем и целом, предлагаю авторам статьи ещё раз перечитать материал и его улучшить, ему это действительно необходимо, чтобы он лучше читался и было понятно о чём идёт речь. Тема векторизации также не раскрыта.
По оформлению статьи есть также замечания, которые мне, как читателю, показались нуждающимися во внимании.
Первое замечание касается не целевого использования цитаты для оформления списков:
Списки всегда лучше оформлять списком. У хабра замечательный редактор (правда с обратной совместимостью прошлых статей проблемы есть, но в целом норм), его возможности можно использовать на максимум чтобы добиться хорошего оформления статьи. Есть даже специальные публикации о том, как нужно оформлять статьи. Советую их почитать, будет полезно.
На хабре также есть редактор исходного текста программ. Если добавить программный код на страницу то рядом есть выпадающий список с возможными языками программирования. Стоит его активно использовать и читать исходный код будет легче:
Программный код должен оформляться как программный код, а не как часть текста. То же относится и к командам:
Нумерованные заголовки также не стоит выделять цитатами, для этого есть заголовки разного уровня в самом редакторе (как правило их хватает).
Также не хватает библиографического списка (какими статьями вы руководствовались, когда писали данный материал?) и ссылку на исходный код (потому краткие его выжимки не дают понимания полной картины).
Хорошая статья, если она что-то обозревает (например, результаты исследования), содержит минимум кода, но при этом максимум словесного описания, проектирования и визуализации. После прочтения такой статьи нет недопонимания ключевых вещей, а для ознакомлением с деталями можно всегда обратиться к исходному коду.
Спасибо за статью, очень рекомендую её улучшить (моменты основные расписал), у этой темы определённо есть будущее.
Рекомендую также ознакомиться с книгой про работу с графическими процессорами в браузере (WebGPU), может быть эта тема будет вам интересна)
Желаю успехов в дальнейшем развитии во frontend-разработке и в освоении трёхмерной графики!
Что то вектора я и не приметил. Все что вы делаете, это рендерите в 3х мерном пространстве картинку с небольшим сдвигом по оси z. Векторизация изображений, это сложный вычислительный процесс, превращающий растровое изображение, состоящее из пикселей, в векторное, состоящее из линий, кривых и других геометрических фигур. Такое изображение можно увеличивать или уменьшать без потери качества. Иными словами если бы вы вашу картинку в SVG перевели, вот тогда это и была бы векторизация.
Векторизация с помощью Three.js