ray-tracing-renderer 相机进阶LensCamera 光圈景深让渲染画面更有电影感【免费下载链接】ray-tracing-renderer[UNMAINTAINED] Real-time path tracing on the web with three.js项目地址: https://gitcode.com/gh_mirrors/ra/ray-tracing-rendererray-tracing-renderer 是一个基于 three.js 的 WebGL2 实时路径追踪渲染器其内置的 LensCamera 相机支持光圈景深效果只需调整 aperture 参数就能让渲染画面获得虚实分明的电影感。这篇相机进阶指南将带你理解 LensCamera 的工作原理并快速掌握光圈景深的开启方法与参数调优技巧。为什么路径追踪相机需要 LensCamera传统 three.js 的 PerspectiveCamera 是一个理想化的针孔相机模型所有光线都从同一点出发画面处处清晰锐利。而真实相机的镜头有光圈光通过有限直径的孔径进入因此只有位于对焦平面上的物体才是清晰的前后的物体会形成弥散圆这就是景深。ray-tracing-renderer 的路径追踪器天生适合模拟真实光学它可以为每一像素采样穿过镜头不同位置的光线天然地计算出散景Bokeh效果。为此项目专门实现了 LensCamera.js 类它继承自 three.js 的 PerspectiveCamera仅增加了一个aperture光圈属性默认值为 0.01export class LensCamera extends PerspectiveCamera { constructor(...args) { super(...args); this.aperture 0.01; } }LensCamera 光圈景深的快速开启方法在示例 renderer-test/main.js 和 sample-models/main.js 中都能看到 LensCamera 的标准用法开启景深只需三步第一步用 LensCamera 替换默认相机。将new THREE.PerspectiveCamera()换成new THREE.LensCamera()配合 OrbitControls 使用体验最佳const camera new THREE.LensCamera(); camera.fov 35; camera.aperture 0.01;第二步设置对焦距离 focus。focus属性决定焦点落在哪里通常让它跟随控制器的观察目标示例中正是这样做的camera.focus controls.target.distanceTo(camera.position);即相机到观察目标的距离保证主体始终清晰。第三步调节光圈 aperture 控制景深强度。aperture值越大光圈开得越大景深越浅、散景越明显值越小画面越接近全清晰。示例中camera.aperture 0.01 * distance还会根据模型大小自动缩放光圈保证不同场景下景深观感一致。薄透镜模型光圈景深的物理原理LensCamera 的景深实现遵循 PBRT 中的薄透镜模型Thin Lens Model核心代码位于 rayTrace.frag 的主着色器中// Thin lens model with depth-of-field vec2 lensPoint camera.aperture * sampleCircle(randomSampleVec2()); vec3 focusPoint -direction * camera.focus / direction.z; vec3 origin vec3(lensPoint, 0.0); direction normalize(focusPoint - origin);这段逻辑用三行代码诠释了景深的本质首先在镜头圆盘上随机采样一个点lensPoint半径由aperture决定然后计算该像素方向与对焦平面距离为focus的交点focusPoint最后让光线从镜头采样点出发、射向对焦点路径追踪器会为每条光线随机扰动起点。由于每条光线的起点都略有不同处于对焦平面上的物体成像位置一致而清晰偏离对焦平面的物体则会形成逐渐扩散的弥散圆。配合路径追踪的渐进式采样散景会随着渲染帧数增加而自然收敛产生柔和真实的电影感虚化。与之配套的focus与aperture字段定义在 rayTraceCore.glsl 的 Camera 结构体中路径追踪主循环则在 rayTrace.frag 中完成光线求交与反弹计算。光圈参数调优技巧从 0.01 到电影感想要调出理想的电影感景深可以遵循以下调参思路小光圈0.001 ~ 0.005画面几乎全清晰适合产品展示与建筑可视化强调场景完整性。渲染器测试场景 renderer-test/main.js 中 fov 较大、光圈取 0.01配合多材质球体用来展示材质细节。中等光圈0.01 ~ 0.05主体清晰、背景轻微虚化这是最常用的叙事档位适合人像、产品特写让观众的视线聚焦在核心物体上。示例 sample-models/main.js 默认即为此档。大光圈0.05 以上浅景深、强散景光斑明显电影感最足适合氛围营造。但注意路径追踪需要更多采样才能让虚化区域收敛干净静止相机渲染数秒后效果最佳。黄金配比focus始终对准主体 aperture根据场景尺度缩放如0.01 * distance这是项目示例给出的最稳妥方案无论加载多大的模型都能得到和谐的景深效果。景深 × 环境光照电影感渲染组合技LensCamera 的景深效果与 ray-tracing-renderer 的环境光照是绝配环境光负责让画面充满真实的全局光照、柔和阴影与金属反射光圈景深则负责强化空间层次与叙事焦点。两者叠加后即使是最普通的场景也能呈现出电影级的视觉质感。你可以参考 sample-models/main.js 中的完整场景搭建流程先用内置 HDR 环境贴图布光详见 环境光照指南再叠加 LensCamera 景深轻松产出氛围感拉满的渲染作品。常见问题解答Q为什么我设置了 aperture 但画面没有虚化请确认相机使用的是THREE.LensCamera而非普通 PerspectiveCamera并且正确设置了camera.focus对焦距离若 focus 恰好等于所有物体的距离画面自然全清晰。Q景深渲染噪点很多怎么办路径追踪是渐进式渲染浅景深需要更多采样才能收敛。请保持相机静止等待渲染器积累足够帧数后画面会逐渐清晰项目已内置渐进累积机制。Qaperture 和真实相机的 f 值是一回事吗不完全是。这里aperture是镜头圆盘采样的物理半径是相对值而非 F 数需要根据场景尺度试调示例中的0.01 * distance缩放策略就是很好的起点。结语LensCamera 用极简的aperturefocus两个参数为 ray-tracing-renderer 的路径追踪渲染带来了真实的物理景深虚化自然、散景柔和配合环境光照轻松获得电影感画面。从new THREE.LensCamera()开始调整光圈、对准焦点你的 three.js 渲染作品将立刻拉开与普通 WebGL 的差距。想亲手体验克隆仓库git clone https://gitcode.com/gh_mirrors/ra/ray-tracing-renderer打开 scenes/renderer-test/ 示例页面感受光圈景深带来的电影质感吧。【免费下载链接】ray-tracing-renderer[UNMAINTAINED] Real-time path tracing on the web with three.js项目地址: https://gitcode.com/gh_mirrors/ra/ray-tracing-renderer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ray-tracing-renderer 相机进阶：LensCamera 光圈景深让渲染画面更有电影感
ray-tracing-renderer 相机进阶LensCamera 光圈景深让渲染画面更有电影感【免费下载链接】ray-tracing-renderer[UNMAINTAINED] Real-time path tracing on the web with three.js项目地址: https://gitcode.com/gh_mirrors/ra/ray-tracing-rendererray-tracing-renderer 是一个基于 three.js 的 WebGL2 实时路径追踪渲染器其内置的 LensCamera 相机支持光圈景深效果只需调整 aperture 参数就能让渲染画面获得虚实分明的电影感。这篇相机进阶指南将带你理解 LensCamera 的工作原理并快速掌握光圈景深的开启方法与参数调优技巧。为什么路径追踪相机需要 LensCamera传统 three.js 的 PerspectiveCamera 是一个理想化的针孔相机模型所有光线都从同一点出发画面处处清晰锐利。而真实相机的镜头有光圈光通过有限直径的孔径进入因此只有位于对焦平面上的物体才是清晰的前后的物体会形成弥散圆这就是景深。ray-tracing-renderer 的路径追踪器天生适合模拟真实光学它可以为每一像素采样穿过镜头不同位置的光线天然地计算出散景Bokeh效果。为此项目专门实现了 LensCamera.js 类它继承自 three.js 的 PerspectiveCamera仅增加了一个aperture光圈属性默认值为 0.01export class LensCamera extends PerspectiveCamera { constructor(...args) { super(...args); this.aperture 0.01; } }LensCamera 光圈景深的快速开启方法在示例 renderer-test/main.js 和 sample-models/main.js 中都能看到 LensCamera 的标准用法开启景深只需三步第一步用 LensCamera 替换默认相机。将new THREE.PerspectiveCamera()换成new THREE.LensCamera()配合 OrbitControls 使用体验最佳const camera new THREE.LensCamera(); camera.fov 35; camera.aperture 0.01;第二步设置对焦距离 focus。focus属性决定焦点落在哪里通常让它跟随控制器的观察目标示例中正是这样做的camera.focus controls.target.distanceTo(camera.position);即相机到观察目标的距离保证主体始终清晰。第三步调节光圈 aperture 控制景深强度。aperture值越大光圈开得越大景深越浅、散景越明显值越小画面越接近全清晰。示例中camera.aperture 0.01 * distance还会根据模型大小自动缩放光圈保证不同场景下景深观感一致。薄透镜模型光圈景深的物理原理LensCamera 的景深实现遵循 PBRT 中的薄透镜模型Thin Lens Model核心代码位于 rayTrace.frag 的主着色器中// Thin lens model with depth-of-field vec2 lensPoint camera.aperture * sampleCircle(randomSampleVec2()); vec3 focusPoint -direction * camera.focus / direction.z; vec3 origin vec3(lensPoint, 0.0); direction normalize(focusPoint - origin);这段逻辑用三行代码诠释了景深的本质首先在镜头圆盘上随机采样一个点lensPoint半径由aperture决定然后计算该像素方向与对焦平面距离为focus的交点focusPoint最后让光线从镜头采样点出发、射向对焦点路径追踪器会为每条光线随机扰动起点。由于每条光线的起点都略有不同处于对焦平面上的物体成像位置一致而清晰偏离对焦平面的物体则会形成逐渐扩散的弥散圆。配合路径追踪的渐进式采样散景会随着渲染帧数增加而自然收敛产生柔和真实的电影感虚化。与之配套的focus与aperture字段定义在 rayTraceCore.glsl 的 Camera 结构体中路径追踪主循环则在 rayTrace.frag 中完成光线求交与反弹计算。光圈参数调优技巧从 0.01 到电影感想要调出理想的电影感景深可以遵循以下调参思路小光圈0.001 ~ 0.005画面几乎全清晰适合产品展示与建筑可视化强调场景完整性。渲染器测试场景 renderer-test/main.js 中 fov 较大、光圈取 0.01配合多材质球体用来展示材质细节。中等光圈0.01 ~ 0.05主体清晰、背景轻微虚化这是最常用的叙事档位适合人像、产品特写让观众的视线聚焦在核心物体上。示例 sample-models/main.js 默认即为此档。大光圈0.05 以上浅景深、强散景光斑明显电影感最足适合氛围营造。但注意路径追踪需要更多采样才能让虚化区域收敛干净静止相机渲染数秒后效果最佳。黄金配比focus始终对准主体 aperture根据场景尺度缩放如0.01 * distance这是项目示例给出的最稳妥方案无论加载多大的模型都能得到和谐的景深效果。景深 × 环境光照电影感渲染组合技LensCamera 的景深效果与 ray-tracing-renderer 的环境光照是绝配环境光负责让画面充满真实的全局光照、柔和阴影与金属反射光圈景深则负责强化空间层次与叙事焦点。两者叠加后即使是最普通的场景也能呈现出电影级的视觉质感。你可以参考 sample-models/main.js 中的完整场景搭建流程先用内置 HDR 环境贴图布光详见 环境光照指南再叠加 LensCamera 景深轻松产出氛围感拉满的渲染作品。常见问题解答Q为什么我设置了 aperture 但画面没有虚化请确认相机使用的是THREE.LensCamera而非普通 PerspectiveCamera并且正确设置了camera.focus对焦距离若 focus 恰好等于所有物体的距离画面自然全清晰。Q景深渲染噪点很多怎么办路径追踪是渐进式渲染浅景深需要更多采样才能收敛。请保持相机静止等待渲染器积累足够帧数后画面会逐渐清晰项目已内置渐进累积机制。Qaperture 和真实相机的 f 值是一回事吗不完全是。这里aperture是镜头圆盘采样的物理半径是相对值而非 F 数需要根据场景尺度试调示例中的0.01 * distance缩放策略就是很好的起点。结语LensCamera 用极简的aperturefocus两个参数为 ray-tracing-renderer 的路径追踪渲染带来了真实的物理景深虚化自然、散景柔和配合环境光照轻松获得电影感画面。从new THREE.LensCamera()开始调整光圈、对准焦点你的 three.js 渲染作品将立刻拉开与普通 WebGL 的差距。想亲手体验克隆仓库git clone https://gitcode.com/gh_mirrors/ra/ray-tracing-renderer打开 scenes/renderer-test/ 示例页面感受光圈景深带来的电影质感吧。【免费下载链接】ray-tracing-renderer[UNMAINTAINED] Real-time path tracing on the web with three.js项目地址: https://gitcode.com/gh_mirrors/ra/ray-tracing-renderer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考