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

Бюджет: 1500 PLN Срок: 7 дней

Здравствуйте!

Меня зовут Евгений, уже 7 лет я профессионально занимаюсь разработкой мобильных приложений, сайтов, веб-сервисов и веб-приложений.

*Стоимость указал за 1 час работы. Чтобы детальнее дать цену, хотел бы связаться/созвониться и обсудить детали.

- Портфолио, отзывы и награды можно изучить в моем профиле.

Почему нужно выбрать меня?
- Занимал 1 и 2 места на международных чемпионатах и соревнованиях в IT-сфере
- У меня есть подтвержденные видеоотзывы, благодарственные письма
- Я всегда на связи, честный и адекватный
- Работаю по Договору
- Руковожу собственной командой разработки

Буду рад поговорить с Вами подробнее о проекте. Развернуть

Бюджет: 700 PLN Срок: 7 дней

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

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

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

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

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

Бюджет: 1500 PLN Срок: 7 дней

Добрый день, 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-моделей, что позволит реализовать ваш проект с учетом всех технических требований и нюансов.

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

Бюджет: 200 PLN Срок: 2 дня

готов помочь вам с этим

отправлю вам предыдущую работу в чате, чтобы убедиться, что мы подходим друг другу

Бюджет: 14000 PLN Срок: 3 дня

Здравствуйте! Готов качественно выполнить ваш проект. У меня есть опыт в подобных задачах, обсудим детали.

Бюджет: 1167 PLN Срок: 8 дней

Вячеслав, добрый день!

Сразу к главному техническому нюансу, так как именно он определяет подход и цену: внутренний вихрь в воронке сделан через смещение вершин реальной геометрии (vertex displacement) или это чисто фрагментный/raymarch-эффект внутри стекла?

Это критично, так как THREE.GLTFExporter экспортирует именно меш-геометрию. Если вихрь — фрагментный эффект, то «замороженную» модель не получится просто экспортировать: на экране она есть, а реальной геометрии в ней нет. В этом случае на момент снапшота форму вихря нужно запечь в реальную геометрию (например, marching cubes по density-полю) и уже её отдавать в .glb/.gltf. Если же вихрь на вершинах — там проще: фиксируем позиции вершин в нужную миллисекунду и экспортируем.

Что я сделаю:
— загрузка базовой модели (.glb/.gltf) в сцену с фиксированной камерой, без вращения обзора пользователем;
— кастомный ShaderMaterial: прозрачное стекло/акрил с Френелем + анимированный вихрь через фрагментный шейдер (u_time);
— непрерывное вращение по Y;
— кнопка «Зафиксировать форму»: экранная анимация НЕ останавливается, но код снимает параметры/фазу шейдера именно в эту миллисекунду и генерирует замороженную 3D-модель этой фазы;
— экспорт в .obj/.gltf через GLTFExporter;
— оптимизацию под стабильные 60 FPS на десктопе и мобильных.

Работаю с React Three Fiber, drei, postprocessing; делал GPGPU particle flow-fields и raymarched volumetric-сцены — так что кастомные шейдеры и геометрия это мой профиль. Могу скинуть примеры.

Ориентировочно: 14 000 грн, ~8 дней. Точную цифру подтвержу, как только определимся со способом «запекания» вихря (вершины vs фрагмент) — это главный фактор объема. Развернуть

Бюджет: 50000 PLN Срок: 14 дней

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

по сроку я бы закладывал 10-14 рабочих дней на рабочий компонент с загрузкой .glb, статичной камерой, студийным светом, ShaderMaterial, кнопкой слепка и выгрузкой через GLTFExporter или OBJExporter.

ПО цене ориентир - от 65000 грн за первую стабильную версию, точнее скажу после просмотра исходной модели.

тут нюанс - если слепок должен запекать именно математическую деформацию формы, это нормально делается через отдельную геометрию и сохранение параметров фазы.

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

- нужен исходный .glb или .gltf
- нужно понять, экспортируем только форму стола или еще материал с застывшим эффектом
- нужно уточнить целевые устройства для 60 FPS - десктоп, айфон, андроид, планшеты

похожие по инженерной логике кейсы Ingello

- https://business.ingello.com/fractal - сложная интерактивная система с генеративной логикой и автоматизацией
- https://business.ingello.com/vorfahr - пример продукта с нестандартной 3D/цифровой логикой и быстрым запуском

главный лендинг для биржи - https://systems-fl.ingello.com

НА связи, можем обсудить детали тут на бирже и выбрать самый короткий путь без лишней инженерной акробатики =)

в целом норм стартовать с прототипа - сначала делаем сцену, шейдер и снимок, потом докручиваем экспорт и оптимизацию. Развернуть

Бюджет: 1500 PLN Срок: 14 дней

Видел ваш проект с водоворотом, и задача реально интересная. Особенно момент с кнопкой "Зафиксировать форму", где нужно снять снимок математических параметров деформации без остановки анимации, и потом сгенерировать меш из этой фазы шейдера. Это нетривиально, но решаемо через синхронизацию u_time и геометрии на стороне CPU.

Я fullstack-разработчик с ~3.5 годами коммерческого опыта, основной стек TypeScript и Vue/React. Three.js, GLSL и работу с геометрией использую в веб-проектах. Шейдер для прозрачного акрила с эффектом Френеля и анимацией внутренних потоков через u_time, плюс экспорт через GLTFExporter, это то, с чем я работал на практике.

По результату: оптимизированный скрипт, готовый к интеграции, 60 FPS на десктопе и мобильных. Могу показать подход к реализации до старта, если хотите понять как именно планирую делать снимок фазы и экспорт.

Готов обсудить детали, напишите если есть вопросы.

Бюджет: 26990 PLN Срок: 29 дней

Добрый день! Меня зовут Валентин, и я представляю Arctic Web Agency. Мы - команда, которая специализируется на создании современных и эффективных решений для бизнеса. В личные сообщения смогу предоставить примеры наших схожих работ. Готовы взять ваш проект в работу!

С уважением,
Arctic Web Team
Freelancehunt

Бюджет: 1000 PLN Срок: 5 дней

Работал с Three.js и шейдерами, такие задачи люблю. Вижу это так: пишем GLSL-шейдер с процедурной геометрией водоворота, анимируем через uniforms, и отдельно делаем экспорт снимка через рендер в offscreen-буфер с нужным разрешением. Вопрос: нужен именно растровый снимок (PNG/JPG) или хочется выгружать геометрию как 3D-модель (glTF, OBJ)? Готов обсудить детали.

Бюджет: 1300 PLN Срок: 10 дней

Здравствуйте. Могу выполнить ваше задание. Опыт есть. Пишите договоримся.

Бюджет: 2000 PLN Срок: 5 дней

Добрый день, работаю с three.js и webgl, в профиле есть работы, готов обсудить детали данной задачи

Бюджет: 2000 PLN Срок: 14 дней

Вячеслав, добрый день.

Ключевой момент в этой задаче — не сам стеклянный шейдер, а кнопка «Зафиксировать форму». Деформация воронки живёт в вершинном шейдере, то есть позиции вершин считаются на GPU прямо во время рендера. Если в момент клика просто отдать сцену в GLTFExporter/OBJExporter, на выходе будет исходная, недеформированная модель — экспортёр не видит того, что насчитал шейдер. Это типичная ловушка, на которой такие задачи и встают.

Чтобы снимок был настоящим, деформацию надо «запечь» в геометрию на момент клика:

По клику беру текущее u_time и фазовые параметры.
Считаю смещения вершин на CPU тем же кодом, что в шейдере (выношу формулу деформации в общий JS-модуль, чтобы шейдер и запекание считали одинаково), либо снимаю результат с GPU через transform feedback на WebGL2.
Пишу новые позиции в свежий BufferGeometry, пересчитываю нормали (computeVertexNormals) — иначе во внешнем редакторе модель будет затенена криво.
Отдаю результат в GLTFExporter (.glb/.gltf) или OBJExporter. Основная сцена при этом продолжает крутиться — снимок идёт в отдельный буфер и её не трогает.
Один момент стоит проговорить заранее. Внутренние потоки и линии преломления вы анимируете во фрагментном шейдере — это оптика и цвет поверхности, а не геометрия. В .obj/.gltf эта «закрученность» как форма не запечётся: экспортируется деформированный силуэт чаши с ножкой плюс приближение стеклянного материала. Если под «застывшим вихрем» имеется в виду именно объёмная геометрия внутренних потоков — это другой объём работ (нужно гнать вихрь в реальную геометрию). Давайте на старте сверим, что именно должно лежать в скачанном файле — от этого зависит подход.

По остальному:

Камера фиксированная, без управления — как в ТЗ.
Вращение и деформация — в вершинном шейдере, материал — кастомный ShaderMaterial со стеклом и Френелем.
60 FPS держу за счёт одного меша без пофреймовой работы на CPU; тяжёлая операция (запекание) случается только в момент клика.
На выходе — готовый модуль для интеграции в вашу страницу, с базовой моделью на входе.
Есть портфолио по WebGL/шейдерной анимации, покажу в личке.

Срок: 10–14 дней.
Стоимость: точную цифру назову после того, как сверим вопрос про содержимое экспорта и посмотрю базовую модель воронки. Развернуть

Бюджет: 2500 PLN Срок: 12 дней

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

Как разработчик полного стека, у меня есть полный опыт в программировании на three.js.
Вот некоторые из моих примеров:

https://www.kodeclubs.com/
https://acoustics.autoneum.com/

Я готов начать прямо сейчас, и не стесняйтесь связаться со мной в любое время.

С наилучшими пожеланиями, Хан. Развернуть

Бюджет: 2000 PLN Срок: 10 дней

https://sensei3d.com/

Здравствуйте, надеюсь, у вас все хорошо.

Я могу создать интерактивный компонент Three.js WebGL для вашего стола с водоворотом, используя предоставленную модель GLB или GLTF с фиксированной камерой, студийным освещением, плавным вращением по оси Y и пользовательским шейдером для стекла.

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

Для функции Capture Shape я реализую кнопку, которая делает снимок текущих параметров деформации и фазы шейдера в момент нажатия, в то время как видимая анимация продолжает работать. Используя эти замороженные значения, я создам отдельную неанимированную 3D-форму, которая представляет это захваченное состояние, и экспортирую ее в формате GLTF или OBJ с помощью экспортеров Three.js.

С наилучшими пожеланиями,
Юссеф. Развернуть

Бюджет: 1000 PLN Срок: 4 дня

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

Бюджет: 1800 PLN Срок: 8 дней

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

Бюджет: 2000 PLN Срок: 10 дней

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

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

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

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

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

Бюджет: 1500 PLN Срок: 10 дней

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