😏 Добрый день

🏃‍♀️ Вчера мне снова понадобилось немного подкорректировать lottie анимацию. По большому счету это не шибко трудозатратная процедура, которая не должна занимать много времени. Но открывать в браузере сайт для превью и через код поочередно, наугад, удалять слои со временем становится не очень приятно. Юзать полноценный Adobe AE, чтоб удалить один слой, я не рассматривал как вариант никогда, потому-что в большинстве задач мне не нужен завод ложек для производства одной)

😳 Поняв, что я больше не намерен мирится с этой проблемой, я быстро завайбкодил небольшую тулзу, которая после(спасибо нейронкам) переросла в легковестный редактор lottie, который я уверен должен будет помочь многим участникам экосистемы телеграмм, которые в эпоху подарков ежедневно работают с .lottie и .tgs, и которым периодически нужно перегнать их между стандартными форматами(.svg, .png)

Я думаю знающие люди, сами натыкаются и разберутся, но я кратко изложу все преимущества тут:

Загрузка .json и .tgs (Telegram стикеры) через кнопку или drag & drop
Объединение нескольких Lottie файлов в одну анимацию
Автоматическая группировка импортированных слоёв в Null-родитель
Живой превью с play/pause, перемоткой, зацикливанием, счётчиком фреймов
Обрезка анимации (Trim) — задание In/Out кадров для изменения длительности
Дерево слоёв с иконками типов, выделение/снятие, переименование, удаление
SVG-миниатюры слоёв в дереве для визуальной идентификации
Сворачиваемые группы (Null/Precomp) со стрелками ▶️/▼
Перемещение слоёв вверх/вниз с реальным изменением z-order (целыми группами)
Каскадное удаление — удаление родителя удаляет всех потомков
Мульти-выделение слоёв (Ctrl+Click)
Перетаскивание слоёв прямо на canvas с рамкой выделения
Редактирование позиции, якоря, масштаба, прозрачности для каждого слоя
Глобальная палитра цветов сгруппированная по HEX с массовым редактированием
HSL коррекция (Hue, Saturation, Lightness) — глобальная и по группам цветов (красные, оранжевые, жёлтые, зелёные, голубые, синие, фиолетовые, нейтральные)
Извлечение цветов из заливок, обводок, градиентов, солидов, эффектов
Экспорт в JSON, TGS, SVG (текущий кадр), PNG (текущий кадр, 2x retina)
Маркеры границ canvas с размером
Отмена Ctrl+Z (до 50 шагов) + кнопка Undo в тулбаре

https://attikusfinch.github.io/lottie-editor-ui/

😽 Буду рад любому репосту, если эта тулза поможет упростить вам жизнь хотя-бы раз, спасибо за прочтение)

@fiscaldev

🐶Всем привет. После прошлого поста я сразу начал думать, что еще крутого можно сделать с использованием ACTON

Сначала была идея написать настольную игру на TON, что-то в духе монополии: подключить UI, сыграть с друзьями и показать, что TON в теории можно использовать даже как движок для 2D-настолок. Но концептуально это все равно была бы обычная доска с набором механик, часть из которых уже реализовывали в TON даже без ИИ. А после знакомства с возможностями ACTON хотелось сделать что-то действительно грандиозное

И тут я вспомнил людей, которые прямо в Minecraft, используя только двоичный код и редстоун, собирают настоящие компьютеры, а потом еще и запускают на них код. Оттолкнувшись от этой мысли, я придумал максимально безумную и почти бессмысленную, но вполне реализуемую идею: сделать 3D-рендер OBJ-моделей прямо на TON

Путь разработки был тем же. Я пишу в Codex про ACTON, он подключает его, и мы начинаем разбирать задачу. Почти сразу всплыла первая проблема: изначальная версия контракта была рассчитана на очень небольшие модели, а я уже скачал машину примерно на 30 тысяч вершин. Поэтому пришлось менять архитектуру: хранить модель чанками, добавить отдельный worker/shard-путь для тяжелых сцен и научиться рендерить модель частями

После первого MVP стало понятно, что дебажить картинку через постоянные деплои в mainnet будет долго и дорого. Поэтому мы с codex'ом взяли @ton/sandbox и начали гонять рендер локально: контракт исполняется в песочнице, а на выходе я сразу получаю картинку и понимаю, что именно сломалось

Шаг за шагом, картинка за картинкой, мы прошли путь от набора пикселей, где вообще непонятно, что происходит, до проекции точек в 3D-пространстве, затем ребер, а потом уже и закрашенных граней. Когда стало ясно, что сама идея работает, я попросил отрендерить скачанную машину в цвете, и мы снова начали доводить процесс до нормального результата: UV, текстуры, патчи, порядок отрисовки, ограничения TVM и все сопутствующие радости

Когда в песочнице все наконец заработало, я решил перейти в mainnet и столкнулся с логичной проблемой: оптимизации почти не было. Codex сначала уменьшил количество TON, которое мы отправляем на контракт, а потом я вспомнил одну идею еще со времен когда разрабатывал игры на unity: для картинки не обязательно обрабатывать всю модель целиком. Достаточно оставить те грани, которые видны из выбранного ракурса

В итоге цепочка стала такой: деплой контракта -> выбор ракурса камеры -> загрузка OBJ на фронт -> отсечение невидимых и внеэкранных граней -> переиндексация оставшихся вершин -> загрузка оптимизированной модели в контракт. После этого контракт уже через get-методы возвращает патчи изображения, а фронт собирает их в финальную картинку

После нескольких правок получился рабочий on-chain 3D-рендерер: он может отрисовывать OBJ-модели прямо на TON в рамках текущих лимитов контракта. Оставалось только отрендерить что-то в основной сети, чтобы в первую очередь проверить работоспособность, а во вторую уже показать результат вам

Машина, которую я скачал, была хорошим стресс-тестом, но мне не хотелось, чтобы именно она стала первой 3D-моделью, отрендеренной в TON. Поэтому я сгенерировал через ИИ 3D-модель собачки REDO, загрузил ее в блокчейн и запустил рендер. Картинка получается через get-методы: фронт вызывает контракт, получает данные по частям и собирает итоговое изображение у себя

Результат можно увидеть в прикрепленных к посту изображениях

Адрес контракта: EQAnje5E76R1buGcCQ4lJsYQ2MesxkncBbnzOqNpxyLJbD9t

Web UI, чтобы попробовать отрендерить что-то самому или посмотреть на собачку(но учтите что TON на контрактах могут кончится): https://attikusfinch.github.io/3d-ton/
Советую создать для деплоя отдельный W5-кошелек

Этим контрактом я пострался раскрыть абсолютно все новшества, которые появились в TON за последнее время - скорость транзакции, их дешевизна и ACTON, который дает возможность реализовывать такие идеи не тратя особо на них время

💎 Спасибо за просмотр #MTONGA

@fiscaldev