Fun fact. Если скормить рендереру MSDF текста неправильный конфиг, выходит непонятно что но красивенько :) Пользы правда от этого ноль 🤷‍♂️

Ну и раз речь зашла о рисовании текста в WebGL — предлагаю почитать статью Techniques for Rendering Text with WebGL. Внутри 5 техник вывода текста с примерами и описанием их достоинств и недостатков. Хотя выбор в основном сводится либо к первому методу, либо к последнему.

После прочтения предыдущей статьи можно дополнительно ознакомиться с Kinetic Typography with Three.js. Теперь у вас будет возможность вдохнуть жизнь в любую, даже самую загрустившую надпись 😉

Ну а дальше огромный простор для творчества, достаточно поискать на ютубе kinetic typography. Пусть даже это всё вроде и вышло из трендов, знания и умения — сила :)

#tutorial

А вот список ещё покруче 😉

https://github.com/jasonwebb/morphogenesis-resources

#reference #tutorial #article

У нас очень кайфовое сообщество, вариантов накидали массу 😊

Самый надёжный и очевидный вариант предложил @vovazhuruk — использовать секвенции пререндеренных картинок
Плюсы: просто, красиво, апрувнуто Юрой Артюхом :D
Минусы: загрузка картинок, минимальный интерактив, для изменений нужно всё перерендеривать

Вместо секвенции можно использовать видео, о чём когда-то в нашем чате писал @dergachevm. Он предложил крутое решение проблемы с лагами при перемотке видео в обратную сторону
В теории оно хорошо уменьшает объём загружаемых данных и меньше кушает память браузера

@NobodyRoo предложил сделать cubemaps для кристалла и внутренних отражений, и отдельно запечь в текстурки внутренние грани. Не очень понял как это точно должно работать, но логика есть и по идее должно смотреться хорошо
Плюсы: не сложно, красиво, производительно
Минусы: не точная физическая отрисовка, может ничего не получиться

@karpik предложил использовать дары природы и почитать туториал с кодропс
Плюсы: готовое решение, не сложно, интерактивно, легко обновлять мэш
Минусы: не учитывается путь луча внутри кристалла, нет внутренних отражений, не вау

В соседнем посте в том же канале есть офигенное решение
Рефракции происходят в экранном пространстве, с учётом глубины, для повышения точности используется реймарчинг. Сходу сложно понять как это устроено, может когда-то разберусь
Плюсы: красиво, интерактивно, легко обновлять мэш, можно анимировать как хочешь
Минусы: сложно, тормозит, какой будет результат на кристаллах не понятно

Есть ещё такая вот работа и вроде должно получаться с аппроксимациями, но публичной реализации я не видел
https://www.researchgate.net/publication/220506766_Approximate_Ray-Tracing_on_the_GPU_with_Distance_Impostors
Может на самом деле это и сделано в предыдущем варианте, надо разбираться

@Xander_nome предложил использовать Пекс, хотя изначально такой способ реализовали Lusion на трёхе
По сути это развитие того что было на codrops
Плюсы: можно менять свойства материала, вроде учитывает глубину (но это не точно), интерактивно, производительно, красиво
Минусы: нет внутренних отражений, для кристаллов не пойдёт

И конечно же мой вариант — взять и порейтрейсить всё. Пост я скинул в отложенные вечером, а ночью попробовал. Сам кристалл рейтрейсить довольно просто и быстро, но вот с материалами, окружением и тенями пока беда. Но обкладываться костылями я мастер, так что это ещё не финал 😉
Плюсы: красиво, интерактивно, полная свобода
Минусы: дьявольская сложность, долгая компиляция шейдера, только лоу поли мэши, может тормозить (ещё не ясно, тут как выйдет)

Ну и @maksim_zov предложил сделать это на WebGL, за что ему спасибо :D Он крутой дизайнер если что

Кто не знал, для подобных обсуждений есть чат @creativecoders, вступайте 😊

#reference #tutorial

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

Ещё не смотрел, но с виду он рассказывает как я делаю эти свои демки :)

Update: он использует реймарчинг вместо рейтрейсинга, что не даёт ему возможности переотражать лучи больше пары раз без превращения в слайдшоу. С рейтрейсингом правда другая проблема — время компиляции шейдера растёт экспоненциально с каждым новым отражением 🤷‍♂️

А остальное всё то же самое, refract + reflect и готово 😉

Во второй части наверняка будет изменять IOR для каждого канала для анаглифа и форму изменит на тессеракт (вроде это он вначале)

В общем, годно, рекомендую к просмотру :)

А вот и вторая часть
https://www.youtube.com/watch?v=0RWaR7zApEo

#tutorial

Новое видео Юры Артюха

Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.

dat.gui на максималках. Я два года ждал такую либу :)

#tutorial #tool

Недільний стрім від Юри Артюха #tutorial

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

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

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

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

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

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

#tutorial