Threejs HDR
Threejs HDR
如果你不了解hdr的相关知识，可以查看下面链接提供的文章，本文主要讲解threejs中如何使用hdr贴图。
- 知乎——HDR 是什么？有哪些具体介绍？
- OpenGL HDR
- WebGL学习之HDR与Bloom
- OpenGL Bloom
- OpenGL-HDR和Bloom
examples相关案例
如果你想了解Threejs关于HDR的资料或说threejs加载HDR贴图的资料，可以在threejs
的案例examples搜索窗口中检索关键词hdr或者说软件包中通过代码编辑器全文检索关键词hdr，可以看到相关的案例，以threejs R106版本为例，可以查看到webgl_loader_texture_hdr、webgl_materials_envmaps_hdr、webgl_materials_envmaps_hdr_nodes等案例。
加载单张HDR纹理贴图(RGBELoader.js)
webgl_loader_texture_hdr案例加载了一张纹理贴图作为矩形网格模型的纹理贴图，也就是模型材质颜色贴图.map的属性值，可以通过调整曝光度参数查看显示效果。
通过threejs扩展库RGBELoader.js可以加载.hdr格式图像，hdr图像加载器RGBELoader.js地址见"js/loaders/RGBELoader.js"。
<script src="js/loaders/RGBELoader.js">script>
//创建hdr格式图像的加载器
var texLoader = new THREE.RGBELoader()
texLoader.load('./hdr图像/memorial.hdr', function(texture, textureData) {
var texture = texLoader.load('./hdr图像/memorial.hdr')
texture.encoding = THREE.RGBEEncoding;//设置编码属性的值
texture.minFilter = THREE.NearestFilter;//当一个纹素覆盖小于一个像素时，贴图将如何采样
texture.magFilter = THREE.NearestFilter;//当一个纹素覆盖大于一个像素时，贴图将如何采样
texture.flipY = true;//翻转图像的Y轴以匹配WebGL纹理坐标空间
// 加载.hdr贴图范围的纹理对象Texture作为.map的属性值
var material = new THREE.MeshBasicMaterial({
map: texture
});
// textureData.width / textureData.height表示图像宽高比
// 矩形几何体宽高比和图形的宽高比保持一致，避免图像显示伸缩
var geo = new THREE.PlaneBufferGeometry(textureData.width / textureData.height * 100, 1 * 100);
var mesh = new THREE.Mesh(geo, material);
scene.add(mesh)
});
通过WebGl渲染器WebGLRenderer的.toneMapping、.toneMappingExposure、.gammaOutput属性可以调整hdr贴图的显示效果。
// 色调映射属性.toneMapping用于在普通计算机显示器或者移动设备屏幕等低动态范围介质上，模拟、逼近高动态范围(HDR)效果
renderer.toneMapping = THREE.ReinhardToneMapping;
// 色调映射的曝光级别。默认是1,曝光度值越大，图像亮度越高
// 可以尝试不同值去测试显示效果 比如0:看不到 0.1:很暗 200:过于亮，轮廓感不清楚
renderer.toneMappingExposure = 2;
//是否乘以gamma输出，默认值false
renderer.gammaOutput = true;
加载6张HDR环境贴图(HDRCubeTextureLoader.js)
webgl_materials_envmaps_hdr案例加载了6张.hdr环境贴图。
通过threejs扩展库HDRCubeTextureLoader.js可以加载6张.hdr格式环境贴图，hdr环境贴图加载器HDRCubeTextureLoader.js地址见"js/loaders/HDRCubeTextureLoader.js"。
<script src="js/loaders/RGBELoader.js">script>
<script src="js/loaders/HDRCubeTextureLoader.js">script>
<script src="js/pmrem/PMREMGenerator.js">script>
<script src="js/pmrem/PMREMCubeUVPacker.js">script>
var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
// 返回立方体纹理贴图对象
var hdrMap = new THREE.HDRCubeTextureLoader()
.setPath( './textures/cube/pisaHDR/' )
.load( THREE.UnsignedByteType, hdrUrls, function () {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
pmremGenerator.dispose();
pmremCubeUVPacker.dispose();
} );
// 立方体纹理对象hdrMap作为scene的背景
scene.background = hdrMap;
更多Threejs资料，欢迎关注我的个人技术博客