ThreeJS - 使用自定義 VertexShader 擴展蘭伯特着色器

Question

我想在這里調整這個着色器： https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/到標准 Lambert 或 Phong，它適用於我在場景中的所有燈光。

我當前的 state 是我用這段代碼擴展了 Lambert：

    var attributes = {
    displacement: {
        type: 'f', // a float
        value: [] // an empty array
    }
};

var uniforms = {
    amplitude: {
        type: 'f', // a float
        value: 0
    }
};

var shaders = { mylambert : THREE.ShaderLib[ 'lambert' ] };

var materials = {};

materials.mylambert = function( parameters, myUniforms ) {

    var material = new THREE.ShaderMaterial( {

        vertexShader:  $('#vertexLambert').text(),
        fragmentShader: shaders.mylambert.fragmentShader,
        uniforms: THREE.UniformsUtils.merge( [ shaders.mylambert.uniforms, myUniforms ] ),
        attributes :attributes,
        lights:true,
        shading:THREE.FlatShading

    } );

    material.setValues( parameters );

    return material;

};

var myProperties = {
    lights: true,
    fog: true,
    transparent: true
};

var myMaterial = new materials.mylambert( myProperties, uniforms );

我從這篇文章中得到的： 擴展蘭伯特材料，不透明度不起作用

vertexShader 基本上是 shaders.mylambert.vertexShader 的形狀，但頂部有來自着色器示例的附加代碼。

它以某種方式工作，所以頂點移動，但是當它們改變形狀時面沒有陰影，所以當我使用平面作為網格時它們總是具有相同的着色器。

簡而言之; 我需要一個 Lambert/Phong 着色器，它隨着時間的推移上下操縱頂點以模擬低 Poly 水表面。

Answer 1

如果這仍然相關，您可以更簡單地解決此問題：

1. 讓您的 model 使用 Lambert、Phong、Standard 或您喜歡的任何光照材料進行渲染。
2. 創建另一個Scene 、 Camera和一個WebGLRenderTarget ，創建一個平面並將您的 ShaderMaterial 應用於它。 Position 你的相機讓飛機正好適合你的場景的整個畫面。
3. 將另一個Scene渲染到WebGlRenderTarget並將其作為 map 以這種方式應用於您的原始 Lambert 材質：

    let mat = new THREE.MeshLambertMaterial({
        map: renderTarget.texture
    })

中提琴。 您現在已經有了一個完全照亮的 ShaderMaterial。