如何在三个js中在自定义着色器上创建具有镜面反射贴图的镜面反射

Question

我正在WebGL中使用Three.JS创建一个地球，到目前为止，我已经拥有了一个具有昼夜纹理和氛围的地球。现在，为了完成它，我想为我的地球添加一个只在水部分显示的镜面反射。现在，我已经有了一个镜面反射贴图，但我似乎无法将其全部拼在一起。

由于地球/夜晚/大气层的原因，我在自定义着色器中做所有事情，我读到我还必须在这个等式中包括镜面反射计算，因为Three.JS不能堆叠多个着色器。

这是我的着色器，我只停留在镜面反射部分：

<script id="earthFragmentShader" type="x-shader/x-fragment">
    uniform sampler2D dayTexture;
    uniform sampler2D nightTexture;
    uniform sampler2D specularTexture;
    uniform vec3 sunDirection;
    varying vec3 vNormal;
    varying vec2 vUv;
    void main() {
        // Textures for day and night:
        vec3 dayColor       = texture2D( dayTexture, vUv ).xyz;
        vec3 nightColor     = texture2D( nightTexture, vUv ).xyz;
        // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
        float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);
        // sharpen the edge beween the transition
        cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 3.0, -1.0, 1.0);
        // convert to 0 to 1 for mixing
        float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
        // Atmosphere:
        float intensity = 1.09 - dot( vNormal, vec3( 0.0,0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1,1,1) * pow( intensity, 2.0 );
        // Select day or night texture based on mixAmount.
        vec3 color = mix( nightColor, dayColor + atmosphere, mixAmount );
        // Specular:
        vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
        vec3 specularColor  = vec3(1,1,1) * specularAmount;
        color = mix(color, specularColor, mixAmount);
        // Set the color
        gl_FragColor = vec4(color, 1.0);
    }
</script>

到目前为止，它只是将镜面反射贴图添加为地球上的纹理，但正如我提到的，我想使用这个BW图像来显示某种镜面反射。有人能给我指正确的方向吗？

编辑：

好吧，我用以下代码完成了整个映射：

// Specular:
vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
vec3 specularColor  = vec3(1,1,1);
float c = 0.35;
float p = 3.0;
float mixAmountSpecular = pow(c * dot(normalize(vNormal), sunDirection), p) * specularAmount.z;
// Select day or night texture based on mixAmount.
vec3 color = mix(dayColor, specularColor, mixAmountSpecular);
color = mix( nightColor, color + atmosphere, mixAmount );

现在唯一剩下的就是如何使镜面反射光斑变小。。。对此有什么想法吗？

编辑2:

好的，我通过调整一些参数终于实现了：

float c = 0.035;
float p = 30.0;
float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5);

作为参考，我的sunDirection是-2，0.8，1，而我的speculatorDirection是-15，10，22.5。

Answer 1

我的2次编辑总结了要使用的最终着色器：

<script id="earthFragmentShader" type="x-shader/x-fragment">
    uniform sampler2D dayTexture;
    uniform sampler2D nightTexture;
    uniform sampler2D specularTexture;
    uniform vec3 sunDirection;
    uniform vec3 specularDirection;
    varying vec3 vNormal;
    varying vec2 vUv;
    void main() {
        // Textures for day and night:
        vec3 dayColor       = texture2D( dayTexture, vUv ).xyz;
        vec3 nightColor     = texture2D( nightTexture, vUv ).xyz;
        // compute cosine sun to normal so -1 is away from sun and +1 is toward sun.
        float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);
        // sharpen the edge beween the transition
        cosineAngleSunToNormal = clamp( cosineAngleSunToNormal * 3.0, -1.0, 1.0);
        // convert to 0 to 1 for mixing
        float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
        // Atmosphere:
        float intensity = 1.09 - dot( vNormal, vec3( 0.0,0.0, 1.0 ) );
        vec3 atmosphere = vec3( 1,1,1) * pow( intensity, 2.0 );
        // Specular:
        vec3 specularAmount = texture2D( specularTexture, vUv ).xyz;
        vec3 specularColor  = vec3(1,1,1);
        // Play with these parameters to adjust the specular:
        float c = 0.035;    // Size, I guess...
        float p = 30.0;     // Blur
        float mixAmountSpecular = pow(c * dot(normalize(vNormal), specularDirection), p) * (specularAmount.z * 0.5);
        // Select day or night texture based on mixAmount.
        vec3 color = mix(dayColor, specularColor, mixAmountSpecular);
        color = mix( nightColor, color + atmosphere, mixAmount );
        // Set the color
        gl_FragColor = vec4(color, 1.0);
    }
</script>