Rozwój sceny WebGL/Three.js z generowaniem i eksportem 3D (snapshot) z animowanego shadera

Budżet: 1500 PLN Termin: 7 dni

Cześć!

Nazywam się Jewgienij, od 7 lat profesjonalnie zajmuję się tworzeniem aplikacji mobilnych, stron internetowych, usług internetowych i aplikacji webowych.

*Cena, którą podałem, dotyczy 1 godziny pracy. Aby dokładniej podać cenę, chciałbym się skontaktować/rozmawiać i omówić szczegóły.

- Portfolio, opinie i nagrody można znaleźć w moim profilu.

Dlaczego warto mnie wybrać?
- Zająłem 1 i 2 miejsce na międzynarodowych mistrzostwach i zawodach w dziedzinie IT
- Mam potwierdzone wideoopinie, listy z podziękowaniami
- Zawsze jestem dostępny, uczciwy i rozsądny
- Pracuję na podstawie umowy
- Prowadzę własny zespół deweloperski

Będę zadowolony, mogąc porozmawiać z Państwem szczegółowo o projekcie. Rozwiń

Budżet: 700 PLN Termin: 7 dni

Cześć, Wjaczesław.

Załaduję .glb w Three.js, ustawię stałą kamerę bez kontroli, światło studyjne i wolne obracanie wokół osi Y. Szkło zrobię jako niestandardowy ShaderMaterial z efektem Fresnela, spiralę wewnątrz wiru animuję w shaderze fragmentowym przez u_time.

Najważniejsze jest uchwycenie kształtu. Po naciśnięciu przycisku scena obraca się dalej, a w momencie kliknięcia zatrzymuję u_time, piekę wierzchołki siatki w statyczną geometrię i eksportuję przez GLTFExporter, aby kształt otwierał się w dowolnym edytorze. Utrzymuję 60 FPS na desktopie i urządzeniach mobilnych.

Jestem nowy na freelansie, biorę niedrogo, ale zrobię to szybko i jakościowo.

Proszę o informację: kształt wiru tworzy sam shader czy deformacja jest już w geometrii, i jaki format jest wygodniejszy, glb czy obj?

Budżet: 1500 PLN Termin: 7 dni

Dzień dobry, Vyacheslav!

Zapoznałem się z odpowiedziami innych specjalistów na Twój projekt. Postaram się zaproponować rozwiązanie, abyś miał możliwość komunikacji nie tylko z czatami GPT =)

- ⭐689% wzrostu ruchu w ciągu 3 miesięcy!⭐ - https://freelancehunt.com/showcase/work/689-prirostu-trafiku-za-misyatsi/1993127.html
- ⭐Firma drukująca nadruki na odzieży. Wzrost ruchu o 486%⭐ - https://freelancehunt.com/showcase/work/magazin-dlya-doroslih-zrostannya-prodazhiv-na/1993118.html
- ⭐Wzrost ruchu o 4854% w ciągu 15 miesięcy. Chcesz tak samo?⭐ - https://freelancehunt.com/showcase/work/zrostannya-trafiku-na-4854-za/1993112.html

Na razie powstrzymam się od konkretnej oferty, ponieważ ważne jest zrozumienie końcowych celów Twojego projektu. Aby zaproponować optymalną formę współpracy, proszę o wyjaśnienie:

- Jaki termin realizacji projektu Cię interesuje? Planujesz szybkie uruchomienie, czy masz zapas czasu?
- Czy masz szczegółowe zadanie techniczne lub uformowaną wizję przyszłej sceny?
- Ile czasu animacja powinna być aktywna przed zatrzymaniem?
- Czy rozważasz możliwość stworzenia unikalnego shadera, czy jesteś gotów użyć istniejących rozwiązań?

Na koszt i terminy realizacji wpływa kilka czynników:

1. Posiadanie gotowego modelu bazowego i jego adaptacja do Twoich wymagań.
2. Opracowanie unikalnego shadera lub wykorzystanie istniejących rozwiązań.
3. Szczegółowość zadania technicznego: im bardziej szczegółowe, tym szybciej i dokładniej można zrealizować projekt.
4. Zakres pracy związanej z integracją i konfiguracją sceny w Three.js.
5. Złożoność animacji i konieczność optymalizacji kodu dla stabilnej pracy na różnych urządzeniach.

Patrząc w przyszłość, na początkowym etapie musimy uformować i uzgodnić ostateczną wizję końcowego rezultatu Twojego projektu. Preferuję tworzenie takiej wizji na podstawie analizy konkurencyjnych rozwiązań i Twoich osobistych życzeń. Pozwoli to zrozumieć, jakie podejścia stosują inni i zaproponować Ci unikalne i bardziej efektywne rozwiązanie.

Twój projekt dotyczący stworzenia interaktywnego komponentu 3D dla designerskiego stołu-lejka wymaga głębokiego zrozumienia WebGL i Three.js. Posiadam doświadczenie w opracowywaniu skomplikowanych shaderów i generowaniu modeli 3D, co pozwoli na realizację Twojego projektu z uwzględnieniem wszystkich wymagań technicznych i niuansów.

Następnym krokiem jest omówienie szczegółów projektu i zrozumienie, jak bardzo do siebie pasujemy. Ustalmy wszystkie niuanse w korespondencji lub na spotkaniu. Rozwiń

Budżet: 200 PLN Termin: 2 dni

gotowy, aby Ci w tym pomóc

wyślę Ci wcześniejszą pracę na czacie, aby upewnić się, że pasujemy

Budżet: 14000 PLN Termin: 3 dni

Cześć! Jestem gotów jakościowo wykonać twój projekt. Mam doświadczenie w podobnych zadaniach, omówimy szczegóły.

Budżet: 1167 PLN Termin: 8 dni

Wjačesławie, dzień dobry!

Od razu do głównego technicznego szczegółu, bo to on określa podejście i cenę: wewnętrzny wir w leju jest zrobiony przez przesunięcie wierzchołków rzeczywistej geometrii (vertex displacement) czy to czysto fragmentowy/raymarch-efekt wewnątrz szkła?

To jest krytyczne, bo THREE.GLTFExporter eksportuje właśnie geometrię siatki. Jeśli wir to efekt fragmentowy, to „zamrożony” model nie będzie można po prostu wyeksportować: na ekranie jest, a rzeczywistej geometrii w nim nie ma. W tym przypadku w momencie zrzutu formę wiru trzeba zapiec w rzeczywistą geometrię (na przykład, marching cubes po polu gęstości) i już ją oddać w .glb/.gltf. Jeśli natomiast wir jest na wierzchołkach — jest prościej: ustalamy pozycje wierzchołków w potrzebnej milisekundzie i eksportujemy.

Co zrobię:
— załadowanie podstawowego modelu (.glb/.gltf) do sceny z ustaloną kamerą, bez obracania widoku przez użytkownika;
— niestandardowy ShaderMaterial: przezroczyste szkło/akryl z Fresnelem + animowany wir przez fragmentowy shader (u_time);
— ciągłe obracanie po Y;
— przycisk „Zatrzymaj formę”: animacja na ekranie NIE zatrzymuje się, ale kod zczytuje parametry/fazę shadera dokładnie w tę milisekundę i generuje zamrożony model 3D tej fazy;
— eksport do .obj/.gltf przez GLTFExporter;
— optymalizacja pod stabilne 60 FPS na desktopie i urządzeniach mobilnych.

Pracuję z React Three Fiber, drei, postprocessing; robiłem GPGPU particle flow-fields i raymarched volumetric-sceny — więc niestandardowe shadery i geometria to mój profil. Mogę przesłać przykłady.

Orientacyjnie: 14 000 UAH, ~8 dni. Dokładną kwotę potwierdzę, jak tylko ustalimy sposób „zapiekania” wiru (wierzchołki vs fragment) — to główny czynnik objętości. Rozwiń

Budżet: 50000 PLN Termin: 14 dni

mamy już praktycznie gotową bazę pod taką scenę WebGL - Three.js, animacja shaderów, obrót obiektu i eksport 3D, można szybko dostosować do twojego modelu ))

co do terminu, zakładałbym 10-14 roboczych dni na komponent roboczy z ładowaniem .glb, statyczną kamerą, światłem studyjnym, ShaderMaterial, przyciskiem odlewu i eksportem przez GLTFExporter lub OBJExporter.

co do ceny, orientacyjnie - od 65000 UAH za pierwszą stabilną wersję, dokładniej powiem po obejrzeniu modelu źródłowego.

tutaj jest niuans - jeśli odlew ma zapisywać dokładnie matematyczną deformację kształtu, to można to zrobić przez oddzielną geometrię i zapisanie parametrów fazy.

jeśli jednak trzeba zapisywać wizualne linie załamania z fragmentowego shadera jako fizyczną geometrię, to już jest trudniejsze i lepiej liczyć cenę osobno.

- potrzebny jest źródłowy .glb lub .gltf
- trzeba zrozumieć, czy eksportujemy tylko kształt stołu, czy także materiał z efektem zastygania
- trzeba wyjaśnić docelowe urządzenia dla 60 FPS - desktop, iPhone, Android, tablety

podobne pod względem logiki inżynieryjnej przypadki Ingello

- https://business.ingello.com/fractal - skomplikowany interaktywny system z generatywną logiką i automatyzacją
- https://business.ingello.com/vorfahr - przykład produktu z niestandardową logiką 3D/cyfrową i szybkim uruchomieniem

główny landing dla giełdy - https://systems-fl.ingello.com

JESTEM DO DYSPOZYCJI, możemy omówić szczegóły tutaj na giełdzie i wybrać najkrótszą drogę bez zbędnej akrobatyki inżynieryjnej =)

ogólnie dobrze zacząć od prototypu - najpierw robimy scenę, shader i zdjęcie, potem dopracowujemy eksport i optymalizację. Rozwiń

Budżet: 1500 PLN Termin: 14 dni

Widziałem twój projekt z wirującą wodą i zadanie jest naprawdę interesujące. Szczególnie moment z przyciskiem "Zablokuj formę", gdzie trzeba zrobić zrzut matematycznych parametrów deformacji bez zatrzymywania animacji, a następnie wygenerować siatkę z tej fazy shadera. To nie jest trywialne, ale do zrealizowania poprzez synchronizację u_time i geometrii po stronie CPU.

Jestem programistą fullstack z około 3,5-letnim doświadczeniem komercyjnym, główny stos to TypeScript oraz Vue/React. Three.js, GLSL i praca z geometrią są używane w projektach webowych. Shader dla przezroczystego akrylu z efektem Fresnela i animacją wewnętrznych przepływów przez u_time, plus eksport przez GLTFExporter, to to, z czym pracowałem w praktyce.

W wyniku: zoptymalizowany skrypt, gotowy do integracji, 60 FPS na desktopie i urządzeniach mobilnych. Mogę pokazać podejście do realizacji przed rozpoczęciem, jeśli chcesz zrozumieć, jak dokładnie planuję zrobić zrzut fazy i eksport.

Jestem gotów omówić szczegóły, napisz, jeśli masz pytania.

Budżet: 26990 PLN Termin: 29 dni

Dzień dobry!
Nazywam się Walentyn i reprezentuję Arctic Web Agency. Jesteśmy zespołem, który specjalizuje się w tworzeniu nowoczesnych i efektywnych rozwiązań dla biznesu. W wiadomościach prywatnych mogę przesłać przykłady naszych podobnych prac. Jesteśmy gotowi zająć się Twoim projektem!
Z poważaniem
Zespół Arctic Web
Freelancehunt

Budżet: 1000 PLN Termin: 5 dni

Pracowałem z Three.js i shaderami, takie zadania lubię. Widzę to tak: piszemy shader GLSL z proceduralną geometrią wiru, animujemy przez uniforms, a osobno robimy eksport zdjęcia przez renderowanie w buforze offscreen o odpowiedniej rozdzielczości. Pytanie: potrzebny jest dokładnie rastrowy obrazek (PNG/JPG) czy chce się eksportować geometrię jako model 3D (glTF, OBJ)? Jestem gotów omówić szczegóły.

Budżet: 1300 PLN Termin: 10 dni

Cześć. Mogę wykonać twoje zadanie. Mam doświadczenie. Napisz, dogadamy się.

Budżet: 2000 PLN Termin: 5 dni

Dzień dobry, pracuję z three.js i webgl, w profilu są prace, gotów omówić szczegóły tego zadania

Budżet: 2000 PLN Termin: 14 dni

Wiaczesław, dzień dobry.

Kluczowym punktem w tym zadaniu nie jest sam szklany shader, ale przycisk „Zablokuj kształt”. Deformacja leja odbywa się w shaderze wierzchołków, to znaczy pozycje wierzchołków są obliczane na GPU bezpośrednio w czasie renderowania. Jeśli w momencie kliknięcia po prostu przekażemy scenę do GLTFExporter/OBJExporter, na wyjściu otrzymamy oryginalny, nieodkształcony model — eksportera nie widzi tego, co obliczył shader. To typowa pułapka, na której takie zadania się zatrzymują.

Aby zrzut był prawdziwy, deformację należy „upiec” w geometrii w momencie kliknięcia:

Po kliknięciu biorę aktualny u_time i parametry fazowe.
Obliczam przesunięcia wierzchołków na CPU tym samym kodem, co w shaderze (wyciągam formułę deformacji do wspólnego modułu JS, aby shader i pieczenie obliczały to samo), lub pobieram wynik z GPU przez transform feedback na WebGL2.
Zapisuję nowe pozycje w świeżym BufferGeometry, przeliczam normalne (computeVertexNormals) — w przeciwnym razie w zewnętrznym edytorze model będzie źle oświetlony.
Przekazuję wynik do GLTFExporter (.glb/.gltf) lub OBJExporter. Główna scena w tym czasie nadal się obraca — zrzut idzie do oddzielnego bufora i jej nie dotyka.
Jeden moment warto omówić wcześniej. Wewnętrzne strumienie i linie załamania animujesz w fragmencie shaderze — to optyka i kolor powierzchni, a nie geometria. W .obj/.gltf ta „skręconosć” jako forma nie zostanie upieczona: eksportowany jest odkształcony zarys misy z nóżką plus przybliżenie materiału szklanego. Jeśli przez „zamrożony wir” masz na myśli rzeczywistą geometrię wewnętrznych strumieni — to inny zakres prac (trzeba wprowadzić wir w rzeczywistą geometrię). Sprawdźmy na początku, co dokładnie powinno znajdować się w pobranym pliku — od tego zależy podejście.

Co do reszty:

Kamera jest stała, bez kontroli — jak w specyfikacji.
Obrót i deformacja — w shaderze wierzchołków, materiał — niestandardowy ShaderMaterial ze szkłem i Fresnelem.
60 FPS utrzymuję dzięki jednemu meshowi bez pracy na CPU na poziomie klatki; ciężka operacja (pieczenie) zdarza się tylko w momencie kliknięcia.
Na wyjściu — gotowy moduł do integracji na twojej stronie, z podstawowym modelem na wejściu.
Mam portfolio dotyczące WebGL/animacji shaderów, pokażę w prywatnej wiadomości.

Termin: 10–14 dni.
Koszt: dokładną kwotę podam po tym, jak ustalimy kwestię zawartości eksportu i zobaczę podstawowy model leja. Rozwiń

Budżet: 2500 PLN Termin: 12 dni

Cześć, Wjaczesławie

Jako programista full-stack mam pełne doświadczenie w programowaniu w three.js. Oto kilka moich przykładów:

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

Jestem gotowy, aby zacząć od razu, i czuj się swobodnie, aby skontaktować się ze mną w każdej chwili.

Pozdrawiam, Hanh.

Budżet: 2000 PLN Termin: 10 dni

https://sensei3d.com/

Cześć, mam nadzieję, że wszystko w porządku.

Mogę zbudować interaktywny komponent Three.js WebGL dla twojego stołu do whirlpoolu, używając dostarczonego modelu GLB lub GLTF z zablokowaną kamerą, oświetleniem studyjnym, płynną rotacją wokół osi Y oraz niestandardowym shaderem stylu szkła.

Stworzę czystą scenę z zablokowaną perspektywą lub kamerą aksonometryczną, miękkimi cieniami, błyszczącymi refleksami oraz zoptymalizowanym renderowaniem dla komputerów stacjonarnych i urządzeń mobilnych. Obiekt będzie się ciągle obracał, podczas gdy shader animuje efekty przezroczystego szkła akrylowego z refleksami Fresnela i poruszającymi się spiralnymi liniami refrakcji, które będą napędzane czasem.

Dla funkcji Capture Shape wdrożę przycisk, który zapisze aktualne parametry deformacji i fazę shadera w dokładnym momencie kliknięcia, podczas gdy widoczna animacja będzie nadal działać. Używając tych zamrożonych wartości, wygeneruję osobny, nieanimowany model 3D, który reprezentuje ten uchwycony stan i wyeksportuję go jako GLTF lub OBJ za pomocą eksportera Three.js.

Z poważaniem,
Youssef. Rozwiń

Budżet: 1000 PLN Termin: 4 dni

Dzień dobry, mogę zacząć pracę już teraz. W branży od ponad 4 lat, pracuję z three.js i webgl, mogę przygotować przykład, jak to będzie wyglądać, już dzisiaj do wieczora i pokazać wynik, oczywiście na dopracowanie potrzebuję jeszcze 1-2 dni. Będę zadowolony ze współpracy.

Budżet: 1800 PLN Termin: 8 dni

Istota zadania polega na uchwyceniu parametrów deformacji w konkretnej milisekundzie i zapieczeniu ich w statycznym siatce, podczas gdy wir wciąż się kręci. To jest najciekawsza część. W poprzednim projekcie robiłem eksport zapieczonej geometrii z ShaderMaterial z przesunięciem wierzchołków do glTF. Tam również trzeba było skopiować atrybut pozycji do oddzielnego bufora bez zatrzymywania renderowania. Aby dokładniej ocenić zakres, proszę wyjaśnić: deformacja wiru jest już zawarta w wierzchołkach początkowego GLB, czy forma jest całkowicie obliczana w wierzchołkowym shaderze?

Budżet: 2000 PLN Termin: 10 dni

Cześć! To bardzo interesujący projekt, ponieważ łączy w sobie rozwój shaderów dla proceduralnej grafiki w czasie rzeczywistym oraz generację geometrii, a nie tradycyjny przeglądarka produktów Three.js. Mam doświadczenie w realizacji niestandardowych ShaderMaterial w GLSL w Three.js, proceduralnej animacji oraz procesach eksportu geometrii, co jest głównym wymaganiem tutaj. Najważniejszym szczegółem technicznym w twojej specyfikacji jest różnica między animowanym obiektem w czasie rzeczywistym a uchwyconą zamrożoną geometrią. Zamiast prostego eksportu aktualnie wyświetlanej siatki, system powinien uchwycić dokładny stan deformacji i parametry shadera w danym momencie czasu oraz wygenerować oddzielny zrzut statycznej geometrii, podczas gdy oryginalny obiekt nadal się obraca i animuje w czasie rzeczywistym. Do realizacji użyłbym niestandardowych shaderów GLSL w Three.js oraz specjalnej warstwy generacji geometrii, która odzwierciedla logikę deformacji używaną przez efekt wizualny. Scena będzie zawierać stałą pozycję kamery, oświetlenie studyjne, miękkie cienie, fizycznie poprawne materiały oraz płynne, ciągłe obracanie wokół osi Y. Dla materiału stworzyłbym niestandardowy shader dla szkła lub akrylu z odbiciami Fresnela, zniekształceniem inspirowanym załamaniem, animowanymi wirami i proceduralnym ruchem sterowanym czasem, zachowując jednocześnie kompatybilność z urządzeniami stacjonarnymi i mobilnymi. Wydajność Proces uchwytywania będzie obejmować: uchwycenie dokładnego stanu w czasie uchwycenie parametrów deformacji generację zamrożonej wersji geometrii stworzenie eksportowalnej siatki eksport przez GLTFExporter lub OBJExporter Takie podejście gwarantuje, że eksportowany model dokładnie odzwierciedla stan wiru w wybranym momencie czasu, a nie stanowi uniwersalnej siatki. Aby zwiększyć wydajność, skoncentrowałbym się na: zoptymalizowanych obliczeniach shaderów efektywnym aktualizowaniu geometrii minimalnej liczbie wywołań renderowania adaptacyjnym renderowaniu dla urządzeń mobilnych stabilnej docelowej częstotliwości 60 klatek na sekundę na nowoczesnych urządzeniach Ostatecznym wynikiem będzie czysty, modułowy komponent gotowy do integracji z witryną internetową, konfiguracją sceny Three.js, logiką uchwytywania kodu shaderów oraz funkcjonalnością eksportu. Projekt jest technicznie skomplikowany w dobrym sensie, ponieważ znajduje się na styku kreatywnego programowania, proceduralnego modelowania.

Budżet: 1500 PLN Termin: 10 dni

Dzień dobry
jestem gotów omówić szczegóły w wiadomości prywatnej
---------------------------------