Three.js ShaderMaterial Beleuchtung funktioniert nicht

Question

Ich experimentiere mit Three.js ShaderMaterial und versuche die Beleuchtung zu implementieren. Ich habe Arbeitscode für R70, aber der gleiche Code (mit geringfügigen Änderungen - die Konstante MAX_POINT_LIGHTS wurde umbenannt NUM_POINT_LIGHTS) funktioniert nicht für R76.

Wenn Sie eine Spur in WebGL Inspector betrachten, wird klar, dass keine Lichtdaten an den Shader gesendet werden. Also, ist die Beleuchtung kaputt oder muss ich etwas anderes einrichten, damit es funktioniert?

Mit r70 (Arbeits)

http://codepen.io/anon/pen/KzjXNr?editors=1010

Fragment Shader

uniform vec3 diffuse; 
varying vec3 vPos; 
varying vec3 vNormal; 
uniform vec3 pointLightColor[MAX_POINT_LIGHTS]; 
uniform vec3 pointLightPosition[MAX_POINT_LIGHTS]; 
uniform float pointLightDistance[MAX_POINT_LIGHTS]; 

void main() { 
    vec4 addedLights = vec4(0.1, 0.1, 0.1, 1.0); 
    for(int l = 0; l < MAX_POINT_LIGHTS; l++) { 
    vec3 lightDirection = normalize(vPos - pointLightPosition[l]); 
    addedLights.rgb += clamp(dot(-lightDirection, vNormal), 0.0, 1.0) * pointLightColor[l]; 
    } 
    gl_FragColor = addedLights; 
} 

JavaScript - Einstellung der Shadermaterial mit UniformsUtils und UniformsLib bis

var uniforms = THREE.UniformsUtils.merge([ 
    THREE.UniformsLib['lights'], 
    { diffuse: { type: 'c', value: new THREE.Color(0xff00ff) } } 
]); 
var vertexShader = document.getElementById('vertexShader').text; 
var fragmentShader = document.getElementById('fragmentShader').text; 
material = new THREE.ShaderMaterial({ 
     uniforms: uniforms, 
     vertexShader: vertexShader, 
     fragmentShader: fragmentShader, 
     lights: true 
    }); 

var geometry = new THREE.BoxGeometry(200, 200, 200); 
mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

Mit R76 (futzed)

http://codepen.io/anon/pen/ZWdXLZ?editors=1010

Fragment Shader

uniform vec3 diffuse; 
varying vec3 vPos; 
varying vec3 vNormal; 
uniform vec3 pointLightColor[NUM_POINT_LIGHTS]; 
uniform vec3 pointLightPosition[NUM_POINT_LIGHTS]; 
uniform float pointLightDistance[NUM_POINT_LIGHTS]; 

void main() { 
    vec4 addedLights = vec4(0.1, 0.1, 0.1, 1.0); 
    for(int l = 0; l < NUM_POINT_LIGHTS; l++) { 
    vec3 lightDirection = normalize(vPos - pointLightPosition[l]); 
    addedLights.rgb += clamp(dot(-lightDirection, vNormal), 0.0, 1.0) * pointLightColor[l]; 
    } 
    gl_FragColor = addedLights; 
} 

JavaScript

Unverändert

Answer 1

Die Licht Uniformengeändert wurdens in r74 (speziell in #7324). Beachten Sie, dass obwohl die Änderung zu struct s in R74 passiert, das folgende r75 und später funktioniert.

Ein einzelnes Array von struct s ist für jeden Lichttyp angegeben. Jede struct hat die position und color Eigenschaften, die Sie benötigen.

Fragment Shader

uniform vec3 diffuse; 
varying vec3 vPos; 
varying vec3 vNormal; 

struct PointLight { 
    vec3 position; 
    vec3 color; 
}; 
uniform PointLight pointLights[ NUM_POINT_LIGHTS ]; 

void main() { 
    vec4 addedLights = vec4(0.1, 0.1, 0.1, 1.0); 
    for(int l = 0; l < NUM_POINT_LIGHTS; l++) { 
    vec3 adjustedLight = pointLights[l].position + cameraPosition; 
    vec3 lightDirection = normalize(vPos - adjustedLight); 
    addedLights.rgb += clamp(dot(-lightDirection, vNormal), 0.0, 1.0) * pointLights[l].color; 
    } 
    gl_FragColor = addedLights;//mix(vec4(diffuse.x, diffuse.y, diffuse.z, 1.0), addedLights, addedLights); 
} 

Beachten Sie, dass die Lichtposition in die Kamera nun relativ ist, so dass Sie die Lichtposition mit der Kameraposition versetzt.

Working Fiddle