TGViewer
Channel Public Channel
Creative Coder

Creative Coder

@creative_coder

Креативна розробка вебу з ароматом смаженої москальні. Передовий край веб технологій та дизайн ідей, поки є електрика :)

@dre1337
Open in Telegram
Subscribers
416
Photos
201
Videos
146
Links
365

Showing posts older than #79 · Back to latest

Older Posts 20 shown
Post #72 481
Эх, уметь бы реймарчить такие облака...

#inspiration
Post #71 648
Вдогонку пример использования и репозиторий с огромным количеством подобных материалов

https://github.com/nidorx/matcaps
Post #68 459
Коллекция интерфейсов различных игр. Отличный источник вдохновения, особенно для 3D сайтов.

https://interfaceingame.com/

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

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

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

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

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

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

Сегодня разберу вот эту анимацию:
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
Post #58 542
Это просто must see.

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

https://fwa100.jam3.com/

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

https://vimeo.com/396455188

#inspiration
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →