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

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

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

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

Готовий обговорити деталі, напишіть якщо є питання.

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

Перекласти

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

З повагою
Arctic Web Team
Freelancehunt

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

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

Перекласти

Доброго дня. Можу виконати ваше завдання. Досвід є. Пишіть, домовимось.

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

Перекласти

Доброго дня, працюю з three.js та webgl, в профілі є роботи, готовий обговорити деталі цього завдання

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

Перекласти

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

Ключовий момент у цій задачі — не сам скляний шейдер, а кнопка «Зафіксувати форму». Деформація воронки живе у вершинному шейдері, тобто позиції вершин обчислюються на 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 днів.
Вартість: точну цифру назву після того, як звіримо питання про вміст експорту і подивлюся базову модель воронки.

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

Перекласти

Привіт, В'ячеславе

Як фулл-стек розробник, я маю повний досвід у програмуванні на three.js. Ось деякі з моїх прикладів:

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

Я готовий почати прямо зараз, і не соромтеся зв'язатися зі мною в будь-який час.

… З найкращими побажаннями, Хан.

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

Перекласти

https://sensei3d.com/

Привіт, сподіваюся, у вас все добре.

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

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

Для функції Capture Shape я реалізую кнопку, яка зніме параметри деформації та фазу шейдера в момент натискання, поки видима анімація продовжує працювати. Використовуючи ці заморожені значення, я створю окрему неанімовану 3D-форму, яка представляє цей захоплений стан, і експортуватиму її як GLTF або OBJ за допомогою експортерів Three.js.
…
З найкращими побажаннями,
Юсеф.

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

Перекласти

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

Доброго дня, Вячеслав.

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

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

На фрилансі недавно, беру недорого, але зроблю швидко і якісно.

Підкажіть: форму воронки створює сам шейдер чи деформація вже в геометрії, і який формат зручніше, glb чи obj?

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

Перекласти

Суть задачі в тому, щоб зловити параметри деформації в конкретну мілісекунду і запекти їх у статичну сітку, поки сам вихор крутиться далі. Це найцікавіше місце.
На минулому проекті робив експорт запеченої геометрії з ShaderMaterial з вершинним зсувом у glTF. Там також потрібно було копіювати атрибут позицій в окремий буфер без зупинки рендеру.
Щоб оцінити обсяг точніше, уточніть: деформація воронки вже закладена у вершинах вихідного GLB, чи форма повністю обчислюється у вершинному шейдері?

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

Перекласти

Привіт! Це дуже цікавий проект, тому що він поєднує в собі розробку шейдерів для процедурної графіки в реальному часі та генерацію геометрії, а не традиційний переглядач продуктів Three.js. У мене є досвід роботи з реалізаціями користувацьких ShaderMaterial на GLSL в Three.js, процедурною анімацією та робочими процесами експорту геометрії, що якраз і є основними вимогами тут. Найбільш важлива технічна деталь у вашій специфікації — це різниця між анімованим об'єктом в реальному часі та захопленою замороженою геометрією. Замість простого експорту відображуваної в даний момент сітки система повинна захоплювати точний стан деформації та параметри шейдера в певний момент часу та генерувати окремий знімок статичної геометрії, в той час як вихідний об'єкт продовжує обертатися та анімуватися в реальному часі. Для реалізації я б використовував користувацькі шейдери GLSL в Three.js та спеціальний шар генерації геометрії, який відображає логіку деформації, використану візуальним ефектом. Сцена буде включати фіксоване положення камери, студійне освітлення, м'які тіні, фізично коректні матеріали та плавне безперервне обертання навколо осі Y. Для матеріалу я б створив користувацький шейдер для скла або акрилу з відображеннями Френеля, спотворенням, натхненним заломленням, анімованими вихровими потоками та процедурним рухом, керованим часом, зберігаючи при цьому сумісність з настільними та мобільними пристроями. Продуктивність Робочий процес захоплення буде включати: захоплення точного стану у часі захоплення параметрів деформації генерацію замороженої версії геометрії створення експортованої сітки експорт через GLTFExporter або OBJExporter Цей підхід гарантує, що експортована модель точно відображає стан вихору в обраний момент часу, а не є універсальною сіткою. Для підвищення продуктивності я б зосередився на: оптимізованих обчисленнях шейдерів ефективному оновленні геометрії мінімальній кількості викликів відтворення адаптивному рендерингу для мобільних пристроїв стабільній цільовій частоті 60 кадрів на секунду на сучасних пристроях. Кінцевим результатом стане чистий модульний компонент, готовий до інтеграції з веб-сайтом, налаштуванню сцени Three.js, логіці захоплення коду шейдерів та функціональності експорту. Проект технічно складний у правильному сенсі, оскільки знаходиться на стику креативного програмування, процедурного моделювання.

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

Перекласти

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

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

Перекласти