Three.js ShaderMaterial lighting not working

Question

Я экспериментирую с материалом ShaderMaterial Three.js и пытаюсь реализовать освещение. У меня есть рабочий код для r70, но тот же код (с незначительными изменениями - константа MAX_POINT_LIGHTS переименован в NUM_POINT_LIGHTS) не работает для r76.

Глядя на след в WebGL Inspector, ясно, что в шейдер не передаются световые данные. Итак, есть освещение сломанное или мне нужно настроить что-то еще, чтобы заставить его работать?

Использование r70 (рабочий)

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

Фрагмент 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 - настройки Shadermaterial с UniformsUtils и UniformsLib

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

Использование R76 (futzed)

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

пиксельный шейдер

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

Unchanged

Answer 1

Легкие формы были заменены на struct s в r74 (В частности, в #7324). Обратите внимание, что хотя изменение в struct s произошло в r74, следующие работы r75 и более поздние.

Для каждого типа света приводится один массив из struct. У каждого struct есть position и color свойства, в которых вы нуждаетесь.

Фрагмент 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); 
} 

Обратите внимание, что свет позиция теперь относительно камеры, так что вы смещение светового положения с положением камеры.

Working Fiddle