Разработка WebGL/Three.js сцены с генерацией и экспортом 3D (snapshot) из анимированного шейдера

Добрый день, могу начать работу уже сейчас. В разработке более 4 лет, работаю с three.js и webgl, могу сделать пример, как будет выглядеть, уже сегодня к вечеру и показать результат, конечно, на полировку понадобится еще 1-2 дня. Буду рад сотрудничеству.

Показать оригинал

Перевести

Здравствуйте, Вячеслав.

Загружу .glb в Three.js, поставлю фиксированную камеру без управления, студийный свет и медленное вращение вокруг оси Y. Стекло сделаю кастомным ShaderMaterial с Френелем, спираль внутри воронки анимирую во фрагментном шейдере через u_time.

Главное тут снимок формы. По кнопке сцена крутится дальше, а в момент клика фиксирую u_time, запекаю вершины меша в статичную геометрию и отдаю через GLTFExporter, чтобы форма открывалась в любом редакторе. Держу 60 FPS на десктопе и мобильном.

На фрилансе недавно, беру недорого, но сделаю быстро и качественно.

Подскажите: форму воронки создаёт сам шейдер или деформация уже в геометрии, и какой формат удобнее, glb или obj?

Добрый день, Vyacheslav!

Я ознакомился с откликами других специалистов на ваш проект. Постараюсь предложить решение, чтобы у вас была возможность пообщаться не только с чатами GPT =)

- ⭐689% приросту трафіку за 3 місяці!⭐ - https://freelancehunt.com/showcase/work/689-prirostu-trafiku-za-misyatsi/1993127.html
- ⭐Компанія друку принтів на одязі. Зростання трафіку на 486%⭐ - https://freelancehunt.com/showcase/work/magazin-dlya-doroslih-zrostannya-prodazhiv-na/1993118.html
- ⭐Зростання трафіку на 4854% за 15 місяців. Хочеш так само?⭐ - https://freelancehunt.com/showcase/work/zrostannya-trafiku-na-4854-za/1993112.html

Пока воздержусь от конкретного предложения, так как важно понять конечные цели вашего проекта. Чтобы предложить оптимальный вариант сотрудничества, уточните, пожалуйста:
…
- Какой срок реализации проекта вас интересует? Планируете ли вы быстрый запуск или у вас есть запас времени?
- Есть ли у вас детальное техническое задание или сформированное видение будущей сцены?
- Сколько времени анимация должна быть активной перед фиксацией?
- Вы рассматриваете возможность создания уникального шейдера или готовы использовать существующие решения?

На стоимость и сроки разработки влияют несколько факторов:

1. Наличие готовой базовой модели и её адаптация под ваши требования.
2. Разработка уникального шейдера или использование существующих решений.
3. Детализация технического задания: чем подробнее оно будет, тем быстрее и точнее можно будет реализовать проект.
4. Объём работы по интеграции и настройке сцены в Three.js.
5. Сложность анимации и необходимость в оптимизации кода для стабильной работы на разных устройствах.

Если заглянуть в будущее, то на начальном этапе нам нужно будет сформировать и согласовать итоговое видение конечного результата вашего проекта. Я предпочитаю создавать такое видение на основе анализа конкурентных решений и ваших личных пожеланий. Это позволит понять, какие подходы используют другие, и предложить вам уникальное и более эффективное решение.

Ваш проект по созданию интерактивного 3D-компонента для дизайнерского стола-воронки требует глубокого понимания WebGL и Three.js. Я обладаю опытом в разработке сложных шейдеров и генерации 3D-моделей, что позволит реализовать ваш проект с учетом всех технических требований и нюансов.

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

Суть задачи в том, чтобы поймать параметры деформации в конкретную миллисекунду и запечь их в статичный меш, пока сам вихрь крутится дальше. Это самое интересное место.
На прошлом проекте делал экспорт запечённой геометрии из ShaderMaterial с вершинным смещением в glTF. Там тоже нужно было копировать атрибут позиций в отдельный буфер без остановки рендера.
Чтобы оценить объём точнее, уточните: деформация воронки уже заложена в вершинах исходной GLB, или форма полностью вычисляется в вершинном шейдере?

Привет!
Это очень интересный проект, потому что он сочетает в себе разработку шейдеров для процедурной графики в реальном времени и генерацию геометрии, а не традиционный просмотрщик продуктов Three.js.
У меня есть опыт работы с реализациями пользовательских ShaderMaterial на GLSL в Three.js, процедурной анимацией и рабочими процессами экспорта геометрии, что как раз и является основными требованиями здесь.
Наиболее важная техническая деталь в вашей спецификации — это различие между анимированным объектом в реальном времени и захваченной замороженной геометрией.
Вместо простого экспорта отображаемой в данный момент сетки система должна захватывать точное состояние деформации и параметры шейдера в определенный момент времени и генерировать отдельный снимок статической геометрии, в то время как исходный объект продолжает вращаться и анимироваться в реальном времени.
Для реализации я бы использовал пользовательские шейдеры GLSL в Three.js и специальный слой генерации геометрии, который отражает логику деформации, используемую визуальным эффектом.
Сцена будет включать фиксированное положение камеры, студийное освещение, мягкие тени, физически корректные материалы и плавное непрерывное вращение вокруг оси Y.
Для материала я бы создал пользовательский шейдер для стекла или акрила с отражениями Френеля, искажением, вдохновленным преломлением, анимированными вихревыми потоками и процедурным движением, управляемым временем, сохраняя при этом совместимость с настольными и мобильными устройствами. Производительность

… Рабочий процесс захвата будет включать:
захват точного состояния во времени
захват параметров деформации
генерацию замороженной версии геометрии
создание экспортируемой сетки
экспорт через GLTFExporter или OBJExporter

Этот подход гарантирует, что экспортируемая модель точно отражает состояние вихря в выбранный момент времени, а не представляет собой универсальную сетку.

Для повышения производительности я бы сосредоточился на:
оптимизированных вычислениях шейдеров
эффективном обновлении геометрии
минимальном количестве вызовов отрисовки
адаптивном рендеринге для мобильных устройств
стабильной целевой частоте 60 кадров в секунду на современных устройствах

Конечным результатом станет чистый модульный компонент, готовый к интеграции с веб-сайтом, настройке сцены Three.js, логике захвата кода шейдеров и функциональности экспорта.
Проект технически сложен в правильном смысле, поскольку находится на стыке креативного программирования, процедурного моделирова

Добрый день
готов обсудить детали в лс
---------------------------------