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"。

<!-- 引入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>
<!-- HDRCubeTextureLoader.js依赖RGBELoader.js -->
<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资料，欢迎关注我的个人技术博客