ThreeJS – 如何提升three.js的渲染效果?看完这篇你可能会有启发
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:ThreeJS – 如何提升three.js的渲染效果?看完这篇你可能会有启发
原文链接:https://www.stubbornhuang.com/2363/
发布于:2022年09月22日 9:36:51
修改于:2022年09月24日 16:55:56
相信很多使用three.js在web端进行场景渲染的朋友们一定会有和我一样的疑问。在Unity,UE4中渲染效果那么好的模型和场景放到three.js中为什么那么丑?
我在有一段时间也曾经被这个问题困扰过,虽然浏览内核利用GPU可能没有直接在系统层利用GPU的性能来的那么澎湃,但是总不至于同一个模型,渲染出来的效果天差地别吧。直到我在这几年一步一步使用three.js才逐渐明白如何有效地提升渲染效果的细节,本文将慢慢的说出一些细节的关键。
在本文中所使用的three.js版本为r144。
1 THREE.WebGLRenderer的参数设置
THREE.WebGLRenderer
对象的参数设置非常影响渲染效果。
其官方文档链接如下:https://threejs.org/docs/#api/zh/renderers/WebGLRenderer
要想获得比较好的渲染效果,对THREE.WebGLRenderer
可进行以下参数设置。
var renderer;
renderer = new THREE.WebGLRenderer({
antialias:true
});
renderer.physicallyCorrectLights = true;
renderer.setPixelRatio( window.devicePixelRatio * 2);
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
renderer.outputEncoding = THREE.sRGBEncoding;
document.body.appendChild(renderer.domElement);
上述设置中,
1. 抗锯齿
renderer = new THREE.WebGLRenderer({
antialias:true,
//alpha:true
});
将antialias
设置为true表示开启抗锯齿。
2. 物理灯光
renderer.physicallyCorrectLights = true;
表示将启用正确的物理灯光。
3. 像素采样率
renderer.setPixelRatio( window.devicePixelRatio * 2);
表示使用2倍设备像素点采样,这有利于消除锯齿获得更加高质量的效果。
4. 阴影贴图
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
上述设置表示启用阴影贴图,并将阴影贴图类型设置为THREE.PCFSoftShadowMap,其中不同阴影贴图类型的设置如下:
- THREE.BasicShadowMap:能够给出没有经过过滤的阴影映射,速度最快,但质量最差
- THREE.PCFShadowMap:默认值,使用Percentage-Closer Filtering (PCF)算法来过滤阴影映射
- THREE.PCFSoftShadowMap:和PCFShadowMap一样使用 Percentage-Closer Filtering (PCF) 算法过滤阴影映射,但在使用低分辨率阴影图时具有更好的软阴影
- THREE.VSMShadowMap:使用Variance Shadow Map (VSM)算法来过滤阴影映射。当使用VSMShadowMap时,所有阴影接收者也将会投射阴影
5. 色彩映射
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
设置这个属性主要是为了在普通计算机显示器或者移动设备屏幕等低动态范围介质上,模拟、逼近高动态范围(HDR)效果。
这个属性如果要生效就是需要将hdr贴图作为场景的环境贴图,获取IBL的光照效果。使用hdr贴图作为场景的环境贴图也将大幅度提升场景或者模型的渲染效果。
其中toneMapping
算法可选择:
- THREE.NoToneMapping
- THREE.LinearToneMapping
- THREE.ReinhardToneMapping
- THREE.CineonToneMapping
- THREE.ACESFilmicToneMapping
这里我们使用的是效果最好的ACES
算法,当然你也可以自定义自己的tonemapping算法,如何自定义可参考官方示例。
而toneMappingExposure
表示曝光级别,值越大曝光程度越高,场景中的光线越充足,模型就越亮。
6. 渲染器输出编码
renderer.outputEncoding = THREE.sRGBEncoding;
设置渲染器的输出编码,默认的输出编码为THREE.LinearEncoding
,我们这里设置为THREE.sRGBEncoding
。
2 调整贴图的encoding
three.js将贴图的编码都默认设置为THREE.LinearEncoding
,导致图片色彩失真(色彩不像正常那么鲜艳,会灰蒙蒙的),所以务必将场景中的所有贴图的编码都调整为THREE.sRGBEncoding
。
1. 贴图修改encoding
const textureLoader = new THREE.TextureLoader();
textureLoader.load( "./model_D.png", function(texture){
texture.encoding = THREE.sRGBEncoding;
});
2. 环境贴图修改encoding
const hdrUrl = './res/hdr/ballroom_1k.hdr'
new THREE.RGBELoader().load(hdrUrl, texture => {
const gen = new THREE.PMREMGenerator(renderer)
envMap = gen.fromEquirectangular(texture).texture;
envMap.encoding = THREE.sRGBEncoding;
scene.environment = envMap;
scene.background = envMap;
texture.dispose();
gen.dispose();
})
3 场景中的光照调整
3.1 固定光源
3.1.1 环境光 AmbientLight
环境光会均匀的照亮场景中的所有物体,环境光不能产生阴影,因为环境光没有方向。
const light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
3.1.2 半球光 HemisphereLight
半球光同样也是照亮场景中的所有物体,并且光照颜色会从天空光照颜色慢慢的渐变到地面光照颜色。
const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );
3.1.3 平行光,定向光 DirectionalLight
平行光是沿着特定方向发射的光。这种光的表现像是无限远,发出的平行光线,常常用来模拟太阳光。
平行光可以产生阴影,所以我们可以对平行光的阴影进行更多的设置。
const directional_light = new THREE.DirectionalLight( 0xffffff, 1 );
directional_light.position.set( 0, 1, 0 );
directional_light.castShadow = true;
scene.add( directional_light );
directional_light.shadow.mapSize.width = 512 * 2;
directional_light.shadow.mapSize.height = 512 * 2;
directional_light.shadow.bias = 0.05;
directional_light.shadow.normalBias = 0.05;
directional_light.shadow.camera.near = 0.5;
directional_light.shadow.camera.far = 500;
3.1.4 点光源 PointLight
点光源为为一个点向各个方向发射的光源,可以理解为一个灯泡发出的光。
点光源同样也可以产生阴影,所以我们也可以对点光源的阴影进行更多设置。
const point_light = new THREE.PointLight( 0xffffff, 1, 100 );
point_light.position.set( 0, 10, 4 );
point_light.castShadow = true;
scene.add( point_light );
point_light.shadow.mapSize.width = 512 * 2;
point_light.shadow.mapSize.height = 512 * 2;
point_light.shadow.bias = 0.05;
point_light.shadow.normalBias = 0.05;
point_light.shadow.camera.near = 0.5;
point_light.shadow.camera.far = 500;
3.1.5 聚光灯 SpotLight
聚光灯光线从一个点沿一个方向射出,随着光线照射的变远,光线圆锥体的尺寸也逐渐增大。
聚光灯同样也可以产生阴影,所以我们也可以对点光源的阴影进行更多设置。
const spot_light = new THREE.SpotLight( 0xffffff );
spot_light.position.set( 100, 1000, 100 );
spot_light.castShadow = true;
scene.add( spot_light );
spot_light.shadow.mapSize.width = 512 * 2;
spot_light.shadow.mapSize.height = 512 * 2;
spot_light.shadow.camera.near = 500;
spot_light.shadow.camera.far = 4000;
spot_light.shadow.camera.fov = 30;
3.1.6 区域光 RectAreaLight
区域光不支持阴影,因此没有更多的阴影设置。
const width = 10;
const height = 10;
const intensity = 1;
const rect_light = new THREE.RectAreaLight( 0xffffff, intensity, width, height );
rect_light.position.set( 5, 5, 0 );
rect_light.lookAt( 0, 0, 0 );
scene.add( rect_light )
3.2 IBL(基于图像的光照)
基于图像的光照(Image based lighting, IBL)通过一张环境贴图(Environment Map)来保存物体周围的环境信息,并通过一系列处理模拟真实环境中的光照效果。IBL与固定光源相比能够提供更加真实的光照效果,所以如果你用固定光源得到的效果很差,可以使用一张好的hdr作为场景的环境贴图,相信渲染效果会更加真实。
这里我们一般使用hdr作为我们的环境贴图,找好符合场景渲染要求的hdr环境贴图,然后设置场景的toneMapping,
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1.0;
然后加载hdr环境贴图,如下:
const hdrUrl = './res/hdr/ballroom_1k.hdr'
new THREE.RGBELoader().load(hdrUrl, texture => {
const gen = new THREE.PMREMGenerator(renderer)
envMap = gen.fromEquirectangular(texture).texture;
envMap.encoding = THREE.sRGBEncoding;
envMap.material = THREE.EquirectangularReflectionMapping;
scene.environment = envMap;
scene.background = envMap;
texture.dispose();
gen.dispose();
})
然后修改场景中所有的mesh的材质的环境贴图
scene.traverse(child => {
if (child instanceof THREE.Mesh) {
child.material.envMap = envMap;
child.material.envMapIntensity = envMapIntensity;
child.material.needsUpdate = true;
child.castShadow = true;
child.receiveShadow = true;
}
})
4 加载模型的设置
在加载模型时也需要对模型进行一些设置才能有好的效果,如何设置可参考以下代码
new THREE.GLTFLoader().load('./example.glb', result => {
model = result.scene || result.scenes[0];
model.traverse(child => {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
if(child.material.map)
{
child.material.map.encoding = THREE.sRGBEncoding;
child.material.map.anisotropy = 1;
}
if (child.material.emissiveMap)
{
child.material.emissiveMap.encoding = THREE.sRGBEncoding;
}
if (child.material.map || child.material.emissiveMap)
{
child.material.needsUpdate = true;
}
if(envMap)
{
child.material.envMap = envMap;
child.material.envMapIntensity = 1;
}
}
});
在加载模型完成之后,需要遍历模型的所有网格,并将所有网格材质的贴图的encoding修改为THREE.sRGBEncoding
,然后设置所有网格材质贴图的环境贴图以及强度。
5 三维模型
如果想要获取逼真的渲染效果,建议使用gltf格式的三维模型文件。如果你的模型不是gltf格式的可以先导入Blender,然后新增材质并添加模型的纹理,基本上在Blender中是什么渲染效果那么导入到three.js中就可以维持相同的渲染效果。
参考链接
当前分类随机文章推荐
- ThreeJS - FBXLoader: TGA loader not found, creating placeholder texture for ... 阅读676次,点赞0次
- ThreeJS - 使用自定义Shader 阅读734次,点赞2次
- ThreeJS - 修复摄像机近距离模型或者摄像机在某些观察角度3D模型部分或者全部不可见的问题 阅读539次,点赞1次
- ThreeJS - three.moudle.js报Uncaught SyntaxError:Unexpected token ‘export‘错误 阅读1953次,点赞0次
- ThreeJS - 如何提升three.js的渲染效果?看完这篇你可能会有启发 阅读3708次,点赞0次
- ThreeJS - 动态更换fbx模型的某个子Mesh现有的纹理贴图为指定的纹理贴图 阅读2803次,点赞1次
- ThreeJS - 设置透明背景模仿L2Dwidget.js看板娘渲染效果 阅读527次,点赞0次
- ThreeJS - 获取当前使用的three.js的版本 阅读514次,点赞0次
- ThreeJS - 使用Hdr环境贴图作为间接光照对模型进行渲染 阅读1740次,点赞3次
- ThreeJS - 直接设置Fbx模型的某个关节的位移和旋转值 阅读1797次,点赞0次
全站随机文章推荐
- 常见的三维点云数据下载链接,自己整理+网上收集 阅读109740次,点赞49次
- 资源分享 - Ray Tracing from the Ground Up 英文高清PDF下载 阅读1768次,点赞0次
- 深度学习 - 归纳轻量级神经网络(长期更新) 阅读215次,点赞0次
- C++STL容器 - std::map删除指定元素 阅读2134次,点赞0次
- Chrome中播放时视频编码为.h264和音频编码为acc,采样率为48000,双通道的视频文件时音画不同步 阅读4132次,点赞1次
- 资源分享 - Real-Time Cameras - A Guide for Game Designers and Developers 英文高清PDF下载 阅读2127次,点赞0次
- 资源分享 - Vulkan Cookbook - Work through recipes to unlock the full potential of the next generation graphics API-Vulkan 英文高清PDF下载 阅读2338次,点赞0次
- 资源分享 - OpenGL Development Cookbook 英文高清PDF下载 阅读1387次,点赞0次
- Python - 配置Yolov5出现ImportError: cannot import name 'PILLOW_VERSION' from 'PIL'错误 阅读1316次,点赞0次
- 资源下载 - 地球编年史1-7本高清带书签PDF下载 阅读14915次,点赞21次
评论
169