在我的程序中渲染到WebGL中的cubemap教程

Question

我在场景中间有一个光源，周围有对象。

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

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

Answer 1

在webgl中，通过呈现立方体贴图的每个面呈现给立方体贴图，因此每个立方体贴图都绘制6个立方体贴图。

通过调用 gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X+side, glTextureCube, 0);

您还需要为每个侧面有不同的看法矩阵附加一个立方体贴图到FBO的一侧。这通常使用.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 
}