Three.js ShaderMaterial 光照不工作

Question

我正在试验 Three.js ShaderMaterial 并尝试实现光照。我有 r70 的工作代码，但相同的代码（稍作改动 - MAX_POINT_LIGHTS 常量已重命名为 NUM_POINT_LIGHTS）不适用于 r76。

查看 WebGL Inspector 中的跟踪，很明显没有灯光数据被发送到着色器。那么，是照明坏了还是我需要设置其他东西才能让它工作？

使用 r70（工作）

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

片段着色器

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 - 使用 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

不变

Answer 1

r74 (Specifically in #7324 中的轻便制服已更改为 structs)。请注意，虽然对 structs 的更改发生在 r74 中，但以下内容适用于 r75 及更高版本。

为每种灯光类型提供了一个 struct 数组。每个 struct 都有您需要的 position 和 color 属性。

片段着色器

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

Three.js ShaderMaterial 光照不工作

Three.js ShaderMaterial lighting not working

three.js

lighting

shadermaterial

使用 r70（工作）

使用 r76（futzed）