深度纹理生成及可视化渲染(three.js webgl_depth_texture例子)

three.js中的webgl_depth_texture例子首先将场景渲染到深度纹理(depth texture)中,随后将深度纹理以可视的方式渲染到屏幕上。

实现过程

要将场景渲染到深度纹理中,需要借助framebuffer object(FBO)。通过生成一个FBO,并将其作为渲染目标,然后将特定用途的纹理挂载到FBO对应的color/depth attachment之上,渲染到FBO和渲染到default framebuffer的方式是完全相同的。

当深度纹理渲染完成后,我们想办法将深度纹理中的深度值以可视化的方法进行渲染展示。

模仿webgl_depth_texture例子,实现深度纹理的生成和可视化渲染,使用C++和OpenGL ES 3.0获得了如下的渲染效果,iOS版本实现源码可以从github上获取。

depth_texture_near_20200408.jpg

渲染到深度纹理

webgl_depth_texture例子首先使用随机的位置和方位数据渲染生成了多个torusknot几何体。这个场景将会被渲染到depth texture中。

正常渲染的场景


depth_texture_normal_20200408.jpg

渲染生成的深度纹理,用灰度图可视化。


depth_texture_visualization_20200408.jpg

深度纹理的可视化渲染

要将深度纹理(depth texture)以可视化方式展示出来,我们需要将深度值转化为灰度(黑白)颜色值。不过要注意,通常深度值的范围比较小,,在shader中要生成灰度色彩,我们需要适当缩放调整一下深度值。当转化为灰度颜色值时,我们将这个深度值分别作为RGB色彩的r/g/b部件值。由于我们采用右手(螺旋)性的坐标系,因而当几何体越接近眼睛时,其值越大,反之越小。

#version 300 es
precision highp float;

uniform sampler2D tDiffuse;
uniform sampler2D tDepth;

in vec2 vUv;
out vec4 fragColor;

void main() {    
    vec4 depthColor = texture(tDepth, vUv) ;
    //写入的深度值在纹理的r部件中存储。由于深度值的数值较小,可能需要适度的放大。
    fragColor = vec4(depthColor.r * 10.0);
    fragColor.a = 1.0;
    
}

在渲染过程中,我们可以通过控制几何体的z值来生成变化的深度值。我们可以看到几何体离眼睛越近时,被渲染几何体的颜色越接近白色,而几何体远离眼睛时,则渲染的颜色逐渐接近并融于黑色。较远时的渲染效果图如下:

depth_texture_far_20200408.jpg

你可能感兴趣的:(深度纹理生成及可视化渲染(three.js webgl_depth_texture例子))