我們可以將自定義着色器動態應用到three.js對象嗎

我有一個帶有VideoTexture的MeshBasicMaterial。我可以將自定義着色器動態應用於材質嗎？我能夠使用THREE.EffectComposer將着色器應用於整個場景，但是如果我想將自定義濾鏡應用於場景中的特定元素，該怎麼辦？我想測試簡單的過濾器，如棕褐色，色相飽和度。此外，我必須能夠在不重新加載項目的情況下在兩者之間切換。我們可以將自定義着色器動態應用到three.js對象嗎

我沒有使用諸如seriously.js或glfx.js之類的js庫，因爲它可能會在稍後的階段導致出現問題，因爲我將使用不包含canvas/img/video的three.js對象作爲映射。

videoTexture = new THREE.VideoTexture(video); 
videoTexture.minFilter = THREE.LinearFilter; 
videoTexture.magFilter = THREE.LinearFilter; 
material = new THREE.MeshBasicMaterial({ 
    map: videoTexture, 
    side: THREE.DoubleSide, 
    transparent: true, 
    depthTest: false, 
    depthWrite: false 
}); 

composer = new THREE.EffectComposer(renderer); 
composer.addPass(new THREE.RenderPass(scene, camera)); 
var effect = new THREE.ShaderPass(THREE.SepiaShader); 
effect.renderToScreen = true; 
composer.addPass(effect); 
composer.render();

編輯1：過濾器的CSS（https://developer.mozilla.org/en-US/docs/Web/CSS/filter）將不會工作，要麼因爲它僅改變視覺媒體，因此儘管它可以操縱最終畫布它不能操縱內部對象的紋理。

來源

2017-06-07 Amritesh Anand

THREE.EffectComposer有一個.reset函數，您可以使用它來擦除它，然後添加所需的新過濾器。因此，只需將要循環訪問的不同過濾器加載到數組中，然後重置並添加數組中的過程。

編輯我以爲你在談論改變作曲家的着色器。要更改對象上的着色器，可以使用不同着色器創建多個着色器材質，但引用相同的紋理，並將對象上的材質交換出來。因此，您可以編寫着色器，將紋理顏色空間重新解釋爲棕褐色，將紋理顏色空間重新解釋爲白色，或者使用r，g或b調整色調和飽和度。

然後，您即時交換多種材料。這些效果是基本的glsl，但是如果您在編寫着色器時遇到困難，只需發佈具有特定問題的另一個線程即可。如果你是新手，我強烈建議the book of shaders.這是一個關於glsl的優秀，快速，互動的速成課程。

但是，您的問題的解決方案是創建多個着色材料，或創建一個着色器材質，完成一切，然後使用制服在不同效果之間啓用/ lerp。

來源

2017-06-07 09:06:18 OtterFamily

我想將紋理過濾器應用到場景中的特定對象而不是完整的場景。 –

你能否提供交換材料的小提琴示例。當我將ShaderMaterial指定給我的網格時，它不顯示？ –

你看過面具通行證嗎？從來沒有使用它只是知道它在那裏。否則可能值得研究模板緩衝區。 – pailhead

我們可以將自定義着色器動態應用到three.js對象嗎

回答

相關問題