Как создавать собственные шейдеры, используя THREE.ShaderLib

Question

Я пытался изучить шейдерные материалы THREEJS. До сих пор я понимаю, как униформы, vertexShader и фрагмент Shader играют роль в проектировании и раскрашивании вершин и фрагментов в мире glsl и webgl. Я пытался найти несколько хороших примеров, где ShaderMaterial из THREEJS расширяется с помощью THREE.ShaderLib.

Предположим, я хочу расширить стандартный материал Threejs (THREE.ShaderLib['standard']), чтобы написать текстуру envmap, возможно ли это? Или это абсолютно необходимо, чтобы я все писал с нуля?

Answer 1

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

На высшем уровне есть абстракция в виде THREE.Material, Где вы описываете абстрактные свойства и три настраивает шейдер под капотом.

//no shaders involved
var redPlastic = new THREE.MeshStandardMaterial({
   color: 'red',
   roughness: notVeryRough
}) 

ShaderMaterial ожидает, что вы напишите сырой GLSL, но все еще включает в себя некоторые вещи, которые в противном случае вам пришлось бы делать вручную. Так что "писать с нуля" не совсем правильно. С RawShaderMaterial Вы бы написали все с нуля. THREE.ShaderMaterial:

varying vec2 vUv;
void main(){
  vUv = uv; // <- magic! where does uv come from?
  vec4 worldPosition = modelMatrix * vec4( position, 1.); // <- more magic! where do modelMatrix and position come from?
  gl_Position = projectionMatrix * viewMatrix * worldPosition; // more!
}

Во время выполнения, когда три компилируются и включаются в страницу, пространство имен THREE имеет THREE.ShaderChunk толковый словарь. Это различные именованные фрагменты GLSL, из которых построены все материалы.

Вы можете скопировать эти фрагменты из их исходных файлов и вставить их в свой собственный файл шейдера или строку.

Вы можете написать это с помощью строкового шаблона:

`${THREE.ShaderChunk.some_chunk}
 void main(){
 ...
 ${anotherChunk}
 gl_Position = ...
`

Но если вы хотите расширить встроенные материалы, есть (IMHO глючная и вонючая:)) особенность материала под названием onBeforeCompile, При этом вы передаете обратный вызов любому из встроенных материалов и получаете объект шейдера перед компиляцией. Здесь вы можете ввести свой собственный glsl, обменять чанки или что-либо еще, что вы можете сделать со строкой.

Чтобы использовать это, необходимо знать структуру шейдеров, созданных из: https://github.com/mrdoob/three.js/tree/dev/src/renderers/shaders/ShaderChunk