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.
Related
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.
In the example program given here in Dart, why is the image texture initially upside down? It seems to be flipped upside down, not rotated. Why is that?
Here is the example running, I am talking about the cube texture on the first frame when you view it, before it rotates. I made an example based upon this but I am upset to find the texture flipped upside down.
In the example program given here in Dart, why is the image texture initially upside down?
For me, the example shows the texture upside down not only in the first frame but in all frames (by comparing the texture and the running example). I am not sure why you and I are seeing different things.
In any case, this seems to be an old bug in CubeGeometry in three.js, which was fixed in July 2012 but has not been fixed in three.dart.
I am working on a simple painting app using LibGDX, and I am having trouble getting it to "paint" properly with the setup I am using. The way I am trying to do this is to draw with sprites, and add these individual sprites into a background texture, using LibGDX's FBO commands, when it is appropriate.
The problem I am having is something relating to blending, in that when the sprites are added to this texture that I am building, any transparent pixels of the sprite that are on top of pixels that have been drawn to previous will be brightened up substantially, which obviously doesn't look very good. The following is what the result looks like, using a circle with a green>red gradient as the "brush". The top row is part of the background texture now, while the bottom one is still in its purely sprite drawn form.
http://i238.photobucket.com/albums/ff307/Muriako/hmm.png
Basically, the transparent areas of each sprite are brightening anything below them, and I need to make them completely transparent. I have messed around with many different blending mode combinations and couldn't find one that was any better. GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA for example did not have this problem, but instead the transparent pixels of each sprite seem to be lowered in alpha and even take on some of the color from the layer below, which seemed even more annoying.
I will be happy to post any code snippets on request, but my code has become a bit of mess since I started trying to fix these problems, so I would rather only put up the necessary bits as necessary.
What order are you drawing the sprites in? Alpha blending only works with respect to pixels already in the target, so you have to draw all alpha-containing things (and everything "behind" them) in Z order to get the right result. I'm using .glBlendFunc(GL10.GL_SRC_ALPHA, GL10.GL_ONE_MINUS_SRC_ALPHA);
I am using LibGDX for a small app project, and I need to somehow take a series of sprites and place them (or their pixels rather) into a Pixmap. The basic idea is to take random sprites that are generated through various means while the app is running, and, only at specific times, merge some of them onto a single background sprite.
I believe that most of this can be done easily, but the step of getting the sprite images into the Pixmap isn't quite so obvious to me. The sprites also have various transparent and semi-transparent pixels, so simply grabbing the color at each pixel while it is all on the same screen isn't really applicable either, as it obviously shouldn't take the background colors with it.
If there is a suitable alternative to this that would accomplish what I am looking for I would also love to hear it. Any help is highly appreciated.
I think you want to render your sprites to an off-screen buffer (called an "FBO" or FrameBuffer in libgdx) (blending them as they're added), and then render that offscreen buffer to the screen as a single draw call? If so, this question should help: libgdx SpriteBatch render to texture
This requires OpenGL ES 2.0, which will eliminate support for some older devices.