基本上，这就是我实现阴影贴图算法的方式，但是我只关注点光源的情况，因为有了它们，我可以存档全向阴影贴图。
首先，我会像这样主动进行正面剔除：
if (this.state.faceCulling !== Material.FRONT) {
if (this.state.faceCulling === Material.NONE)
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.FRONT);
this.state.faceCulling = Material.FRONT;
}
其次，我创建一个深度程序以记录每个立方体贴图面的深度值，这是我的深度程序GLSL 1.0中的代码：
顶点着色器：
precision highp float;
attribute vec3 position;
uniform mat4 uModelView;
uniform mat4 uProjection;
void main() {
gl_Position = uProjection * uModelView * vec4(position, 1.0);
}
片段着色器：
precision highp float;
vec4 packDepth(const in float depth) {
const vec4 bitShift = vec4(256.0 * 256.0 * 256.0, 256.0 * 256.0, 256.0, 1.0);
const vec4 bitMask = vec4(0.0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);
vec4 res = mod(depth * bitShift * vec4(255), vec4(256)) / vec4(255);
res -= res.xxyz * bitMask;
return res;
}
void main() {
gl_FragData[0] = packDepth(gl_FragCoord.z);
}
第三，这是我的JavaScript函数的主体，用于“归档”全向阴影贴图。我主要的顶点着色器和片段着色器：
顶点着色器：
program.bind(gl);
for (i = 0; i < lights.length; i++) {
light = lights[i];
// Updates pointlight's projection matrix
light.updateProjection();
// Binds point light's depth framebuffer
light.depthFramebuffer.bind(gl);
// Updates point light's framebuffer in order to create it
// or if it's resolution changes, it'll be created again.
light.depthFramebuffer.update(gl);
// Sets viewport dimensions with depth framebuffer's dimensions
this.viewport(new Vector2(), light.depthFramebuffer.size);
if (light instanceof PointLight) {
up = new Vector3();
view = new Matrix4();
origin = new Vector3();
target = new Vector3();
for (j = 0; j < 6; j++) {
// Check in which cubemap's face we are ...
switch (j) {
case Cubemap.POSITIVE_X:
target.set(1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_X:
target.set(-1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.POSITIVE_Y:
target.set(0, 1, 0);
up.set(0, 0, 1);
break;
case Cubemap.NEGATIVE_Y:
target.set(0, -1, 0);
up.set(0, 0, -1);
break;
case Cubemap.POSITIVE_Z:
target.set(0, 0, 1);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_Z:
target.set(0, 0, -1);
up.set(0, -1, 0);
break;
}
// Creates a view matrix using target and up vectors according to each face of pointlight's
// cubemap. Furthermore, I translate it in minus light position in order to place
// the point light in the world's origin and render each cubemap's face at this
// point of view
view.lookAt(origin, target, up);
view.mul(new EZ3.Matrix4().translate(light.position.clone().negate()));
// Flips the Y-coordinate of each cubemap face
// scaling the projection matrix by (1, -1, 1).
// This is a perspective projection matrix which has:
// 90 degress of FOV.
// 1.0 of aspect ratio.
// Near clipping plane at 0.01.
// Far clipping plane at 2000.0.
projection = light.projection.clone();
projection.scale(new EZ3.Vector3(1, -1, 1));
// Attaches a cubemap face to current framebuffer in order to record depth values for the face with this line
// gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + j, id, 0);
light.depthFramebuffer.texture.attach(gl, j);
// Clears current framebuffer's color with these lines:
// gl.clearColor(1.0,1.0,1.0,1.0);
// gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
this.clear(color);
// Renders shadow caster meshes using the depth program
for (k = 0; k < shadowCasters.length; k++)
this._renderShadowCaster(shadowCasters[k], program, view, projection);
}
} else {
// Directional light & Spotlight case ...
}
}
片段着色器：
precision highp float;
attribute vec3 position;
uniform mat4 uModel;
uniform mat4 uModelView;
uniform mat4 uProjection;
varying vec3 vPosition;
void main() {
vPosition = vec3(uModel * vec4(position, 1.0));
gl_Position = uProjection * uModelView * vec4(position, 1.0);
}
最后，这就是我得到的结果，我的场景有一个平面，一个立方体和一个球体。此外，红色亮球是点光源：
如您所见，我似乎在点光深度帧缓冲区的立方体贴图之间没有很好地插他们的脸。
直到现在，我还不知道如何解决这个问题。
#1 楼
解决方案几天后，我意识到我正在使用FOV角（以度为单位）来计算投影矩阵，并且应以弧度为单位。我进行了转换，现在一切正常。现在，深度帧缓冲区的立方体贴图的各个面之间的插值非常完美。因此，以弧度为单位处理每个三角函数的角度非常重要。
此外，我意识到您可以按照我在问题中所说的那样和这样来计算视图矩阵：
view.lookAt(position, target.add(position.clone()), up);
这种方法意味着您的视点位于pointlight的中心，并且仅在立方体贴图的每个方向进行渲染，但是这些方向是哪些？好吧，这些方向是通过将我在切换块中的每个目标（根据每个立方体贴图的面）与您的聚光灯的位置相加而计算得出的。
此外，不必翻转投影矩阵，在这种情况下，可以将Pointlight的透视投影矩阵分配到您的GLSL着色器，而无需按（1 、、-1、1）进行缩放，因为我正在使用没有翻转Y坐标的纹理认为只有在使用翻转的纹理的Y坐标时才应该翻转点光源的投影矩阵的Y坐标，这样才能获得正确的全向阴影贴图效果。
最后，我将在CPU / GPU端保留我的全方位阴影映射算法的最终版本。在CPU方面，我将解释您需要执行的每个步骤，以便为每个立方体贴图的表面计算正确的阴影贴图。另一方面，在GPU方面，我将在主片段着色器中解释深度程序的顶点/片段着色器和全向阴影映射功能，以帮助可能正在学习该技术的人，或解决有关此算法的未来疑虑。 ：
CPU
// Disable blending and enable front face culling.
this.state.disable(gl.BLEND);
this.state.enable(gl.CULL_FACE);
this.state.cullFace(gl.FRONT);
// Binds depth program
program.bind(gl);
// For each pointlight source do
for (i = 0; i < lights.length; i++) {
light = lights[i];
// Get each pointlight's world position
position = light.worldPosition();
// Binds pointlight's depth framebuffer. Besides, in this function,
// viewport's dimensions are set according to depth framebuffer's dimension.
light.depthFramebuffer.bind(gl, this.state);
// Updates point light's framebuffer in order to create it
// or if it's resolution have changed, it'll be created again.
light.depthFramebuffer.update(gl);
// Check in which cubemap's face we are ...
for (j = 0; j < 6; j++) {
switch (j) {
case Cubemap.POSITIVE_X:
target.set(1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_X:
target.set(-1, 0, 0);
up.set(0, -1, 0);
break;
case Cubemap.POSITIVE_Y:
target.set(0, 1, 0);
up.set(0, 0, 1);
break;
case Cubemap.NEGATIVE_Y:
target.set(0, -1, 0);
up.set(0, 0, -1);
break;
case Cubemap.POSITIVE_Z:
target.set(0, 0, 1);
up.set(0, -1, 0);
break;
case Cubemap.NEGATIVE_Z:
target.set(0, 0, -1);
up.set(0, -1, 0);
break;
}
// Creates a view matrix using target and up vectors
// according to each face of pointlight's cubemap.
view.lookAt(position, target.add(position.clone()), up);
// Attaches cubemap's face to current framebuffer
// in order to record depth values in that direction.
light.depthFramebuffer.texture.attach(gl, j);
// Clears color & depth buffers of your current framebuffer
this.clear();
// Render each shadow caster mesh using your depth program
for (k = 0; k < meshes.length; k++)
this._renderMeshDepth(program, meshes[k], view, light.projection);
}
}
我在renderMeshDepth函数上：
// Computes pointlight's model-view matrix
modelView.mul(view, mesh.world);
// Dispatch each matrix to the GLSL depth program
program.loadUniformMatrix(gl, 'uModelView', modelView);
program.loadUniformMatrix(gl, 'uProjection', projection);
// Renders a mesh using vertex buffer objects (VBO)
mesh.render(gl, program.attributes, this.state, this.extensions);
> GPU
深度程序顶点着色器：
precision highp float;
attribute vec3 position;
uniform mat4 uModelView;
uniform mat4 uProjection;
void main() {
gl_Position = uProjection * uModelView * vec4(position, 1.0);
}
深度程序片段着色器：
precision highp float;
// The pack function distributes fragment's depth precision storing
// it throughout (R,G,B,A) color channels and not just R color channel
// as usual in shadow mapping algorithms. This is because I'm working
// with 8-bit textures and one color channel hasn't enough precision
// to store a depth value.
vec4 pack(const in float depth) {
const vec4 bitShift = vec4(255.0 * 255.0 * 255.0, 255.0 * 255.0, 255.0, 1.0);
const vec4 bitMask = vec4(0.0, 1.0 / 255.0, 1.0 / 255.0, 1.0 / 255.0);
vec4 res = fract(depth * bitShift);
res -= res.xxyz * bitMask;
return res;
}
void main() {
// Packs normalized fragment's Z-Coordinate which is in [0,1] interval.
gl_FragColor = pack(gl_FragCoord.z);
}
全向阴影我的主要片段着色器中的映射函数：
// Unpacks fragment's Z-Coordinate which was packed
// on the depth program's fragment shader.
float unpack(in vec4 color) {
const vec4 bitShift = vec4(1.0 / (255.0 * 255.0 * 255.0), 1.0 / (255.0 * 255.0), 1.0 / 255.0, 1.0);
return dot(color, bitShift);
}
// Computes Omnidirectional Shadow Mapping technique using a samplerCube
// vec3 lightPosition is your pointlight's position in world coordinates.
// vec3 vPosition is your vertex's position in world coordinates, in code
// I mean this -> vPosition = vec3(uModel * vec4(position, 1.0));
// where uModel is your World/Model matrix.
float omnidirectionalShadow(in vec3 lightPosition, in float bias, in float darkness, in samplerCube sampler) {
vec3 direction = vPosition - lightPosition;
float vertexDepth = clamp(length(direction), 0.0, 1.0);
float shadowMapDepth = unpack(textureCube(sampler, direction)) + bias;
return (vertexDepth > shadowMapDepth) ? darkness : 1.0;
}
这里是算法的最终呈现器
玩得开心，编写精美的图形，祝您好运:)
CZ
评论
这似乎是一个好问题-是否已找到解决方案将其删除？如果是这样，您可以取消删除它，并在解决方案中发布答案。鼓励回答您自己的问题，并且您在问题和答案上都享有声誉。另外，它可能会帮助将来遇到类似问题的其他人...您好@trichoplax实际上我找到了解决方案，我将与回答我自己问题的每个人共享答案。老实说，我删除了我的问题，因为我认为没有人关心这个问题。
顺便说一句，与其编辑标题中带有“已解决”的问题，不如接受您自己的答案。 （该网站可能会让您在发布后等待一天；我不记得了。）
嘿! @NathanReed我要更改标题，谢谢：)