Я использую изображение в элементе canvas как текстуру в Three.js, выполняя манипуляции с изображениями на холсте с помощью JavaScript, а затем вызываю requireUpdate() на текстуре. Это работает, но это довольно медленно.
Я бы хотел выполнить вычисления изображений в шейдере фрагмента. Я нашел много примеров, которые почти делают это:
-
Шейдерные материалы: http://mrdoob.github.io/three.js/examples/webgl_shader2.html В этом примере показаны манипуляции с изображениями, выполняемые в шейдере фрагментов, но этот шейдер функционирует как фрагментарный шейдер всего материала. Я только хочу использовать шейдер на текстуре, а затем использовать текстуру как компонент второго материала.
-
Рендеринг текстуры: https://threejsdoc.appspot.com/doc/three.js/examples/webgl_rtt.html Это показывает рендеринг всей сцены в WebGLRenderTarget и используя это как текстуру в материале. Я хочу только предварительно обработать изображение, а не отображать всю сцену.
-
Композитор эффектов: http://www.airtightinteractive.com/demos/js/shaders/preview/ Это показывает применение шейдеров в качестве постпроцесса для целая сцена.
Изменить: Здесь еще один:
- Отдать в другую сцену: http://relicweb.com/webgl/rt.html В этом примере ссылка на Three.js Извлечение данных из WebGLRenderTarget (water sim), использует вторую сцену с собственной орфографической камерой для рендеринга динамической текстуры в WebGLRenderTarget, которая затем используется как текстура в основной сцене. Я предполагаю, что это особый случай первого примера "отнести к текстуре", приведенного выше, и, вероятно, будет работать для меня, но кажется сложным.
Как я понимаю, в идеале я мог бы создать новый объект framebuffer со своим собственным шейдером фрагментов, сделать его сам по себе и использовать его вывод как однородную текстуру для другого шейдера фрагмента материала. Возможно ли это?
Изменить 2: Похоже, я мог бы спросить что-то похожее на это: Shader Materials и GL Framebuffers в THREE.js. хотя вопрос, похоже, не был разрешен.