在 WebGL 中渲染到立方体贴图教程

Question

在我的程序中，我在场景中间有一个光源，周围有物体。

我想为它做阴影贴图。我已经知道如何对屏幕外某处的光源进行阴影贴图。所以我的想法是在我的灯泡周围渲染一个立方体贴图，立方体贴图的每一侧都有一个阴影贴图，就像我习惯的那样。

如何渲染立方体贴图？有教程吗？这是要走的路吗？

Answer 1

在 webgl 中，您通过渲染立方体贴图的每个面来渲染立方体贴图，因此每个立方体贴图绘制 6 次。

您通过调用将立方体贴图的一侧附加到 FBO gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X+side, glTextureCube, 0);

您还需要为每一侧使用不同的视图矩阵。这通常是通过 .lookAt 函数完成的。相关的look direction和up vector如下：

var ENV_CUBE_LOOK_DIR = [
    new Vec3(1.0, 0.0, 0.0),
    new Vec3(-1.0, 0.0, 0.0),
    new Vec3(0.0, 1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, 0.0, 1.0),
    new Vec3(0.0, 0.0, -1.0)
];

var ENV_CUBE_LOOK_UP = [
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, 0.0, 1.0),
    new Vec3(0.0, 0.0, -1.0),
    new Vec3(0.0, -1.0, 0.0),
    new Vec3(0.0, -1.0, 0.0)
];

投影矩阵为var CUBE_PROJECTION = mat4.perspective(Math.PI/2, aspect, near, far);

然后在渲染时，你做：

//change to right framebuffer...
for (var side = 0; side<6;side++){
    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X+side, glTextureCube, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    view = mat4.lookAt(camera.pos, camera.pos + ENV_CUBE_LOOK_DIR[side], ENV_CUBE_LOOK_UP[side]);
    viewProjection = CUBE_PROJECTION * view;
    // upload uniforms
    // render
}

在 WebGL 中渲染到立方体贴图教程

render to cubemap tutorial in WebGL

webgl