I have doing some research on three.js to display 3D model on webpage and I succeeded. However, the load time (preprocessing time) is pretty slow as you can see from here the load time is 11+ seconds and my file size is 69.5MB; during that moment I also cannot do other action on webpage like click the button, write something on textbox or etc. I tried to search for the solutions to reduce the load time but most solutions are reduce my file size but the resolution will be reduced too.
So my questions are:
How to reduce the load time (preprocessing time) without reducing file size?
How to load models asynchronously so that i can do other action on the webpage?
Thank you.
Related
I need to render several pages of a PDF document each one at a set of different resolutions.
Due to complexity of pages the rendering is very CPU intensive and time consuming.
As execution time matters I was thinking to speed up things by rendering each page at the highest resolution and then producing the lower resolution pages by just downscaling them.
Is there a difference from the lo-res pages produced with the two procedures?
How does the lower-res downsampled images appear / "look like" compared to the same-res rendered ones?
I'm on macOS so I'm using OS's libraries for both PDF rendering and image downsampling.
Please, don't blame for not having done tests myself. I just thought that maybe someone has already done that. If not I'll write the test and asnwer my own question.
I am loading a ThreeJS scene on a website and I would like to optimize it depending on the capacity of the graphic card.
Is there a way to quickly benchmark the client computer and have some data that will let me decide how demanding or simple has to be my scene in order to run at a decent FPS ?
I am thinking of a benchmark library that can be easily plugged or a benchmark-as-a-service. And it has to run without the user noticing.
you can use stats.js to monitor performance. it is used in almost all threejs examples and is inluded in the treejs base.
the problem with this is that the framerate is locked to 60fps, so you cant tell how much ms get lost by vsynch
the only thing i found to be reliable is take the render time and increase quality if its under a limit, decrease it if it takes too long
I am building a web application which will display a large number of image thumbnails as a 3D cloud and provide the ability to click on individual images to launch a large view. I have successfully done this in CSS3D using three.js by creating a THREE.CSS3DObject for each thumbnail and then append the thumbnail as an svg:image.
It works great for upto ~1200 thumbnails and then performance starts to drop off (very low FPS and long load time). By the time you hit 2500 thumbnails it is unusable. Ideally I want to work with over 10k thumbnails.
From what I can tell I would be able to achieve the same result by creating each thumbnail as a WebGL mesh with texture. I am a beginner with three.js though, so before I put in the effort I was hoping for guidance on whether I can expect performance to be better or am I just asking too much of 3D in the browser?
As far as rendering goes, CSS3 should be relatively okay for rendering quite big amount of "sprites". But 10k would probably be too much.
WebGL would probably be a better option though. You could also take care about further optimizations, storing thumbnails in atlas texture or such...
But rendering is just one part. Event handling can be serious bottleneck if not handled carefully.
I don't know how you're handling mouse clock event and transition towards fullsize image, but attaching event listener to each of 2.5k+ objects probably isn't a good choice anyway. With pure WebGL you could use imagespace for detecting clicked object. Encoding each tile with different id/color and using that to determine what's clicked. I imagine that WebGL/CSS3D combo could use this approach as well.
To answer question, WebGL should handle 10k fine. Maybe you'll need to think about some perf optimization if your rectangles are big and they take a significant amount on the screen, but there are ways around it if that problem appears.
I'm about to perform some benchmark experiments for WebGL (Three.js). I'm thinking about loading time (from link click to loaded scene), loading time for files, and frame rate.
With many tests I must gather statistics which can be put into diagrams. All I have now is a FPS counter. Are there some good scripts to use for this?
What I need is a way of saving fps number each frame to a text file.
And time counters for loading scene and files.
Please help!
My program save images from a camera in a rate about 30fps;
Moving these images or browsing them by windows explorer take a long time.
My questions is:
is storing them as a video file is a better approach? so moving files wouldn't take a lot of time. (if this is good, how to open a large video file and get a specified frame number fast? Is this approach faster?)
It's very unlikely that a video file will load or seek any faster than individual image files. Not to mention this is going to be a lot more difficult to handle than images, and probably introduce a bunch of extra, unnecessary dependencies to your application.
If you really need a way to speed up image browsing, you should look into generating separate thumbnail images. Thumbnails are exact duplicates of the original images, but with significant reductions in size and quality, suitable for display purposes only. This makes the resulting thumbnail images significantly smaller than the originals, which should speed up their loading and rendering substantially. This trick is used all over graphics packages and file managers. This approach allows you to delay the expensive process of loading the associated full image until after the user selects a particular thumbnail image to open.