Как создавался https://fiomet.com/

По мне это очень крутой кейс и статья раскрывает достаточно подробностей.
Рекомендую прочитать:

https://medium.com/active-theory/fiomet-case-study-9a0180268423

#article #reference

Metalab пошарили case study своей работы над Pitch (сюрприз, я думал, что дизайн продукта собирали внутри команды стартапа).

https://www.metalab.co/projects/pitch

Стилизация под ASCII рендеринг и ретровейв.

https://jmswrnr.com/

#reference

Много крутых демок.

https://yiwenl.github.io/Sketches/

#reference

Как делаются те самые невозможные объекты.

https://www.shadertoy.com/view/WslyzX от https://twitter.com/lunasorcery

Чтобы они разъединились после объявления uv добавляем

uv.x = sign(uv.x)*(abs(uv.x) - sin(iTime) * .1 - .1);

#reference

Рендеринг текста любого размера без пикселизации при помощи MSDF:

https://medium.com/@calebfaith/implementing-msdf-font-in-opengl-ea09a9ab7e00

#tutorial

Shadertoy для масок и лицевых фильтров.

https://shaderbooth.com/

На видео – https://shaderbooth.com/?85daa

#reference

Эффектная работа с абберациями

https://dribbble.com/shots/10863312-Insidemind-Mobile-Screens

#inspiration

Вау симуляции дыма, частиц и прочего. В WebGL такое нам не светит конечно же 😭

https://vimeo.com/396455188

#inspiration

Просто и эффектно

https://twitter.com/romanus_march/status/1244214360156880899

#reference

Это просто must see.

Найс техника размытия в 10 проходов ренедерера. И отличное внимание к мелочам в целом.

https://fwa100.jam3.com/

#reference

Не ожидал такого стопроцентного фидбека, спасибо всем кто принял участие в голосовании! Да, "интересно разбираться самостоятельно" это тоже положительный ответ 😉

Сегодня разберу вот эту анимацию:
https://dribbble.com/shots/10879124-Morphing-Geometry

Есть 4 варианта как это сделать, я распишу самый производительный и неточный. Буду использовать терминологию ThreeJS. Решения чисто из головы, могут быть ошибки, на них можно указать мне в чате @creativecoders или обсудить в сообщетсве @webgl_ru 😊

Работа с геометрией

Куб превращается в сферу и наоборот начиная с рёбер, по сути bevel фильтр. Чтобы это реализовать, нужно создать геометрию куба и для каждой вершины посчитать её расстояние до центра грани в диапазоне 0..1. Запишу это как атрибут геометрии float faceDistance.
Для морфинга нужна uniform переменная float morphPower в диапазоне 0..1, где 0 – куб, 1 – сфера. В вершинном шейдере перенормирую линейный морфинг в

float bevelPower = clamp((morphPower + faceDistance - 1.) / faceDistance, 0., 1.);

Теперь я могу интерполировать положение вершины между кубом и сферой

vec3 pos = mix(position, normalize(position), bevelPower);

Создам 2 таких куба – внешний и внутренний. Размерами и поворотами проще манипулировать из JS при помощи scale и rotation.

Внутренний кубошар

Прозрачный материал, который просто выводит envMap. Для аббераций (цветные разводы) берётся значение какого-то канала со сдвигом, например

vec4 color = texture2D(tMap, uv);
color.r = texture2D(tMap, uv + shift).r;
color.g = texture2D(tMap, uv - shift).g;

C shift нужно будет поэкспериментировать чтобы сделать абберации как в референсе. Вычислять его из uv нельзя, потому что изначально у меня геометрия куба. Хотя почему бы и нет, креативные эффекты должны быть креативными)
Ну и чтение текстуры конкретно из cubeMap я не помню, нужно посмотреть в примерах.
Сам кубошар отрендерю в текстуру.

Внешний кубошар

Вот тут уже всё гораздо сложнее. Буду использовать path tracing для отражений.

Чтобы получить отражения вычислю нормаль, она морфится так же как и позиция.

vec3 morphedNormal = mix(normal, normalize(position), bevelPower);

Чтобы перевести её в пространство мира, использую такой костыль

vec4 worldPosition = modelMatrix * vec4(pos, 1.);
vec3 worldNormal = (modelMatrix * vec4(pos + morphedNormal, 1.) - worldPosition).xyz;

Если кто-то знает, как это сделать красивее – пишите.

Теперь я могу получить преломлённый вектор используя коэффициент преломления float refractionPower:

vec3 ray = normalize(worldPosition - cameraPosition) - worldNormal * refractionPower;
ray = normalize(ray);

И найдя пересечение прямой заданной worldPosition и ray с плоскостью заданной cameraPosition и vec3(0.), я получу uv координаты для отрисовки внутреннего кубошара на внешнем. Как именно не помню точно, но это гуглится. Если поставить камеру на ось z, xy координаты пересечения будут сдвинутым uv координатами тексуры отрисованной ранее:

vec3 planeHit = worldPosition.xyz + ray * dot(cameraPosition, -worldPosition.xyz) / dot(cameraPosition, ray);
vec4 screenSpaceReflection = projectionMatrix * viewMatrix * vec4(planeHit, 1.);
vec2 uv = screenSpaceReflection.xy / screenSpaceReflection.w;

После чего цвет смешивается с отражением из envMap и сцена готова 😊

Остальные решения:
2. Вместо path tracing отражения отрендерить каждую грань внешней кубосферы в текстуру перенормируя viewMatrix (очень сложно, задача для гениев аналитической геометрии)
3. Ray marching внутри внешней кубосферы
4. Ray marching всей сцены

Как вам? Стоит ли делать проще / сложнее, подробнее, и т.д.?

#my #tutorial #inspiration

Красивый UI. Интересно как бы такое смотрелось в контексте декстоп версии сайта.

https://www.instagram.com/p/B-RzjwjgyTO/

Как сделать – ничего необычного за рамками обычного строения 3D сцены.
Мягкие тени можно посмотреть тут https://threejs.org/examples/?q=shadow#webgl_shadow_contact
Тень на поворачивающейся перпендикулярно грани можно легко сделать в шейдере типа 1. - dot(normal, cameraPosition - modelViewPosition)

#inspiration

Очень много полезных функций и утилит, glsl.

http://stack.gl/packages/

#tool

https://www.curtainsjs.com/ — небольшая библиотека, позволяющая быстро обрабатывать DOM элементы при помощи шейдеров. При этом она автоматически позиционирует их где нужно, давая адаптивность из коробки. Искривляющиеся картинки при скролле и анаглифные эффекты это сюда 💪

Пример на видео:
https://codepen.io/martinlaxenaire/full/OJVKVYa от https://twitter.com/webdesign_ml

#tool

Просто прикольно 😊

https://www.salvatorecasalino.it/interactive-resume/

#reference

Коллекция интерфейсов различных игр. Отличный источник вдохновения, особенно для 3D сайтов.

https://interfaceingame.com/

#reference

Очень крутая коллекция. Чтобы понять как это работает идём на https://threejs.org/examples/?q=matcap#webgl_materials_matcap и кидаем картиночки на бюст

За наводку спасибо @munrocket

#tool