Как вы «комбинируете» ShaderMaterial и LambertMaterial? - PullRequest
Новая
       56

Как вы «комбинируете» ShaderMaterial и LambertMaterial?

2 голосов
/ 13 марта 2019

Во-первых, большое спасибо за эту замечательную работу и сообщество.

Я пытаюсь написать простой водный материал в стиле низкого поли.

Я знаю, что есть разные способы написания этогои я хотел бы как можно больше сделать это в js-скрипте (я из C # dev ', и я пока не очень удобен с frontend).

Единственный способ, который я могу понять после нескольких часов компиляции информации в Сети, это: 

var waterVertexShader =  
                "attribute float vertexDisplacement;" +
                "uniform float time;" +
                "varying vec3 vUv;" +
                "void main() {" +
                "   vUv = position;" +
                "   vUv.y += sin(time) * 0.01;" +
                "   gl_Position = projectionMatrix * modelViewMatrix * vec4(vUv, 1.0);"+     
                "}"
            ;

            var waterFragmentShader =

                "void main() {" +
                "gl_FragColor = vec4(0.65, 0.88, 1, 1);" +
                "}";


                },
                flatShading : true,
                vertexShader: waterVertexShader,

Это дает мне начало желаемого поведения, но это не моя проблема.

Теперь, если я хочу наследовать, скажем, свойства материала Ламберта или Фонга, каков правильный путь для продолжения?

Звучит очень просто, но это единственная релевантная ссылка, которую я нашел: ThreeJS - Расширьте Lambert Shader с помощью пользовательского VertexShader и ответа нет.

Спасибо за внимание.

1 Ответ

4 голосов
/ 13 марта 2019

Существует несколько способов улучшить встроенный материал в three.js:

  • Вы можете использовать обратный вызов Material.onBeforeCompile () .Этот подход демонстрируется в следующем примере .Если вы хотите добавить незначительные улучшения в код шейдера, это будет ваш первый выбор.
  • Создайте пользовательский материал с RawShaderMaterial или ShaderMaterial с нуля и повторно используйте существующие фрагменты шейдера из библиотеки.Этот подход очень гибок, но требует хороших знаний о внутренностях материальной системы three.js.
  • Конечно, вы можете модифицировать / обезьянить патч для существующих блоков шейдеров, но этот подход в целом рекомендуется (выэффективно изменить код библиотеки со всеми вытекающими последствиями).
  • Другой подход заключается в использовании многообещающего, но экспериментального NodeMaterial.Однако этот метод не документирован и не является частью ядра до сих пор.Есть несколько примеров, которые демонстрируют использование как это one .
...