不完全解读"/>
three.js 深度不完全解读
深度不完全解读
一、深度值的获取
1、方法1: FBO的深度附件
深度信息通过渲染管线中的深度缓冲区(depth buffer)来计算和存储。缓冲区用于存储每个像素点的深度值。
在渲染过程中,渲染器会根据每个像素点的深度值来确定最终像素的可见性和着色。
const target = new THREE.WebGLRenderTarget();
target.depthTexture = new THREE.DepthTexture();renderer.setRenderTarget(target);
renderer.render()// 深度值: target.depthTexture, 近(0)~远(1)
2、方法2: 深度材质
scene.overrideMaterial = new THREE.MeshDepthMaterial()
const target = new THREE.WebGLRenderTarget();renderer.setRenderTarget(target)
renderer.render();// 深度值: target.texture, 近(1)~远(0)
原理:
// @vertex
vHighPrecisionZW = gl_Position.zw;
// @fragement
// Higher precision equivalent of gl_FragCoord.z. This assumes depthRange has been left to its default values.
float fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;#if DEPTH_PACKING == 3200gl_FragColor = vec4( vec3( 1.0 - fragCoordZ ), opacity );
#elif DEPTH_PACKING == 3201gl_FragColor = packDepthToRGBA( fragCoordZ );
#endif
方法3: 利用 gl_FragCoord
float depth = gl_FragCoord.z / gl_FragCoord.w;
二、深度值的压缩和解压
压缩类型(DEPTH_PACKING):
export const BasicDepthPacking = 3200;
export const RGBADepthPacking = 3201;
vec4 packDepthToRGBA( const in float v ) {vec4 r = vec4( fract( v * PackFactors ), v );r.yzw -= r.xyz * ShiftRight8; // tidy overflowreturn r * PackUpscale;
}float unpackRGToDepth( const in highp vec2 v ) {return unpackRGBAToDepth( vec4( v.xy, 0.0, 0.0 ) );
}
三、深度值的相关转换
深度转viewZ
float perspectiveDepthToViewZ( const in float depth, const in float near, const in float far ) {// maps perspective depth in [ 0, 1 ] to viewZreturn ( near * far ) / ( ( far - near ) * depth - far );
}
更多推荐
three.js 深度不完全解读
发布评论