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?
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.
HDR测试.hdr (1.8 MB)
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?
It seems this is problem in the editor. Please try it with this code instead:
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:
Ok i try, thanks
Fix for the editor:
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
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().
Hello, is the Camma value of this ray tracing renderer not allowed to be adjusted now?
Sorry, I don’t know this project.
Oh ok thanks