Фантастическая интерактивная работа на юнити 😍

В вебе это тоже возможно с деградацией картинки на слабых устройствах

#reference by KeJyun Wu

https://www.youtube.com/watch?v=PjHKcdeRQiY

Відтворення ефекту на https://www.zikd.space/de від Юри Артюха. Заодно показує як модифікувати матеріали тришки, що є дуже потужною технікою, і дозволяє робити дива в браузері не пишучи кілометри реалізацій PBR. Хоча в цьому випадку мабуть можна було взяти геометрію ціліндра замість площини і керувати полем offset текстур.

До речі, нагадую про зручний спосіб дивитись шейдери тришки.

Загалом це крутий, хоч і доволі простий ефект. Було б цікаво поекспериментувати з оживленням типографіки і самої форми — це відкриє величезний простір до кінетичної типографіки наступного рівня. Хто спробує і в кого вийде, напишу його ім'я на снаряді 😉😄

#tutorial #reference

Для мене було цікаво як розробники Spline зробили таку швидку реалізацію розмиття, і на щастя прямо в коді шейдера є посилання на шейдертой. Вони навіть зробили визначення сили розмиття в залежності від глибини, але для цього всі об'єкти позаду "скла" рендеряться вдруге з DepthMaterial. Тому ця фіча має прихований оверхед. Подивитись можна самому з допомогою SpectorJS — взагалі рекомендую аналізувати з його допомогою всі цікаві вам сайти, дуже круто бустить скіл 😉

До речі, ще одне відео з цією технікою, цікава ідея:
https://www.youtube.com/watch?v=59NVCBo26TA

Сам Spline це майбутнє масове 3D в вебі, покриває багато потреб дизайнерів і здешевлює виробництво. Хороша новина в тому, що ті хто вміють робити вау за межами можливостей Spline будуть мати більше роботи через розширення ринку. Також можна почати корисутватись Spline і робити те саме 3D що зараз, тільки швидше. Вангую появу професії по сплайну, як от сталось з вебфлоу. І до речі, вони одне з одним чудово інтегруються.

#tool #reference

Дуже крута демка по інтеграції HTML інтерфейсу в тривимірну WebGL сцену.

https://codesandbox.io/s/interactive-spline-scene-live-html-f79ucc

Сцену зроблено в Spline (знову він, так :), інтегровано за допомогою react three fiber. До речі екосистема r3f поповнюється такими шалено крутими речами, що цьому варто присвятити цілу серію постів. Але зараз не про те. Мене вразило як круто це працює, зберігається повний функціонал HTML, навіть є автозаповнення імейлу (я для відео почистив). Це значно крутіше, ніж у будь-яких подібних демо.

Ефект досягається за рахунок накладання canvas з прозорим віконцем поверх сторінки, а контейнеру сторінки прописаний стиль transform: matrix3d(...), і ця матриця оновлюється відповідно до 3D сцени. Можна помітити як воно іноді не встигає, але з тим нічого не зробиш.

Очевидно, таке рішення дуже обмежене в можливостях, але. Курсор у вигляді руки тицяє по DOM кнопкам! І від неї ще відкидається тінь на сцену! І ховери! Дуже дуже круто 😍

#reference

Сайт-портфоліо David Heckhoff
Мабуть це буде тиждень мультяшного дизайну :D

https://david-hckh.com/

Цікаві анімації і мені прямо зайшло як на першому екрані він щось там собі друкує і крутить колесо мишки :) Дрібниця, що створює всю атмосферу.

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

#reference

Сайт візитка Arno Di Nunzio.

https://adinunz.io/

Крутий інтерактив, водночас мінімалістичний і багатий дизайн, кайф :) І так, елементи падають по скролу 🔥

З неба капають сльози клонів портфоліо Bruno Simon 😅

Рефки для сьогоднішніх постів підказав автор @blinklinks. Обіцяю, наступного тижня буде інший дизайн :)

#reference

Продовжую тиждень мультяшного дизайну в вебі — портфоліо дизайнера і арт директора Peter Tarka

https://petertarka.com/

Цей сайт насправді означав прихід відео на прозорому тлі в веб. Нарешті. Йому вже кілька місяців, але не згадати його не можна. Тепер можна робити ще більше різних крутих штук і я це вже обкатав в продакшені, може колись напишу про те :)

Для всіх нормальних браузерів пакуємо png секвенції так:

ffmpeg -framerate 30 -f image2 -i ./png/input%03d.png -c:v libvpx-vp9 -pix_fmt yuva420p output.webm

Звісно, потрібно при цьому встановити ffmpeg :)

Для Safari беремо MacOS і пакуємо ту саму секвенцію використовуючи QuickTime. Завелось тільки так 🤷‍♂️

#reference

Як закохатись в сайт з першого погляду

Або принаймні закохати мене. Для цього достатньо зробити щось чарівне і дуже гарне використовуючи технічно прості методи. Сьогодні пропоную вашій увазі сайт зроблений Immersive Garden:

https://gleec.com/

Технічно нічого складного, хіба що вони використали GPGPU для симуляції поінтів та ліній, але для подібної анімації можна було обійтись і без того. По анімації тексту Юра Артюх встиг зробити туторіал, за що йому дяка ♥️

Найголовніше тут — арт-дирекшн. Саме ідеї та вміння користуватись простими методами дозволяє робити подібні дуже круті сайти. Колись я теж цьому навчусь :)

#reference

Чарівне медитативне аудіовізуальне

https://www.artisansdidees.com/en

Так, в нас знову сайт від Immersive Garden, і так, вони знову роблять магію. Цього разу технічно це не такий простий сайт як вчора, але він так само має дуже крутий арт дирекшн, котрий за рахунок більш складних прийомів робить досвід користувача ще більш феноменальним. Деталей, ідей і дрібниць тут дуже багато. Про частину з них розповіли власне автори сайту, дуже рекомендую :)

#reference

Привіт друзі, сьогодні в нашій підбірці для натхнення зʼявився такий сайт https://lr.doesbook.kr/

Він креативно поєднує 2D і 3D сцени і інтерактивно розповідає свою історію. Ви знайшли всі пасхалки? :)

Насолоджуйтесь та шукайте натхнення, та не забуваєм донатити на ЗСУ 🔥

#reference

Сайт Національного оборонного хакатону, що відбудеться 20-21 жовтня.

Гарна робота з простими візуальними ідеями, котрі чудово римуються в різних секціях. Прості та ефективні анімації 😏 Як ви зрозуміли цей пост тут не через видатні ефекти 😄

Реєструйтесь якщо ви в темі 😉

https://hackathon.mil.gov.ua/

#reference

Півтора роки тому робив ось такий WebGL компонент для одного сайту, от він нарешті релізнувся :)

Лінк шейрити не буду, бо то москалі (каюсь і більше не працюємо)

#my #reference

https://github.com/0beqz/realism-effects

Нарешті релізнули SSGI для тришки. Ця технологія - це як поява RTX в відеокартах, це зовсім інший рівень. Правда за непряме освітлення і м'які тіні доводиться суттєво платити швидкодією, тому це доволі нішеве рішення. Але ж як круто що воно є 🔥

#tool #reference

Як рендерити траву растеризацією

Непоганий туторіал від Simondev, котрий показує як зробити поля травички спираючись на доповідь розробників Ghost of Tsushima на GDC. Представлені концепції доволі круті і варті того щоб в них розібратися, бо конкретних реалізацій може бути багато. І це все можна робити не лише з травою :)

https://www.youtube.com/watch?v=bp7REZBV4P4

Live demo:
https://simondevyoutube.github.io/Quick_Grass/

Github:
https://github.com/simondevyoutube/Quick_Grass?tab=readme-ov-file

А тим часом в @webgl_ua я показую WIP своєї реалізації, які проблеми виникають на шляху і як їх вирішувати :)

#reference #tutorial

https://manifesto.itsoffbrand.com/

Прикольна концепція сайту-квесту який проходиться використовуючи різні взаємодії з сайтом. Особливо сподобалось з цифрами, хоча на мобілці не розібрався як це пройти :)

#reference

https://fxtwitter.com/avstorm/status/1861841329744986257 #reference