Пользовательский шейдер Three.js не отображается - PullRequest
Новая
       25

Пользовательский шейдер Three.js не отображается

0 голосов
/ 08 марта 2019

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

Вот кодовый блок: https://codepen.io/LDB95/pen/MxmWNq

Это мои формы: 

uniforms: {
tDiffuse: { value: null },
time: { type: "f", value: 1.0 },
resolution: { type: "v2", value: new THREE.Vector2() },
iChannel0: { type: 't', value: new THREE.TextureLoader().load('https://naqyr37xcg93tizq734pqsx1-wpengine.netdna-ssl.com/wp-content/uploads/2017/11/10-Things-We-Can-Learn-From-the-Incredible-Steve-Jobs.jpg')},
iChannel1: { type: 't', value: new THREE.TextureLoader().load('https://gobelmont.ca/Portals/0/xBlog/uploads/2018/8/30/white%20noise.jpg')},

},

Я просто не могу найти решение.Было бы действительно здорово, если бы кто-то мог помочь мне здесь:)

Спасибо!

1 Ответ

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

Боюсь, ваш кодекс полон ошибок.Кажется, вы пытаетесь перенести шейдер с шадертой на three.js, верно?

Я удалил все ошибки здесь, но эффект все еще выглядит неработоспособным: https://codepen.io/anon/pen/XGRVew

В любом случае, вотнесколько вещей, которые нужно иметь в виду:

  • Вы должны назначить текстуры униформе после , когда вы создали проход шейдера.Униформа клонируется для внутреннего материала ShaderPass.Это означает, что текстуры тоже клонированы.Соответствующий флаг needsUpdate установлен неправильно, если вы загружаете текстуру перед созданием материала.
  • Как уже упоминалось @Marquizzo, ваша текстура заблокирована по соображениям безопасности.Я добавил несколько текстур из репозитория three.js для тестовых целей.

  • Следующая строка кода не обязательна, поскольку в геометрии указаны координаты ультрафиолета.Нет необходимости вычислять их на лету, как это делает шадертой.Просто используйте переменную vUv в фрагментном шейдере. 

    vec2 uv = gl_FragCoord.xy / resolution.xy;

  • Для таких простых однопроходных шейдеров нет необходимости использовать EffectComposer.Попробуйте использовать подход, подобный этому официальному примеру .

  • Вы всегда должны убедиться, что файлы примеров, такие как ShaderPass или EffectComposer, соответствуют версии three.js вваш код.Я изменил это в коде ручки, чтобы удалить все предупреждения об устаревании.
...