Problem with skydom hdri encoding

Questions
, ,
1

hi all
i’m trying to assign hdri texture to my skydome geometrie
this the code i use for it

function skydomHDR(object) {
    new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('./img/env/').load('venice_sunset_2k.hdr', function (texture) {
        
        texture.flipY = false;
        texture.anisotropy = 2;
        texture.minFilter = THREE.NearestFilter;
        texture.magFilter = THREE.NearestFilter;
        texture.encoding = THREE.sRGBEncoding
        object.material.map = texture;
        object.material.needsUpdate = true
    });
}

and this what i have

Capture
Capture1113×801 106 KB

2

RGBE textures are never sRGB encoded. For UnsignedByteType, it should be THREE.RGBEEncoding. That’s already the default when using RGBELoader and the unsigned byte data type so just don’t touch the encoding property.

3

thank you for your replay

function skydomHDR(object) {
    new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('./img/env/').load('venice_sunset_2k.hdr', function (texture) {
        texture.flipY = false;
        texture.anisotropy = 2;
        object.material.map = texture;
    });
}

i try it without the encoding and it give me the some

4

Do you mind sharing your entire code as a live example that demonstrates the issue?

5

sure :slight_smile:

import * as THREE from './THREE/three.module.js';
import { GUI } from './THREE/dat.gui.module.js';
import { Water } from './THREE/Water.js';
import { Sky } from './THREE/Sky.js';
import { OrbitControls } from './THREE/OrbitControls.js';
import { RGBELoader } from './THREE/RGBELoader.js';

let container,camera, scene, renderer,controls, water, sun, mesh;
function skydomHDR(object) {
    new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('./img/env/').load('venice_sunset_2k.hdr', function (texture) {
        
        texture.flipY = false;
        //texture.anisotropy = 2;
        //texture.minFilter = THREE.NearestFilter;
        //texture.magFilter = THREE.NearestFilter;
        //texture.encoding = THREE.RGBEEncoding
		//texture.format = THREE.RGBFormat;
        object.material.map = texture;
        object.material.needsUpdate = true
    });
}
function loadEnvironmentHDR(renderer, scene, hdr) {
	var loaderhdr = new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('./img/env/').load(hdr, function (texture) {
		const pmremGenerator = new THREE.PMREMGenerator(renderer);
		var envMap_hdr = pmremGenerator.fromEquirectangular(loaderhdr);
		//var envMap_hdr= pmremGenerator.fromCubemap(loaderhdr);
		pmremGenerator.compileEquirectangularShader();
		texture.dispose();
		pmremGenerator.dispose();
		scene.environment = envMap_hdr.texture;
		//scene.background = envMap_hdr.texture;
	});
}
function init() {
container = document.getElementById('container');
////////// setup Renderer
renderer = new THREE.WebGLRenderer({ alpha: false, stencil: false,antialias:true,precision:"highp",powerPreference:"high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight, false);
container.appendChild(renderer.domElement);
renderer.toneMappingExposure = 1.0;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = false;
renderer.toneMapping = THREE.LinearToneMapping;
//renderer.toneMapping = THREE.ACESFilmicToneMapping;
////////// setup Scene
scene = new THREE.Scene();
scene.name = "Default-scene"
document.body.appendChild(container);
////////// setup Camera
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.name = "Default-camera"
camera.aspect = container.offsetWidth / container.offsetHeight;
camera.updateProjectionMatrix();
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.position.set( 30, 30, 100 );
scene.add(camera);
//////// setup OrbitControls
controls = new OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 10, 0 );
controls.minDistance = 40.0;
controls.maxDistance = 200.0;
controls.update();
/////// setup Water
const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );
water = new Water(
    waterGeometry,
    {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader().load( 'img/waternormals.jpg', function ( texture ) {texture.wrapS = texture.wrapT = THREE.RepeatWrapping;}),
        sunDirection: new THREE.Vector3(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 3.7,
        fog: scene.fog !== undefined
    }
);
water.rotation.x = - Math.PI / 2;
scene.add( water );
////// setup Skybox
const sky = new Sky();
sky.scale.setScalar( 10000 );
//scene.add( sky );
const skyUniforms = sky.material.uniforms;
skyUniforms[ 'turbidity' ].value = 10;
skyUniforms[ 'rayleigh' ].value = 2;
skyUniforms[ 'mieCoefficient' ].value = 0.005;
skyUniforms[ 'mieDirectionalG' ].value = 0.8;

const parameters = {elevation: 2,azimuth: 180};
const pmremGenerator = new THREE.PMREMGenerator( renderer );
function updateSun() {
const phi = THREE.MathUtils.degToRad( 90 - parameters.elevation );
const theta = THREE.MathUtils.degToRad( parameters.azimuth );
sun.setFromSphericalCoords( 1, phi, theta );
sky.material.uniforms[ 'sunPosition' ].value.copy( sun );
water.material.uniforms[ 'sunDirection' ].value.copy( sun ).normalize();
scene.environment = pmremGenerator.fromScene( sky ).texture;
}
//updateSun();
loadEnvironmentHDR(renderer, scene, "venice_sunset_2k.hdr")

window.addEventListener( 'resize', onWindowResize );


//////// setup GUI
const gui = new GUI();
const folderMaterial = gui.addFolder( 'Material' );
const waterUniforms = water.material.uniforms;
const folderWater = gui.addFolder( 'Water' );
folderWater.add( waterUniforms.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
folderWater.open();
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {requestAnimationFrame( animate );render();}
function render() {
    water.material.uniforms[ 'time' ].value += 1.0 / 60.0;
    renderer.render( scene, camera );
}
init();
animate();