使用GLSL在THREE.ShaderMaterial中進行照明

我在用Three.js使用ShaderMaterial來模擬PhongMaterial。使用GLSL在THREE.ShaderMaterial中進行照明

我加入燈光場景：

  var lightColor = new THREE.Color(0xffffff); 
      var aLight = new THREE.AmbientLight(lightColor); 
      scene.add(aLight); 
      var dLight = new THREE.DirectionalLight(lightColor,1.0); 
      dLight.name = "dLight"; 
      dLight.position.set(-1.0, 0.0, -0.3).normalize(); 
      scene.add(dLight);

一切都很酷，當我加入MeshPhongMaterial現場。現在，我使用的是ShaderMaterial：

 var shaderMaterial = new THREE.ShaderMaterial({ 

      uniforms:THREE.UniformsUtils.merge([ 

       THREE.UniformsLib["lights"], 

       { 
        diffuseMaterial: {type: "c", value: new THREE.Color(1,0,0)}, 
        specularMaterial: {type: "c", value: new THREE.Color(0.7,0.7,0.7)}, 
        ambientMaterial:{type:"c", value: new THREE.Color(0.8,0.2,0.2)}, 
        shininessMaterial: {type:"f", value: 16.0} 
       } 
      ]), 

      vertexShader: vs, 
      fragmentShader: fs, 
      lights:true 
     });

這是我的頂點着色器：

uniform vec3 diffuseMaterial; 
uniform vec3 specularMaterial; 
uniform vec3 ambientMaterial; 
uniform float shininessMaterial; 
uniform vec3 ambientLight; 
uniform vec3 directionalLightColor[NUM_DIR_LIGHTS]; 
uniform vec3 directionalLightDirection[NUM_DIR_LIGHTS]; 
uniform vec3 ambientLightColor[1]; 

varying vec3 fragColor; 

vec3 phong(vec3 p, vec3 n, vec3 v){ 

    vec3 fromLight = normalize(directionalLightDirection[0]); 
    vec3 toLight = -fromLight; 

    vec3 reflectLight = reflect(toLight,n); 

    float ndots = dot(n, toLight); 
    float vdotr = abs(dot(v,reflectLight)); 

    vec3 ambi = ambientMaterial * ambientLightColor[0]; 
    vec3 diff = diffuseMaterial * directionalLightColor[0] * ndots; 
    vec3 spec = specularMaterial * directionalLightColor[0] * pow(vdotr,shininessMaterial); 

    return ambi + diff + spec ; 
    //return ambi + diff; 
} 



void main() { 

    gl_PointSize = 3.0; 

    vec4 ecPosition=modelViewMatrix*vec4(position,1.0); 
    vec3 ecNormal= normalize(normalMatrix*normal); 

    bool useOrtho = projectionMatrix[2][3] == 0.0; 


    vec3 viewDir=useOrtho ? vec3(0,0,1) : normalize(-ecPosition.xyz); 

    fragColor=phong(ecPosition.xyz, ecNormal, viewDir); 


    gl_Position = projectionMatrix * 
        modelViewMatrix * 
        vec4(position,1.0); 
}

但我得到的是this。當我只想要漫反射或鏡面反射部分時，我會得到this black one。我做錯了什麼？

來源

2016-07-05 Vincent Hoch-Drei

你是不是在視圖幀改變你的光，它可能是值得檢查這個 – Zouch

你確定你是想做到這一點的頂點着色器而不是片段着色器？ – 2pha

行

float vdotr = abs(dot(v,reflectLight));

必須

float vdotr = max(0,dot(v,reflectLight));

來源

2016-08-10 09:33:46

使用GLSL在THREE.ShaderMaterial中進行照明

回答

相關問題