Подтвердить что ты не робот

Tr.js внешнее свечение для сферического объекта?

Я строю какую-то планетную систему в three.js, и я потратил пару часов на поиск достойного решения, чтобы получить внешнее свечение на одной планете - сферический объект с текстурой.

Я наткнулся на этот пример http://stemkoski.github.io/Three.js/Selective-Glow.html, который делает трюк, но дело в том, что эта форма свечения также влияет на основную 3D-объект, что приводит к изменению цвета (см. Там).

Еще один приятный пример свечения можно найти здесь http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html, но опять же он светит всю область, а не только "внешнюю" вещь.

Я читал дискуссионную тему о свойстве overrideMaterial на GitHub, но это кажется экспериментальным, неиспользуемым и недокументированным... даже не уверен, что это может решить мою проблему.

Поделитесь своими идеями, спасибо!

4b9b3361

ОТВЕТЫ

Ответ 1

Я немного поработал над тем, чтобы отделить часть кода WebGL Globe (связанного с выше), которая производит атмосферный эффект. Предварительная рабочая версия находится здесь:

http://stemkoski.github.io/Three.js/Atmosphere.html

Насколько мне известно, в исходном коде есть несколько интересных вещей для создания атмосферного эффекта. Во-первых, светящаяся текстура помещается в другую сферу - позвольте назвать ее сферой Атмо:) - которая окружает сферу с изображением земли на ней. Материал Атмосферы перевернут так, что передняя сторона не отдает, только заднюю сторону, таким образом, она не заслоняет земную сферу, даже если она окружает ее. Во-вторых, эффект градиентного освещения достигается за счет использования фрагментарного шейдера, а не текстуры. Однако, если вы увеличиваете и уменьшаете масштаб, атмосфера изменит внешний вид; это не было очевидным в эксперименте WebGL Globe, поскольку масштабирование было отключено.

[обновлено 30 апреля]

Далее, аналогично исходному коду из

http://stemkoski.github.io/Three.js/Selective-Glow.html

шар с текстурой градиентного освещения (и другой сферой с черной текстурой) помещается во вторую сцену, а затем результаты с этой сцены складываются с исходной сценой с использованием добавочного блендера. И чтобы вы могли экспериментировать с параметрами, используемыми для создания эффекта свечения, я включил пару слайдеров, чтобы вы могли изменить значения и увидеть различные эффекты свечения, которые приводят к результату.

Надеюсь, это поможет вам начать работу. Удачи!

[обновлено 11 июня]

У меня есть новый пример, который обеспечивает такой же эффект в намного более просто, вместо использования пост-обработки и аддитивного смешивания двух сцен, я просто изменил некоторые параметры в настраиваемом материале. (Это кажется очевидным в ретроспективе.) Для обновленного примера проверьте:

http://stemkoski.github.io/Three.js/Shader-Halo.html

Все еще не выяснили проблемы с панорамированием/масштабированием.

[Обновлено 24 июля]

Я выяснил проблемы с панорамированием/увеличением. Для этого требуется использование шейдера; см. связанный с этим вопрос Three.js - шейдерный код для эффекта ореола, нормали нуждаются в трансформации, а для окончательного рабочего примера см.:

http://stemkoski.github.io/Three.js/Shader-Glow.html.

Я доволен окончательным результатом, поэтому я больше не буду обновлять этот ответ:)

Ответ 2

В примере, на который вы ссылаетесь, я использовал синее свечение с добавлением смешивания - если бы вы использовали белый цвет, а, возможно, это создало бы эффект, который вы хотите.