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

Самый надёжный и очевидный вариант предложил @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