ThreeJS - 使用自定义 VertexShader 扩展 Lambert 着色器答案

【问题标题】：ThreeJS - Extend Lambert Shader with Custom VertexShaderThreeJS - 使用自定义 VertexShader 扩展 Lambert 着色器
【发布时间】：2015-09-27 08:35:55
【问题描述】：

我想在这里调整这个 Shader： https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/ 到一个标准的 Lambert 或 Phong，它适用于我在场景中的所有灯光。

我目前的状态是使用以下代码扩展 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 );

我从这篇文章中得到的： extending lambert material, opacity not working

vertexShader 基本上是shaders.mylambert.vertexShader 的形状，但上面有来自着色器示例的附加代码。

它以某种方式工作，所以顶点移动，但是当它们改变形状时面没有着色，所以当我使用平面作为网格时，它们总是具有相同的着色器。

简而言之；我需要一个 Lambert/Phong 着色器，它可以随着时间的推移上下操纵顶点来模拟低多边形水面。

【问题讨论】：

所以你想在three.js中加入水？你见过this
这太复杂了。我们想要一个低多边形表面，它的顶点只是上下“摆动”一点:)

标签： three.js shader

【解决方案1】：

如果这仍然相关，您可以更简单地解决此问题：

让您的模型使用 Lambert、Phong、Standard 或任何您喜欢的光照材质进行渲染。
创建另一个Scene、Camera 和WebGLRenderTarget，创建一个平面并将您的ShaderMaterial 应用到它上面。定位您的相机，使平面完全适合您的整个场景框架。
将另一个 Scene 渲染到 WebGlRenderTarget 并将其作为贴图应用到您的原始 Lambert 材质：

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

维奥拉！您现在可以随意拥有一个完全点亮的 ShaderMaterial。

【讨论】：