在我的程序中渲染到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 
}