THREEJS中的SSAOShader阴影计算

原创

已于 2023-04-21 18:56:10 修改 · 748 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #着色器 #web

于 2023-04-21 14:47:52 首次发布

SSAO（Screen Space Ambient Occlusion）：屏幕空间环境光遮蔽是一种实时计算环境光遮蔽的技术。它通过在屏幕空间内模拟环境光的散射和遮蔽，生成更真实的阴影效果。SSAO 是一种效率较高的技术，通常用于实时渲染，如游戏和 Web 应用程序。

后处理

先理解一个概念：后处理

后处理（Post-processing）是指在 3D 场景的渲染过程完成之后，对生成的 2D 图像进行额外处理的过程。这种处理可以增强视觉效果，制造各种视觉效果，如模糊、泛光、色调映射、屏幕空间环境光遮蔽（SSAO）等。后处理通常用于提高渲染质量，增强视觉体验，但可能会对性能产生一定影响。

在 Three.js 中，后处理通常使用 EffectComposer 类来实现。EffectComposer 类允许你将多个后处理通道（称为 Pass）组合在一起，以便在渲染场景后按顺序应用它们。通常，你可以在 Three.js 的 examples/jsm/postprocessing 目录中找到许多预定义的后处理通道，如 RenderPass、BloomPass、ShaderPass 等。

FullScreenQuad

然后再讲一个概念：FullScreenQuad

FullScreenQuad 是一种在 Three.js 中常用的后期处理技术。它使用一个占据整个屏幕的四边形（通常是一个矩形）作为渲染目标。这个四边形覆盖了整个屏幕，所以称为 "FullScreen"。FullScreenQuad 主要用于将特定的着色器效果应用于整个屏幕，例如屏幕空间环境光遮蔽（SSAO）、泛光、色调映射等。

FullScreenQuad 的工作原理是将一个带有自定义着色器的材质应用于一个覆盖整个屏幕的矩形几何体。在渲染时，此矩形几何体作为一个单独的渲染通道被绘制到屏幕上。通过将场景渲染到纹理中，然后在后期处理阶段将该纹理应用于 FullScreenQuad，可以实现各种复杂的视觉效果。

在 Three.js 的 examples/jsm/postprocessing 库中，FullScreenQuad 类可以帮助你快速创建一个全屏四边形。

代码如下：

const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );


// https://github.com/mrdoob/three.js/pull/21358


const _geometry = new BufferGeometry();
_geometry.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
_geometry.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );


class FullScreenQuad {


	constructor( material ) {


		this._mesh = new Mesh( _geometry, material );


	}


	dispose() {


		this._mesh.geometry.dispose();


	}


	render( renderer ) {


		renderer.render( this._mesh, _camera );


	}


	get material() {


		return this._mesh.material;


	}


	set material( value ) {


		this._mesh.material = value;


	}


}

后处理使用全屏的 Pla