WebGL中的渲染到立方体贴图教程 在我的程序中，在场景中间有一个光源，周围有物体。

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

---

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

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

通过调用将立方体贴图的一侧附着到FBO

gl.framebufferTexture2D（gl.FRAMEBUFFER，gl.COLOR\u ATTACHMENT0，gl.TEXTURE\u CUBE\u MAP\u POSITIVE\u 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\u 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
}

//更改为右帧缓冲区。。。
对于（var side=0；sidedo我在渲染到帧缓冲区时设置视口吗？对于渲染到2D纹理，我使用了一个与我将视口设置为相同大小的空2D纹理：gl.viewport（0，0，屏幕外高度，屏幕外宽度）；gl.texImage2D（gl.TEXTURE_2D，0，gl.RGBA，屏幕外_高度，屏幕外_宽度，0，gl.RGBA，gl.UNSIGNED_字节，null）；是的，在渲染到立方体贴图时，必须将“视口”更改为立方体贴图纹理的大小。我当前遇到错误：WebGL：根据OpenGL ES 2.0.24规范第3.8.2节，纹理将被渲染为黑色，因为它是一个立方体贴图纹理，具有不需要mipmap的缩小过滤器，并且不是立方体完整的（定义见第3.7.10节）。我遗漏了什么？：（不确定，可能有一个纹理参数处于禁用状态。可能要阅读规格以了解详情？：）