Three.js开启光线追踪

光线追踪（Ray Tracing）是一种用于渲染图像的技术，通过追踪光线在场景中的传播路径来模拟光的行为。这种技术可以产生非常逼真的图像，因为它考虑了光线在与物体交互时的反射、折射和吸收等物理现象。

首先看一组对比图，同样的使用Three.js加载模型，开启光线追踪和没开启的效果对比：

右边开启光线追踪的画面更加立体，光线的计算更加真实。

代码示例

首先安装光线追踪插件库：three-gpu-pathtracer 是一个基于 Three.js 的 GPU 光线追踪器，它利用 WebGL 的计算能力在 GPU 上执行光线追踪算法，从而加速渲染过程并实现更复杂的光线追踪效果。

1、安装three-gpu-pathtracer：

npm install three-gpu-pathtracer

2、处理 GLSL 文件：

three-gpu-pathtracer 使用 GLSL（OpenGL Shading Language）来编写着色器程序。在 webpack 项目中，您可以使用 raw-loader 和 glslify-loader 来处理 GLSL 文件。确保您的项目中已经安装了这些 loader：

npm install -D raw-loader glslify-loader

3、配置 Webpack：

如果您使用 webpack 来构建项目，您可能需要在构建工具的配置中添加对 GLSL 文件的处理。在 Vue CLI 项目中，您可以在 vue.config.js 中添加类似以下的配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('glsl')
      .test(/\.glsl$/)
      .use('raw-loader')
      .loader('raw-loader')
      .end()
      .use('glslify-loader')
      .loader('glslify-loader')
      .end()
  }
}

4、使用three-gpu-pathtracer

首先引入three-gpu-pathtracer

import { WebGLPathTracer } from 'three-gpu-pathtracer'

在render、scene、camera都实例化完成之后，实例化three-gpu-pathtracer

const pathTracer = new WebGLPathTracer(renderer)
pathTracer.setScene(scene, camera)
pathTracer.filterGlossyFactor = 0.5
pathTracer.tiles.set(3, 3)
pathTracer.renderSample()

这里要明确两个理念：

任何修改threejs场景（scene），都需要调用setScene方法更新pathTracer：

// 例如在将模型加载到scene之后，需要更新pathTracer
pathTracer.setScene(scene, camera)

任何修改threejs相机（camera）的行为，都需要调用updateCamera方法更新pathTracer：

// 当controls更新后，需要更新pathTracer
controls.addEventListener('change', () => {
    if (pathTracer) {
      pathTracer.updateCamera()
    }
  })

在animate中渲染pathTracer：

  if (pathTracer) {
    pathTracer.enablePathTracing = openPathTracer.isEnable
    pathTracer.renderSample()
  }

5、注意事项

此方案在Iphone会出现不兼容