# HDR image display problem

**URL:** <https://discourse.threejs.org/t/hdr-image-display-problem/18244>\
**Category:** Questions\
**Tags:** hdr\
**Created:** [August 28, 2020, 3:05pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244 "2020-08-28T15:05:39Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 28, 2020, 3:05pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/1 "2020-08-28T15:05:39Z")

</div>

Why is there a big color difference between three.js and JPG after uploading HDR images? How to solve the chromatic aberration problem of HDR images?  
How to make HDR image and JPG color display the same?

 ![微信图片_20200828225857](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c08c8aa4dd3ff67ac6b18227230144b2b376bbde.jpeg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 28, 2020, 3:16pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/2 "2020-08-28T15:16:01Z")

</div>

Can you please share both textures in this topic HDR (JPG)?

BTW: I don’t think the term “chromatic aberration” is correct in this context. Seems more like a color space issue.

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 28, 2020, 3:24pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/3 "2020-08-28T15:24:08Z")

</div>

[HDR测试.hdr](https://discourse.threejs.org/uploads/short-url/gZ6ZMBi21l34dGBZu74DZYKB68z.hdr) (1.8 MB)

 ![JPG测试](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6c3c8efa6f8e8a4eced0bb2c758c84bc0781b00f.jpeg)

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 28, 2020, 3:25pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/4 "2020-08-28T15:25:55Z")

</div>

Please test it in three.js to see the effect. I hope that the display effect of HDR and JPG images is consistent. Should I adjust the settings?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 28, 2020, 3:38pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/5 "2020-08-28T15:38:11Z")

</div>

It seems this is problem in the editor. Please try it with this code instead:

```javascript
import * as THREE from '../build/three.module.js';
import { RGBELoader } from './jsm/loaders/RGBELoader.js';

var camera, scene, renderer;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.z = 4;

	scene = new THREE.Scene();

	var geometry = new THREE.SphereBufferGeometry( 1, 16, 12 );

	new THREE.TextureLoader().load( 'textures/horizon.jpeg', function ( ldrtexture ) {

		ldrtexture.encoding = THREE.sRGBEncoding;

		var sphere1 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: ldrtexture } ) );
		sphere1.position.x = 2;
		scene.add( sphere1 );

	} );
	new RGBELoader().setDataType( THREE.UnsignedByteType ).load( 'textures/horizon.hdr', function ( hdrtexture ) {

		var sphere2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: hdrtexture } ) );
		sphere2.position.x = - 2;
		scene.add( sphere2 );

	} );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.outputEncoding = THREE.sRGBEncoding;
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.toneMappingExposure = 2;
	document.body.appendChild( renderer.domElement );

	//

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );
	renderer.render( scene, camera );

}

```

You should see:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a796e3dedd72d5218853d830e1e3a5700ea05156.jpeg)

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 28, 2020, 3:41pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/6 "2020-08-28T15:41:57Z")

</div>

Ok i try, thanks

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 28, 2020, 3:48pm UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/7 "2020-08-28T15:48:19Z")

</div>

Fix for the editor:

> <https://github.com/mrdoob/three.js/pull/20214>

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 29, 2020, 1:45am UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/8 "2020-08-29T01:45:44Z")

</div>

This is the code you gave me. The picture shows that the color is close to the original picture, but the color space of the overall scene has changed, and the color value is wrong. What should I do? Thank you

 ![微信图片_20200829094244](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/67717a2519421d89dbf8abb5a07317270d4353ad.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 29, 2020, 8:43am UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/9 "2020-08-29T08:43:06Z")

</div>

The above code is a typical configuration for PBR scene. That means color values have to be in sRGB space. You can convert an existing color value in linear space to sRGB via: `new THREE.Color( 0x666666 ).convertLinearToSRGB()`.

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 29, 2020, 8:52am UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/10 "2020-08-29T08:52:52Z")

</div>

Hello, is the Camma value of this ray tracing renderer not allowed to be adjusted now?

> **[hoverinc/ray-tracing-renderer](https://github.com/hoverinc/ray-tracing-renderer/wiki/RayTracingRenderer)**
>
> EXPERIMENTAL: Real-time path tracing on the web with three.js - hoverinc/ray-tracing-renderer

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [August 29, 2020, 8:54am UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/11 "2020-08-29T08:54:18Z")

</div>

Sorry, I don’t know this project.

---

<div class="post-metadata">

**Author:** ![hello](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@hello](https://discourse.threejs.org/u/hello)\
**Post date:** [August 29, 2020, 8:57am UTC](https://discourse.threejs.org/t/hdr-image-display-problem/18244/12 "2020-08-29T08:57:34Z")

</div>

Oh ok thanks