Реализовать свет и тени в ShaderMaterial в Three.js r136

Question

Какое текущее решение в r136 для смешивания света , теней и цвета в ShaderMaterial ? Я уже нашел решение для поддержки тумана.
Я нашел несколько примеров в предыдущей версии (r108), таких как codeandbox.

Собственно, я ищу такой результат: codeandbox.
Должен ли я копировать шейдеры MeshPhongMaterial в качестве базы кода для своих собственных шейдеров?

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

Любая идея или пример?
Спасибо !

Answer 1

Этот вопрос огромен, и на него нет однозначного ответа. Создание света, теней и цвета варьируется от материала к материалу и включает в себя так много элементов, что для изучения потребуется полный курс.

Однако вы можете просмотреть сегменты кода шейдера, используемые Three.js, в этой папке с именем /ShaderChunk. Если вы посмотрите «свет», вы увидите сегменты шейдера (или «фрагменты») для каждого материала, такого как мультяшный, ламберт, физический и т. Д. Для некоторых материалов параметры должны быть определены в начале кода шейдера ( это _parsфайлы), некоторые вычисляются в вершинном шейдере, некоторые во фрагменте, некоторые требуют разделения кода между _begin and _end, так далее:

Тени еще более сложны, потому что для построения карты теней требуется отдельный проход рендеринга. Как я уже сказал, воссоздание собственных источников света, теней и цвета — это огромная задача, и для ее изучения потребуется пройти полный курс. Я надеюсь, что этот ответ, по крайней мере, укажет вам правильное направление.