Question

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

我想为它做影子映射。我已经知道如何为屏幕外的某个光源进行阴影贴图。所以我的想法是渲染到我的灯泡周围的立方体贴图，立方体贴图的每一面都是阴影贴图，就像我以前一样。

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

Answer 1

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

通过调用将多维数据集映射的一侧附加到FBO gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X+side, glTextureCube, 0);

您还需要为每一面提供不同的视图矩阵。这通常使用.lookAt函数完成。相关的外观方向和向上矢量如下：

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中的cubemap教程

1 个答案: