Skybox Texture Quality

Questions
,
1 
//****************************
//	Skybox for Background (360°)
//****************************

function loadBackground360(TextureName) {

	const loaderBG = new THREE.TextureLoader();
	const textureBG = loaderBG.load('textures/' + TextureName + '.jpg');

	textureBG.anisotropy = renderer.capabilities.getMaxAnisotropy()

	textureBG.magFilter = THREE.LinearFilter;
	textureBG.minFilter = THREE.LinearFilter;

	const shaderBG = THREE.ShaderLib.equirect;

	const materialBG = new THREE.ShaderMaterial({
		fragmentShader: shaderBG.fragmentShader,
		vertexShader: shaderBG.vertexShader,
		uniforms: shaderBG.uniforms,
		depthWrite: false,
		side: THREE.BackSide
	});

	materialBG.uniforms.tEquirect.value = textureBG;

	var planeBG = new THREE.BoxBufferGeometry(2000, 600, 2000);
	var bgMesh = new THREE.Mesh(planeBG, materialBG);

	scene.add(bgMesh);

}

I have a scene where you can select the background image, but regardless of the size I use for the texture image and BoxBufferGeometry, the texture is still of poor quality. Is there a trick to increase the quality or the level of compression?

Texture-Image-on-low-Quality
Texture-Image-on-low-Quality3126×1916 576 KB

2

How does it look like if you do this:

var options = {
    generateMipmaps: true,
    minFilter: THREE.LinearMipmapLinearFilter,
    magFilter: THREE.LinearFilter
};

scene.background = new THREE.WebGLCubeRenderTarget( 1024, options ).fromEquirectangularTexture( renderer, textureBG );

In this way you can use Scene.background and don’t need to create a custom shader.

4 Likes