Spherical Background Texture - Stars are Fuzzy - r152 problem

Questions
1

I have created a display of earth from space. The background texture I am using is a texture of the stars from NASA. This is a spherical map, so I am displaying it by creating a large sphere and mapping the texture on the inside.

At one time, this display was sharp with stars as pinpoints. But now the stars are showing up as fuzzy white blobs: Here is a comparison with the original jpg texture (x200%) on the left and how the same texture appears in the program on the right:

NightSky
NightSky988Ă—434 240 KB

I think I have inserted all the necessary ColorSpace commands. In the render definition, I have:

	renderer.outputColorSpace = THREE.SRGBColorSpace;

Here is the subroutine where I create a sphere to act as my background and load the texture:

function loadSkyBox() {
	geometry = new THREE.SphereGeometry(16000, 256, 256);
	material = new THREE.MeshBasicMaterial({
		map:loader.load("../3js/common/sky/box/milkyway/milkyway4k.jpg"),
		side: THREE.BackSide
	});
	material.format = THREE.RGBAFormat;
	material.colorSpace = THREE.SRGBColorSpace;
	mesh = new THREE.Mesh(geometry, material);
	mesh.rotation.y = 180*DegRad;
	skyobj.add(mesh);	// I could probably just use scene.add(mesh)
}

I assume that MeshBasicMaterial is okay, since I don’t want any reflections.

2

try:


		map:loader.load("../3js/common/sky/box/milkyway/milkyway4k.jpg",(texture)=>{
texture.magFilter=THREE.NearestFilter;
}),
1 Like
3

Good thought!
However, that didn’t fix the problem. Just to be thorough, I also tried all the variations for minFilter.

It appears that the problem arises with r152.
Here is the r151 version that works perfectly.
Here is the r152 version with the commands above that shows fuzzy stars.

Apparently, I did not make one of the changes required by r152?.

EDIT:
And now that I am re-reading about the changes to r152, those RGBA and ColorSpace instructions may not even be necessary since both are default settings. So perhaps I should have normally expected to be able to simply change versions with no change to the display. But, for some reason, that did not happen and, apparently, some change is required.

4

Updates to Color Management in three.js r152 says:

so you might want to undo these in the app

1 Like
5

You mean undo the changes made by r152?

I suppose I could. But I was hoping to be able to find a solution that uses the ColorManagement.

6

@phil_crowther I think you may have accidently overlooked something here, you’re setting colorSpace on the material yet it should probably be on the material.map…

Give the material.map.colorSpace a try with both SRGBColorSpace and LinearSRGBColorSpace

Also as @manthrax has suggested you may want to apply the colorSpace change in a callback once the texture has loaded :slight_smile:

2 Likes
7

That was it! I merely needed to insert the reference to “map” in the line.

So, as @makc3d suggested, I also deleted all the other references to “rendererer.outputColorSpace” in the setup and to “material.format” in the subroutine, since those are now default.

The subroutine is now:

function loadSkyBox() {
	// SkySphere	
	geometry = new THREE.SphereGeometry(16000, 256, 256);
	material = new THREE.MeshBasicMaterial({
		map:loader.load("../3js/common/sky/box/milkyway/milkyway4k.jpg"),
		side: THREE.BackSide
	});
	material.map.colorSpace = THREE.SRGBColorSpace;	// ### r152 [fixed]
	mesh = new THREE.Mesh(geometry, material);
	mesh.rotation.y = 180*DegRad;
	skyobj.add(mesh);
}

I agree that I should also be able to implement it as a callback as @manthrax suggested.

Thanks all!

1 Like