Как я могу изменить фрагмент шейдера в реальном времени в three.js?

Question

Я сделал очевидное, но это не работает:

myshader.fragmentShader = myfragmentshader; //string

Answer 1

Как указано в документации :

Встроенные атрибуты и униформы передаются шейдерам вместе с вашим кодом.Если вы не хотите, чтобы WebGLProgram добавлял что-либо в ваш код шейдера, вы можете использовать RawShaderMaterial вместо этого класса.Вы можете использовать директиву #pragma unroll_loop, чтобы развернуть цикл for в GLSL препроцессором шейдера.Директива должна быть расположена прямо над циклом.Форматирование цикла должно соответствовать определенному стандарту

Процедуру для three.js можно найти в документации RawShaderMaterial.

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

var material = new THREE.RawShaderMaterial( {

    uniforms: {
        time: { value: 1.0 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

} );

Во время выполнения просто настройте материал в классическом простом стиле three.js:

  object3d.material = raw_mat;