ThreeJS-使用自定义顶点着色器扩展Lambert着色器 [英] ThreeJS - Extend Lambert Shader with Custom VertexShader

问题描述

我要在此处调整此着色器： 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着色器，它可以随着时间的推移上下操纵顶点，以模拟低多边形水面。

推荐答案

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

1. 使用Lambert、Phong、Standard或您喜欢的任何照明材质渲染模型。
2. 创建另一个Scene、Camera和一个WebGLRenderTarget，创建一个平面并对其应用ShaderMaterial。放置相机，使平面正好适合场景的整个帧。
3. 将另一个Scene渲染到WebGlRenderTarget，并以此方式将其作为贴图应用于原始Lambert材质：

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

维奥拉！现在，您可以随心所欲地拥有一个完全发光的ShaderMaterial。

这篇关于ThreeJS-使用自定义顶点着色器扩展Lambert着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！