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

Бюджет: 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 днів

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