I have scene with several floors.
When user first time changed floor to another with different texture atlas (2048px * 8192px) I have micro freeze (I think at this time three.js upload needed texture atlas to gpu).
How can I upload material texture at init state and not wait at render time?
Related
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?
I need to render a texture as a library of small parts, then copy each part to a set of different textures used in the scene. I think this is fundamental and I cannot find documentation specifically in three.js. Should I seek a solution in pure WEBGL, or is there a three.js solution?
EDIT:
One "solution" would be to set the UV coordinates of the target mesh (plane, whatever) to correspond only to the desired part of the big texture, but that would definitely be very inefficient, as it would require for each small mesh to load the whole big texture a huge waste of memory and GPU power as the whole big texture would be probably transformed multiple times(!), aside the inconvenience of setting the different UV coordinates on each mesh object.
So, I'm looking to copy and assign only a small part and occupy in memory and process only that part for each mesh.
I am trying to achieve this effect:
https://dl.dropboxusercontent.com/u/8554242/dmitri/projects/MotionBlurDemo/MotionBlurDemo.html
But I need it applied to my Three.js scene, specifically on a Point Cloud Material (particles) or the individual particles.
Any help greatly appreciated!
if you want the "physically correct" approach then
create a FIFO of N images.
inside each scene redraw (assuming constant fps)
if FIFO already full throw out the oldest image
put the raw rendered scene image in the FIFO
blend all the images in the FIFO together
If you have big N then to speed things up You can store also the cumulative blend image off all images inside FIFO. Adding inserted image to it and substracting removing image from it. But the target image must have enough color bits to hold the result. In such case you render the cumulative image divided by N.
render the blended image to screen
For constant fps is the exposure time t=N/fps. If you do not have constant fps then you need to use variable size FIFO and Store the render time along with image. If sum of render times of images inside FIFO exceeds the exposure time throw oldest image out...
This approach requires quite a lot of memory (the images FIFO) but does not need any additional processing. Most blur effects fake all this inside geometry shader or by CPU by blurring or rendering differently the moving object which affect performance and sometimes is a bit complicated to render.
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 want to view some rasters in my three.js scene.
I thought to use cesium for that, but it was too slow when I loaded more than 1000 moving objects to the scene.
So I decided to go back to three.js with some simple cylindrical projection.
Is there an easy way to do build something like "WmsMaterial" ?
The material has to take the textures from some wms or tile server like:
http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/4/5/9
And change the level of the tile according to the zoom level.
Any ideas how to do this in the simply ?
On the zoom changing, you can request the tile with a REST request and load it as texture then create a material with the texture. Manage a cache to not request a tile already downloaded