具有预定义灯光的THREE.js自定义着色器

时间:2016-05-28 14:56:51

标签: opengl-es three.js shader light shadermaterial

我根据THREE.BlendShader和AlteredQualia JupiterShader制作了以下BlendShader。我正在努力为这个着色器添加Directional Light到材质。我已阅读this教程,但它仍然会渲染完全亮起的对象,而不考虑定向光。在定义gl_FragColor时,我可能在最后一行做错了,但无法弄清楚它是什么。请帮忙。谢谢。

FragmentShader:

"#if NUM_DIR_LIGHTS > 0",
"uniform vec3 directionalLightColor[NUM_DIR_LIGHTS];",
"uniform vec3 directionalLightDirection[NUM_DIR_LIGHTS];",
"#endif",
"uniform float opacity;",
"uniform float mixRatio;",
"uniform float staticRatio;",
"uniform sampler2D tDiffuse1;",
"uniform sampler2D tDiffuse2;",
"uniform sampler2D tDiffuse3;",

"varying vec2 vUv;", // = uv

// vNormal is worldNormal calculated in vertex shader as follows:
// "vec3 worldNormal = mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal ;",
// "vNormal = normalize( worldNormal );",
"varying vec3 vNormal;",

    "void main() {",

    "vec4 texel1 = texture2D( tDiffuse1, vUv );", // frame i
    "vec4 texel2 = texture2D( tDiffuse2, vUv );", // frame i + 1
    "vec4 texel3 = texture2D( tDiffuse3, vUv );", //static texture
    "texel1.xyz = pow( texel1.xyz, vec3( 1.7 ) );", // gamma correction
    "texel2.xyz = pow( texel2.xyz, vec3( 1.7 ) );", // gamma correction
    "float m = 1.0;",
    "float m1 = smoothstep( 0.23, 0.3, vUv.y );", // 
    "float m2 = 1.0 - smoothstep( 0.75, 0.82, vUv.y );", 
    "m = m1 * m2;",
    "vec4 dynamic = mix( texel1, texel2, mixRatio );", // mixing two frames

    //directional light 
    "vec4 sumDirLights = vec4(0.0, 0.0, 0.0, 1.0);",

    "#if NUM_DIR_LIGHTS > 0",
    "for( int i = 0; i < NUM_DIR_LIGHTS; i++ ) {",
    "vec3 dir = directionalLightDirection[i];",
    "sumDirLights.rgb += clamp( dot( -dir, vNormal ), 0.0, 1.0 ) * directionalLightColor[i];",
    "}",
    "#endif",
    "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * sumDirLights + ( opacity * mix( texel3, dynamic, staticRatio * m ) ) ;",           

"}"

0 个答案:

没有答案