Question

我正在编写自定义ShaderMaterial并决定包含灯光和雾。到目前为止这么好，我得到了与三个集成的着色器.js构建雾，环境光和点光源（它符合我的目的）。

然而，阴影我得到它的光滑，而不是平坦。在你们决定建议在ShaderMaterial中添加shading: THREE.FlatShading标志之前，请记住这是一个自定义着色器，因此它不会做任何事情。

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

这是我在CoffeeScript中的着色器

类SomeShader

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 ) ) );

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

three.js r.73

three.js ShaderMaterial FlatShading

1 个答案: