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

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.

Pokaż oryginał

Przetłumacz

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?

Pokaż oryginał

Przetłumacz

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.

Pokaż oryginał

Przetłumacz

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?

Pokaż oryginał

Przetłumacz

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.

Pokaż oryginał

Przetłumacz

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

Pokaż oryginał

Przetłumacz