三.js ShaderMaterial FlatShading

Question

我正在编写一个自定义 ShaderMaterial，并决定包含灯光和雾。到目前为止一切顺利，我将着色器与 Three.js 集成，构建了雾灯、环境光和点光源（它满足了我的目的）。

然而，我得到的阴影是平滑的，而不是平坦的。在你们决定建议将shading: THREE.FlatShading标志添加到 ShaderMaterial 之前，请记住这是一个自定义着色器，因此不会真正执行任何操作。

由于 FlatShading 是通过计算三角形质心并根据该向量填充所有颜色来完成的，因此我认为使用三角形顶点的法线就可以解决问题..显然它不会...这是正确拥有 FlatShading 光的一种方法吗三角形内的所有像素都有 1 种单一颜色？如果是这样，我错过了什么？

这是我在 CoffeeScript 中的着色器

一些着色器类

constructor: ->

    @defines = {}

    @uniforms = THREE.UniformsUtils.merge [
        THREE.UniformsLib['fog']
        THREE.UniformsLib['lights']
        {
            color: { type: 'c', value: new THREE.Color(0xffffff) }
        }
    ]

    @vertex = [
        'uniform vec3 ambientLightColor;'
        '#if MAX_POINT_LIGHTS > 0'
        '   uniform vec3 pointLightColor[MAX_POINT_LIGHTS];'
        '   uniform vec3 pointLightPosition[MAX_POINT_LIGHTS];'
        '   uniform float pointLightDistance[MAX_POINT_LIGHTS];'
        '#endif'

        'uniform vec3 color;'
        'varying vec4 v_color;'

        'void main() {'
        # lights
        '   vec3 norm = normalMatrix * normal;'
        '   vec3 pos = (modelViewMatrix * vec4(position-norm, 1.0 )).xyz;'
        '   vec3 outgoingLight = vec3(1.);'
        '   vec4 addedLights = vec4(0., 0., 0., 1.);'
        '   #if MAX_POINT_LIGHTS > 0'
        '   for(int l = 0; l < MAX_POINT_LIGHTS; l++) {'
        '       vec3 lightDirection = normalize(pos - pointLightPosition[l]);'
        '       addedLights.rgb += clamp(dot(-lightDirection, norm), 0.0, 1.0) * pointLightColor[l];'
        '   }'
        '   #endif'
        '   addedLights += vec4(ambientLightColor, 1.);'
        '   v_color = vec4(outgoingLight, 1.) * addedLights;'
        '   gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);'
        '}'
    ].join '\n'

    @fragment = [
        THREE.ShaderChunk['fog_pars_fragment']

        'varying vec4 v_color;'

        'void main() {'
        '   vec3 outgoingLight = vec3( 1. );'
            THREE.ShaderChunk['fog_fragment']
        '   gl_FragColor = v_color * vec4(outgoingLight, 1.);'
        '}'
    ].join '\n'

Answer 1

您正在使用ShaderMaterial并且正在使用噪声函数替换顶点着色器中的顶点。您还需要重新计算顶点法线，使阴影变得平坦——即多面的。

为此，您需要在片段着色器中使用屏幕空间导数来计算新法线，并在片段着色器中进行光照计算。

因此，在顶点着色器中，计算以下内容varying：

varying vec3 vViewPosition;

vec4 mvPosition = modelViewMatrix * vec4( displacedPosition, 1.0 );
vViewPosition = - mvPosition.xyz; // vector from vertex to camera

然后，在片段着色器中，使用屏幕空间导数计算法线：

normal = normalize( cross( dFdx( vViewPosition ), dFdy( vViewPosition ) ) );

现在，使用您的光照模型来计算片段着色器中的着色。

三.js r.73