Що ці японці собі дозволяють? Дуже цікавий інтерактив, з найофігеннішим перформансом!

https://www.kubota.com/futurecube/

Вітаємо ще одного автора каналу — @zhenya_nem! Це його дебютний пост :)

#inspiration

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

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

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

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

#tutorial #reference

Як швидко і просто зробити тривимірний сайт без знання WebGL

Пропоную вашій увазі чудовий туторіал по spline.design

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

Виглядає дуже круто! Не стільки завдяки тривимірності, а більше завдяки крутому дизайну ще в фігмі. Хоча в 3D стало тільки краще 😉

Тут можна помацати кінцевий результат

#tutorial

Для мене було цікаво як розробники 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

Дуже крута демка по real-time симуляції бавовни з path-tracing

Нажаль, в вебі нам таке не світить, хоча воно доволі добре працює на українській платформі Crimea — обчислення кадру займає менше ніж 1 мс. Сподіваюсь ми побачимо більше подібних демок і врешті зможемо самі використовувати цю платформу. Технічні деталі цієї нової розробки поки не зрозумілі, але схоже що це переверне уявлення про рендеринг в майбутньому 🔥😏

Автор: ЗСУ

Сайт-портфоліо 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

Міні курс по відтворенню bokoko33.me

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

Такий собі скорочений безкоштовний аналог threejs-journey.com. Але щоб отримати готовий код доведеться заплатити аж 5$ :)

У відео ви побачите:
• Моделювання в Blender
• Імпорт в Three.js
• Приклад непоганої організації коду
• Як працювати з хелперами щоб зробити розробку зручнішою
• Використання ScrollTrigger
• Адаптивність
• Анімації
• Деплой сайту на Vercel

#tutorial

Закінчуємо тиждень мультиків солов'їною музикою.

https://folk-ukraine.com/

Аплікації це валідна техніка для мультиплікації, та і сайт пушка. Божественна і навігація, і дизайн, і контент, і це креативно 😄

Всіх обіймаю, Україна це любов, але ворогам — смерть. Донатьте на ЗСУ, самі вже знаєте куди. Спокійної п'ятниці!

PS: Вигнав з каналу тисячу москалів, буду вдячний якщо запросите своїх колег підписатися 😉

@creative_coder

Доброго ранку, країна незламних! 🇺🇦

Американський піхотинець

https://www.youtube.com/watch?v=05Hlpvq9bw4

Рекомендую подивитися і влаштувати дискусію в коментарях. Бо там дійсно є про що подискутувати. Зараз саме час закладати основи майбутнього нашої держави, а держава вона ж в головах 😉

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

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

https://gleec.com/

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

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

#reference

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

https://www.artisansdidees.com/en

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

#reference

Крутий навчальний контент по WebGL від @Konstantin84UKR

https://www.youtube.com/channel/UCdD1kIGUO5m5C31eXLwY30w/playlists

Є окремі плейлісти по WebGL, glsl, WebGPU і навіть плейліст по рейтрейсингу. Він доступно і з іллюстраціями пояснює різні концепції і методи роботи з GPU графікою в вебі, і ці туторіали можуть слугувати чудовим фундаментом для подальшої роботи з студіями рівня Immersive Garden наприклад :)

Звісно, компаніям потрібні швидкі результати з використанням готових бібліотек, але без бази і чіткого розуміння як воно все робе прогресувати до небес буде складно. Тому рекомендую😉

#tutorial

Сьогодні виповнюється 31 рік  незалежності України. І ще сьогодні виповнилося півроку як друга армія у світі бере Київ за 3 дні. Вперше за 300 років Україна це не якась там провінція московії, Україна це там де дають пизди. І це чудово 💙💛

Зі святом, любі українці та україночки! Допомагайте ЗСУ, бо ми ще не перемогли. Потім нам ще боротись за верховенство права :)

😍 https://www.shadertoy.com/view/7lVczm by @for_ij

Дуже сильна робота від Ярмака. Обов‘язково послухайте та лайкніть.

https://youtu.be/wtuVa-mOknA

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

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

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

#reference

Сьогодні відзначаємо 50к+ забитого скота 🎉🎉🎉🎉🎉🔥🔥🔥🥰
Здаровья пагібшим!