CODEWITHSUNDEEP
javascriptcssthree.js
barney.balazs
barney.balazs

Reputation: 640

Setting image as three.js scene background makes it blurry

I have an image that I'd like to set as a background for my scene. My problem is that when I do it the following way, the image becomes blurry:

textureLoader.load("images/background/space.png", function(t) {
  scene.background = t;
});

The issue is not the image itself if I set it as the canvas's background or just add it to the scene as a mesh, it's fine, however that's not an acceptable solution in my use case, because I need to use lensflare and glow effects, but blending only works if the background for the scene is set, otherwise this happens:

enter image description here

Adding the image as a mesh to the scene also wouldn't work, because the camera is rotated when the mouse is moved and I don't want the image to move, it should behave as a background.

The difference between blurry and not blurry is really noticeable. Below is part of the image when it's blurry and when it's not.

Blurry:

enter image description here

Crispy:

enter image description here

I tried setting this background multiple times (as scene background, camera background, canvas background from CSS), hoping that one would be above the scene background, but it's not so. I also looked through scene.background's properties, but nothing caught my eye (tried setting anisotropy to a high value).

Is there a way to stop the scene background from becoming blurry?

Upvotes: 4

Views: 4714

Answers (2)

Jerry Green
Jerry Green

Reputation: 1485

In my exact case I had pixelated image, and wanted to zoom a lot, while not having any blurring at all. Was able to do it with:

texture.magFilter = NearestFilter

Take note that it's magFilter, not minFilter

Upvotes: 2

M -
M -

Reputation: 28462

Three.js usually resizes their images so they're a power-of-two (256, 512, 1024, etc...) to allow for mipmapping. Since you're uploading an image that's 857px tall, it'll be downsampled to the nearest POT, which is 512px tall. That's why you're seeing a drop in resolution. There are two alternatives to fixing your issue:

  1. Upload a PNG that's a POT. Given your source file, you should be able to export a 2048x1024 image.

  2. Disable mipmapping by changing the minification filter of your texture to something that does not use mipmaps, like LinearFilter or NearestFilter:

var bgTexture = new THREE.TextureLoader().load("images/background/space.png");
bgTexture.minFilter = THREE.LinearFilter;
scene.background = bgTexture;

The downside to disabling mipmapping is that you might see aliasing if the texture gets too small, but you should be fine if it's occupying the whole background. You can read more about minification filter options in the textures constants page in the "Minification Filters" section.

Upvotes: 7

Related Questions