I'm using 3js to display a sphere with a large texture map (6000x3000) but the image is being displayed with a disappointingly low resolution.
I am migrating to 3js from directly managing my scene with webGL and my own shader program, but in there I was getting the texture displayed with high detail. I noticed that 3Js automatically resizes texture maps to powers-of-2 sizes, and it warned that it was resizing this image to 4096X2048.
When I externally resized my 6000x4000 image to 8192x4096, it no longer reported resizing, but the resolution remained poor: I would estimate at the equivalent of about 1024x512.
I'm running on a 27" Mac, with MAX_TEXTURE_SIZE 16384, so that's not the issue.
So Is there something I can do to improve the resolution from within 3js?
Related
I have a pretty strange behaviour with three.js when I try to load different textures for an environment cube map. Everything works fine till I try to test the same scene with larger textures. My camera is pretty much stable so I only have to change one side of the env cube to a large resolution texture as that will be the background of the scene which will be visible, the other 5 sides are small pngs - those are only visible in reflection.
There is no clear breaking point, what seems to usually work as an image for the env.cube is about 600x600px-ish, going any higher resulting in the scene loading completely black.
To make the scene look nice on most devices, I have to go up to a resolution around 1500x1500px (so not insanely large) for the background, and I have no idea why it breaks with a bigger image.
What I already tried/did:
image paths are fine, overwriting a working image to a larger version also breaks the scene.
I had no other idea what to try, maybe it has to do something with photoshop and its image encoding or something along those lines?
the scene contains:
a camera, a gltf model to test with and the environment cube. everything works perfect with small textures.
I already looked at the texture documentation of threejs and found nothing about what could cause this behaviour, I'm completely stuck.
I have a viewer with a perspective camera. I know the size of the viewer and the pixel ratio. I have several sprites in my scene that use the .sizeAttenuation property to never change size.
With all of this, I want to be able to set the scale of the sprite instances to, for example, be 20px x 20px. Is that possible? Is there a known conversion from pixels to sprite scale?
What I am experiencing now is that the sprites will change size depending on the viewer size. I wish to know how to resize them when the viewer changes so they are consistently the same size.
thanks!
I'm trying to create a short opener for a clip by using a plane and an animated texture. I created the animated texture sheet, frame by frame, in photoshop. It's a large texture, 12x12 frames. When I try playing it in unity, while it works, it is of a significantly lower quality.
I have seen posts about tweaking my import settings, but these are the only ones I see (no max size etc)
I did have to use an older version of unity to make it work with the rest of the project I was working on - is that the problem? I feel like even older versions should be capable of generating good quality
Disable mipmaps. Mipmaps are downsized versions of your texture used for rendering at different distances. If the distance you have your image from the camera is far enough, Unity will use one of those smaller versions, making it blurry.
Disable blend mode (set it to 'Point'). Bilinear Filtering slightly blurs textures so that they scale better or render at sub-pixel positioning better. However, this makes them less crisp.
You may want to set the texture mode from 'Default' to 'Sprite 2D' or 'GUI', I'm not sure what version of Unity you're on (2017?) as I don't recognize the layout of the inspector you have there. Sprite 2D settings tend to optimize for images that are intended to be pixel perfect, same goes for GUI textures.
I am using sprite sheets to create animated textures with THREE.js. Each sprite instance utilizes texture offsets to control which of the images to present that frame. Multiple animated sprites may be on the screen at once.
Currently I am using Texture.clone() to duplicate the sprite sheet texture. However, unless I set Texture.needsUpdate to true, the texture will not display on the sprites. Setting needsUpdate to true allows me to display multiple independent animated sprites at once, but unfortunately this causes the texture memory to be duplicate on the card (/ integrated chip). Using Chrome WebGL Inspector I can clearly see that the sprite texture has been duplicate the same number of times as animated sprites that have been rendered.
Is there any way to clone / reuse the texture with different offsets for each instance without duplicating the memory? Is this a bug or am I doing something wrong.
THREE.js r67
Update:
One way that we have gotten around this (not a great way I admit) is to duplicate the GL texture ID assigned to the original texture and set the cloned texture as being initialized.
clonedTexture.__webglTexture = origTexture.__webglTexture;
clonedTexture.__webglInit = true;
This requires that the texture has already been sent to the card, which we force with render.setTexture(origTexture...).
This is something that's in the works. Keep an eye for whenever THREE.Image lands.
I have some troubles about ensure the quality texture when zooming in the 3d model with texturing the image two-dimensional image in opengl ES while have decided to ask for help!
I have loading the .obj format text file and texturing by 1024*1024 image. I can arbitrary rotation and scale the 3d model with texture.But when scale to certain degree,texture is shown that low quality.
How can i ensure the high quality texture?
What good method to solve this problem?
Any pointers would be appreciated.
Thanks!