three-gpu-光线追踪器

使用three-mesh-bvh和WebGL 2的光线追踪项目，用于加速GPU上的高质量、基于物理的渲染。特性包括支持GGX表面模型、材质信息、纹理、法线贴图、发光、环境贴图、分块渲染等！

更多特性和功能正在开发中！

示例

设置

基础glTF设置示例

基础几何体示例

精美演示

基于物理的材质

乐高模型

室内场景

景深

HDR图像

特性

蒙皮几何体支持

变形目标支持

面光源支持

聚光灯支持

体积雾支持

测试场景

材质测试球

透射预设球

模型查看器保真度场景比较

物理材质数据库

工具

动画渲染

环境光遮蔽材质

本地运行示例

要在本地运行和修改示例，请确保已安装Node和NPM。在测试配置中检查支持的版本。

为了安装依赖项，你需要安装make和C++编译器。

在Debian或Ubuntu上，运行sudo apt install build-essential。在MacOS上应该可以直接使用。

• 要安装依赖项，运行npm install
• 要启动演示，运行npm start
• 访问http://localhost:1234/<demo-name.html>

使用

基本渲染器

import * as THREE from 'three';
import { WebGLPathTracer } from 'three-gpu-pathtracer';

// 初始化场景、相机、控制器等

renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.ACESFilmicToneMapping;

pathTracer = new WebGLPathTracer( renderer );
pathTracer.setScene( scene, camera );

animate();

function animate() {

	requestAnimationFrame( animate );
	pathTracer.renderSample();

}

模糊环境贴图

使用预先模糊的环境贴图可以帮助提高帧收敛时间，但代价是失去锐利的环境反射。如果性能是个问题，可以禁用多重重要性采样并使用模糊的环境贴图。

import { BlurredEnvMapGenerator } from 'three-gpu-pathtracer';

// ...

const envMap = await new RGBELoader().setDataType( THREE.FloatType ).loadAsync( envMapUrl );
const generator = new BlurredEnvMapGenerator( renderer );
const blurredEnvMap = generator.generate( envMap, 0.35 );

// 渲染！

导出

WebGLPathTracer

构造函数

constructor( renderer : WebGLRenderer )

.bounces

bounces = 10 : Number

要追踪的最大光线弹跳次数。

.filteredGlossyFactor

filteredGlossyFactor = 0 : Number

用于减轻光线击中漫反射表面然后击中镜面表面产生的亮点。设置较高的值可以减少萤火虫效应，但会移除一些镜面反射焦散。

.tiles

tiles = ( 3, 3 ) : Vector2

要渲染的x和y方向上的瓦片数量。可用于提高页面响应性，同时仍然渲染高分辨率目标。

.renderDelay

renderDelay = 100 : Number

光线追踪器重置后开始渲染样本的延迟毫秒数。

.fadeDuration

fadeDuration = 500 : Number

渲染到画布时，完全光线追踪的场景淡入所需的毫秒数。

.minSamples

minSamples = 5 : Number

在显示到画布之前要渲染的最小样本数。

.dynamicLowRes

dynamicLowRes = false : Boolean

是否在渲染全分辨率场景时额外渲染一个低分辨率版本。缩放比例由lowResScale定义。

.lowResScale

lowResScale = 0.1 : Number

渲染低分辨率通道的缩放比例。

.synchronizeRenderSize

synchronizeRenderSize = true : Boolean

是否在画布大小改变时自动更新光线追踪缓冲区的大小。

.renderScale

renderScale = 1 : Number

渲染光线追踪图像的缩放比例。仅当synchronizeRenderSize为true时相关。

.renderToCanvas

renderToCanvas = true : Boolean

当调用 renderSample 时，是否自动将路径追踪缓冲区渲染到画布上。

.rasterizeScene

rasterizeScene = true : Boolean

在路径追踪缓冲区渲染时，是否自动使用three.js渲染器对场景进行光栅化。

.textureSize

textureSize = ( 1024, 1024 ) : Vector2

扩展或缩小所有纹理的尺寸，以便将所有场景纹理打包到单个纹理数组中。

.samples

readonly samples : Number

已渲染的采样数。

.target

readonly target : WebGLRenderTarget

路径追踪渲染目标。每次调用 renderSample 时可能会发生变化。

.setScene

setScene( scene : Scene, camera : Camera ) : void

设置要渲染的场景和相机。当相机对象改变、场景中的几何体改变或分配新材质时，必须再次调用。

尽管只更新变更的数据，但这仍然是一个相对昂贵的函数。尽可能优先使用其他"更新"函数。

.setSceneAsync

setSceneAsync(
	scene : Scene,
	camera : Camera,
	options = {
		onProgress = null : value => void,
	} : Object
) : void

setScene 的异步版本。需要先调用 setBVHWorker。

.updateCamera

updateCamera() : void

更新相机参数。如果之前设置的相机上的任何参数发生变化，必须调用此函数。

.updateMaterials

updateMaterials() : void

更新材质属性。当已使用的任何材质的属性发生变化时，必须调用此函数。

注意，与WebGLPathTracer一起使用的材质支持以下附加属性：

// 是否将对象渲染为完全透明，以便稍后可以合成其他对象
matte = false : Boolean;

// 对象是否应投射阴影
castShadow = true : Boolean;

.updateEnvironment

updateEnvironment() : void

更新场景环境和背景属性的光照。如果设置的场景对象上的任何相关场景设置发生变化，必须调用此函数。

.updateLights

updateLights() : void

更新路径追踪中使用的灯光。如果添加或删除了任何灯光，或属性发生变化，必须调用此函数。

.renderSample

renderSample() : void

渲染一个采样到路径追踪目标。如果 renderToCanvas 为true，则图像会渲染到画布上。

.reset

reset() : void

重新开始渲染。

.dispose

dispose() : void

释放路径追踪器资产。必须单独释放使用的任何材质或纹理。

PhysicalCamera

扩展自THREE.PerspectiveCamera

three.js透视相机的扩展，带有一些与景深相关的其他参数。这些参数不会影响相机行为，仅为方便与PhysicalCameraUniform和路径追踪器一起使用。

.focusDistance

focusDistance = 25 : Number

从相机出发，以米为单位的完全聚焦距离。

.fStop

fStop = 1.4 : Number

相机的光圈值。如果更改此值，则会隐式更新 bokehSize 字段。

.bokehSize

bokehSize : Number

根据光圈值和焦距（以毫米为单位）得出的散景大小。如果设置此值，则会隐式更新光圈值。

.apertureBlades

apertureBlades = 0 : Number

光圈的边数/叶片数。

.apertureRotation

apertureRotation = 0 : Number

光圈形状的旋转，以弧度为单位。

.anamorphicRatio

anamorphicRatio = 1 : Number

镜头的变形比例。较高的值会水平拉伸散景效果。

EquirectCamera

扩展自THREE.Camera

表示路径追踪器应渲染等矩形视图的类。不适用于three.js光栅渲染。

PhysicalSpotLight

扩展自THREE.SpotLight

.radius

radius = 0 : Number

聚光灯表面的半径。增加此值可为阴影添加柔和度。

.iesMap

iesMap = null : Texture

描述方向光强度的已加载IES纹理。可以使用 IESLoader 加载这些纹理。

可以从 [ieslibrary.com] 下载预制的IES配置文件。也可以使用 CNDL 生成自定义配置文件。

ShapedAreaLight

扩展自THREE.RectAreaLight

.isCircular

isCircular = false : Boolean

区域光是否应渲染为圆形或矩形。

IESLoader

扩展自Loader

用于加载和解析IES配置文件数据的加载器。加载和解析函数返回包含配置文件内容的 DataTexture。

BlurredEnvMapGenerator

用于生成可与路径追踪器一起使用的PMREM模糊环境贴图的实用工具。

构造函数

constructor( renderer : WebGLRenderer )

.generate

generate( texture : Texture, blur : Number ) : DataTexture

接受要模糊的纹理和模糊程度。返回一个新的 DataTexture，即经过PMREM模糊的环境贴图，可以为重要性采样生成分布数据。

.dispose

dispose() : void

释放用于生成的临时文件和纹理。

GradientEquirectTexture

.exponent

exponent = 2 : Number

.topColor

topColor = 0xffffff : Color

.bottomColor

bottomColor = 0x000000 : Color

构造函数

constructor( resolution = 512 : Number )

.update

update() : void

MaterialBase

扩展自THREE.ShaderMaterial

便捷的基类，添加了额外的函数，并隐式地为着色器的所有uniforms添加对象定义。

.setDefine

setDefine( name : string, value = undefined : any ) : void

将给定名称的define设置为提供的值。如果值设置为null或undefined，则从材质的defines中删除它。如果define与之前的值不同，则将 Material.needsUpdate 设置为 true。

FogVolumeMaterial

扩展自MeshStandardMaterial

用于在场景中渲染类似雾的体积的材质。渲染中使用 color、emissive 和 emissiveIntensity 字段。

注意 由于雾模拟场景中的许多粒子并导致许多额外的反弹，雾材质可能会显著影响渲染时间。

.density

体积的粒子密度。

DenoiseMaterial

扩展自MaterialBase

基于 BrutPitt/glslSmartDeNoise 的降噪材质，用于最终渲染到屏幕。包括色调映射和色彩空间转换。

Uniforms

{

	// sigma - 标准差
	// kSigma - sigma系数
	// kSigma * sigma = 圆形核的半径
	sigma = 5.0 : Number,
	kSigma = 1.0 : Number,

	// 边缘锐化阈值
	threshold = 0.03 : Number,

<!--

## 兼容性检测器

通过检查结构精度是否可靠以及材质着色器是否可以编译,来检测当前设备是否可以运行路径追踪器。

### 构造函数

```js
constructor( renderer : WebGLRenderer, material : Material )

接受一个要使用的WebGLRenderer和要测试的材质。

.detect

detect() : {
	pass: Boolean,
	message: String
}

如果路径追踪器可以运行,则返回 pass === true。如果无法运行,则返回一条指示原因的消息。

-->

注意事项

• 该项目需要使用WebGL2。
• 所有纹理必须使用相同的环绕和插值标志。
• 仅在使用多重重要性采样(MIS)时支持聚光灯、平行光和点光源。
• 仅支持MeshStandardMaterial和MeshPhysicalMaterial。
• 不支持实例化几何体和交错缓冲区。
• 支持发光材质,但不能利用多重重要性采样(MIS)。

截图

<p align="center"> <i>材质示例</i> </p>

<p align="center"> <i>"SD超时空要塞城市对峙场景"由<a href="https://sketchfab.com/3d-models/sd-macross-city-standoff-diorama-b154220f7e7441799d6be2f7ff9658c7">tipatat</a>制作</i> </p>

<p align="center"> <i>"室内场景"模型由<a href="https://sketchfab.com/3d-models/interior-scene-45ddbbc4c2dc4f8ca9ed99da9a78326a">Allay Design</a>制作</i> </p>

<p align="center"> <i>毅力号火星车、机智号直升机模型由<a href="https://mars.nasa.gov/resources/25042/mars-perseverance-rover-3d-model/">NASA / JPL-Caltech</a>制作</i> </p>

<p align="center"> <i>明胶怪方块模型由<a href="https://sketchfab.com/3d-models/gelatinous-cube-e08385238f4d4b59b012233a9fbdca21">glenatron</a>制作</i> </p>

<p align="center"> <i>乐高模型由<a href="https://omr.ldraw.org/">LDraw官方模型库</a>提供</i> </p>

<p align="center"> <i>章鱼泡茶模型由<a href="https://sketchfab.com/3d-models/cartoon-octopus-takes-a-tea-bath-107260cf0fd24202a67eb037a6c760a5 ">AzTiZ</a>制作</i> </p>

<p align="center"> <i>植物学家的研究模型由<a href="https://sketchfab.com/3d-models/the-botanists-study-8b7b5743b1c848ed8ea58f5518c44e7e">riikkakilpelainen</a>制作</i> </p>

<p align="center"> <i>日式桥园模型由<a href="https://sketchfab.com/3d-models/japanese-bridge-garden-d122e17593eb4012913cde927486d15a">kristenlee</a>制作</i> </p>

资源

一个周末学会光线追踪

PBR书籍

knightcrawler25/GLSL-PathTracer

DassaultSystemes-Technology/dspbr-pt