Saturation & brightness

[curvata]

Hello, I can’t get the same rendering on my three.js.

Can you help me ?

MY THREE.JS

OTHER 360

class scene 
{
	constructor(image) {
		this.image = image
		this.scene = null
		this.sprites = []
		this.controls = null
		this.raycaster = new THREE.Raycaster();
	}

	createScene () {
		this.scene = new THREE.Scene()

		const texture = new THREE.TextureLoader().load('images/'+this.image);
		texture.wrapS = THREE.RepeatWrapping;
		texture.repeat.x = -1;
		
		const sphere = new THREE.SphereGeometry(50, 32, 32);
		const material = new THREE.MeshBasicMaterial( 
			{ 
				map: texture,
				side: THREE.BackSide,
			} );
		
		this.scene.add(new THREE.Mesh(sphere, material));
		return this.scene;
	}

	addToolTip (array){
		array.forEach(element => {
			let map = new THREE.TextureLoader().load('images/button.png');
			let materialSprite = new THREE.SpriteMaterial({ map: map });
			let sprite = new THREE.Sprite(materialSprite);
			sprite.name = element.name;
			sprite.scale.multiplyScalar(2);
			sprite.position.copy(element.position.clone().normalize().multiplyScalar(40));
			this.scene.add(sprite);
			this.sprites.push(sprite)
		})
	}

	hoverToolTip (e, camera) {
		let radiciinfo = document.querySelector('.radici')
		let mouse = new THREE.Vector2(
			(e.clientX / window.innerWidth) * 2 - 1, 
			- (e.clientY / window.innerHeight) * 2 + 1
		)
	
		this.raycaster.setFromCamera(mouse, camera);
		let intersects = this.raycaster.intersectObjects(this.scene.children);
	
		let foundSprite = false
		let Tooltip = false
	
		intersects.forEach(element => {
			if (element.object.type === "Sprite") {
				let p =  element.object.position.clone().project(camera);
				radiciinfo.style.top = ((-1 * p.y +1) * window.innerHeight / 2) + 'px';
				radiciinfo.style.right = ((-1 * p.x +1) * window.innerWidth / 2) + 'px';
				foundSprite = true;
				Tooltip = true;
			}
		});
	
		if (foundSprite, Tooltip) {
			radiciinfo.classList.add("isActive");
		} else {
			radiciinfo.classList.remove("isActive");
		}
	}

	clickToolType (e, camera) {
		let mouse = new THREE.Vector2(
			(e.clientX / window.innerWidth) * 2 - 1, 
			- (e.clientY / window.innerHeight) * 2 + 1
		)
	
		this.raycaster.setFromCamera(mouse, camera);
		let intersects = this.raycaster.intersectObjects(this.scene.children);
		
		intersects.forEach(element => {
			if (element.object.type === "Sprite") {
				
			}
		});
	}
}

let scene1 = new scene('test.jpg')
let sceneef = scene1.createScene()
scene1.addToolTip(
	[{
		position: new THREE.Vector3(-8.301313896931159,-3.746863768203316,48.998320776189075),
		name: 'radici'
	}]
)

let camera =  new THREE.PerspectiveCamera(71, window.innerWidth / window.innerHeight, 0.1, 1000 )
camera.position.set(0.1, 0, 0);

const renderer = new THREE.WebGLRenderer({
	antialias: true,
 });

renderer.setSize( window.innerWidth, window.innerHeight );
const container = document.body.appendChild(renderer.domElement);
renderer.setPixelRatio(window.devicePixelRatio);

function resize() {
	renderer.setSize(window.innerWidth, window.innerHeight);
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
}

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 0.4;
controls.enableZoom = false;
controls.update();

function animate() {
	requestAnimationFrame(animate);
	renderer.render(sceneef, camera);
};

animate();

window.addEventListener("resize", resize);
container.addEventListener("mousemove", (e) => scene1.hoverToolTip(e, camera));
container.addEventListener("click", (e) => scene1.clickToolType(e, camera));

[drcmda]

your threejs scene looks a lot more realistic and natural. are you sure about this?

otherwise, i would suggest getting color space right first, these settings give you a baseline that’s comparable to what you get in blender + filmic.

THREE.ColorManagement.legacyMode = false

renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping

and everything else from there on is usually being handled in postpro.

[donmccurdy]

In this case, because lighting is part of the image and not the rendering process, I’d omit ACESFilmicToneMapping unless you’re starting from a linear open domain [0, ∞] texture (.exr or .hdr), which this doesn’t appear to be. If you like the effect of ACES Filmic that’s fine, but it’s not necessary here as it would be in a lit scene.

For [0,1] formats like PNG and JPEG, you likely need to specify:

texture.encoding = THREE.sRGBEncoding

These images look really similar though, and I don’t have a strong guess as to what’s causing the difference. While you can use post-processing to change saturation and brightness, it’d be easier to do that to the image instead of doing it in WebGL, and it should be a last resort after color management settings are correct.

Do both 360º viewers take the same input images, and if so can you share an image? I am kind of wondering if the second viewer might have wide gamut Display P3 support, but it’s not possible to determine that from an sRGB screenshot of the viewer.