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