three-gpu-光线追踪器

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

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

示例

设置

精美演示

特性

测试场景

工具

本地运行示例

要在本地运行和修改示例，请确保已安装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)。

截图

材质示例

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

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

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

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

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

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

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

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

资源

一个周末学会光线追踪

PBR书籍

knightcrawler25/GLSL-PathTracer

DassaultSystemes-Technology/dspbr-pt

three-gpu-pathtracer

three-gpu-光线追踪器

示例

本地运行示例

使用

导出

WebGLPathTracer

构造函数

.bounces

.filteredGlossyFactor

.tiles

.renderDelay

.fadeDuration

.minSamples

.dynamicLowRes

.lowResScale

.synchronizeRenderSize

.renderScale

.renderToCanvas

.rasterizeScene

.textureSize

.samples

.target

.setScene

.setSceneAsync

.updateCamera

.updateMaterials

.updateEnvironment

.updateLights

.renderSample

.reset

.dispose

PhysicalCamera

.focusDistance

.fStop

.bokehSize

.apertureBlades

.apertureRotation

.anamorphicRatio

EquirectCamera

PhysicalSpotLight

.radius

.iesMap

ShapedAreaLight

.isCircular

IESLoader

BlurredEnvMapGenerator

构造函数

.generate

.dispose

GradientEquirectTexture

.exponent

.topColor

.bottomColor

构造函数

.update

MaterialBase

.setDefine

FogVolumeMaterial

.density

DenoiseMaterial

.detect

注意事项

截图

资源

编辑推荐精选

TRAE编程

蛙蛙写作

问小白

Transly

讯飞智文

讯飞星火

Spark-TTS

咔片PPT

讯飞绘文

材料星

探索AI的无限可能

推荐工具精选

TRAE编程

豆包