访问官网
Githubthree-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超时空要塞城市对峙场景"由tipatat制作
"室内场景"模型由Allay Design制作
毅力号火星车、机智号直升机模型由NASA / JPL-Caltech制作
明胶怪方块模型由glenatron制作
乐高模型由LDraw官方模型库提供
章鱼泡茶模型由AzTiZ制作
植物学家的研究模型由riikkakilpelainen制作
日式桥园模型由kristenlee制作
