Трижды: сделайте обычай шейдера совпадающим стандартным рендерингом

Question

По соображениям производительности мне нужно отобразить сотни движущихся тетраэдров в сцене. Там я использую instancedbuffergeometry, которая требует пользовательского шейдера.

Сцена также содержит объекты с правильной геометрией (без буфера) и некоторые огни (я подготовил откинутый сниппет: https://jsfiddle.net/negan/xs3k1yz4/).

Моя проблема заключается в том, что тетраэдры не затенены так, что их освещение правдоподобно подходит для остальной части сцены. Причина, вероятно, примитивный шейдер я построил:

<script id="vertexShader" type="x-shader/x-vertex"> 
 
attribute vec3 offset; 
 
attribute vec4 color; 
 
varying vec4 vColor; 
 
varying vec3 vNormal; 
 
void main() { 
 
\t vColor = color; 
 
\t vNormal = normalMatrix * vec3(normal); 
 
\t gl_Position = projectionMatrix * 
 
\t \t \t \t modelViewMatrix * 
 
\t \t \t \t vec4(position*1.0+offset,1.0); 
 
} 
 
</script> 
 
<script id="fragmentShader" type="x-shader/x-fragment"> 
 
\t varying vec4 vColor; 
 
    varying vec3 vNormal; 
 

 
\t void main() { 
 
\t \t float di = 0.4*dot(vNormal,normalize(vec3(1.,1.,0.)))+0.4*dot(vNormal,normalize(vec3(1.,0.,1.))); 
 
\t \t di = di+0.2; 
 
\t \t vec4 vColor2= vColor*vec4(1.0,1.,1.,0.2)*di; 
 
\t \t gl_FragColor = vColor2;// adjust the alpha 
 
\t } 
 
</script>

Есть ли способ, чтобы сделать заказ шейдер подходят огни я, определенные в сцене? Шейдер также отображает лица таким образом, что не создает впечатление направленного света. Я бы предпочел, чтобы отдельные лица горели ровно, а цвет был интерполирован из вершин, но я не смог этого добиться.

Любые указатели или помощь приветствуются.

Answer 1

Here's a gist of the full fragment and vertex shader source для трехэлементного шейдера MeshPhongMaterial, начиная с r83.

Three.js строит шейдеры, используя систему конкатенации строк, поэтому выяснение источника шейдера от взгляда на источник Three.js будет практически невозможным.

выше Gist был создан путем установки shader editor Chrome extension, идя на пример страницы three.js, которая имеет MeshPhongMaterial like this one и с помощью редактора шейдера, чтобы проверить полный источник работающей программы шейдера:

Three.js передает все стандартные униформы, такие как данные освещения, во все шейдерные программы, поэтому, если вы создадите пользовательский шейдер с указанным выше кодом Gist, огни, кости и т. Д., Все будет работать автоматически.

Я бы полный исходный код и добавить логику вручную, буквально добавляя результат ваших расчетов к существующим gl_FragColor = ...

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