I use three js, load textures and models from the server, immediately assemble meshes and render, the fact is that when there are a lot of my 4k textures, the page simply reloads without any error (on the iphone)
Related
Based on this sample link of progressive enhancement with React Suspense, I tried to use the method in my project with another .glb file.
I got the 3D model from Sketchfab with initial size of 10MB. With the help of Sqoosh and GLTF Report, I managed to reduce the final .glb size to around 1MB by optimizing all the jpeg/png images used by the model. Then, I made a smaller .glb size of 500kb for the 'blurrier version' fallback.
However, when my 1MB glb is successfully loaded, the whole canvas or frame freezes. This is entirely different compared to the smooth transition from the sample link where the lower-resolution model changes to higher-resolution model without a lag.
This gif below shows the lag/freeze when 1MB model(prettier version) is loaded. The lag is hard to be seen when testing in codesandbox.
CodeSandbox: https://codesandbox.io/s/brave-cache-e59q0o?file=/src/App.js&fbclid=IwAR0wTEkcs0cR1LX4O8YM4jVSZ8LsXhy8Rm51oTd7nIoqQMPiLnTGUCerk8I
It is more obvious when testing after building and serving file in localhost.
Trying with the model from the sample link
Low resolution glb size : 6kb
High resolution glb size : 10MB
Smooth transition when high resolution model is done loading in Suspense
User interaction continues to be detected when high resolution model is done loading in Suspense
Trying with model downloaded from Sketchfab
Low resolution glb size : 534kb
High resolution glb size : 1119kb
Lag when high resolution model is done loading in Suspense
User interaction is not detected when high resolution model is done loading in Suspense
When you load a more complex model you get larger textures and a higher polycount, probably also new shaders. All that data has to be transferred from your RAM to the GPU in order to be rendered, which creates a bottleneck. That's what creates that little moment of freeze, it's when the data is being transferred to the graphics card before it can be rendered.
This is a physical limitation that cannot be circumvented. The only thing you can do is preload all your models at the beginning of your experience. If you've played videogames, you'll have noticed a loading screen with a progress bar; that's the game pushing all its stage assets to the GPU so they're ready to be used in the middle of gameplay. You can do the same: first download your assets from the web, then push them to the GPU with renderer.compile(scene, cam), which uploads textures, geometries, shaders... everything in your scene so it's ready to fire when you need it without any freeze.
You can also initialize textures this way with renderer.initTexture() in a similar way.
Is there a way to programmatically free Image resources in nativescript-vue?
I can't use the RadListView or ListView in some situations because they have issues properly rendering some of my more-complex components. Instead, I'm using a ScrollView. Now my view renders correctly, but after a while the app runs out of memory due to all the images that are loaded (as the user scrolls more images are loaded).
I'd like to free memory for images that are not visible on the page. I know how to calculate when the image is off the page, but don't know how to remove or replace the element to free the memory.
Everything I've read says to use small images (I'm already optimizing them) and then the GC will cleanup resources that are no longer used. However, the images are still technically in use until the user navigates away from the page or I can find a way to remove them from the page.
I have a basic scene into wich I am loading objects using the JSONLoader. The objects themselves have very small footprint, for example: milk carton: 560kb with textures, 34 kb json file.
When rendering, let's say 10 new objects, if I orbit the camera to bring them into view, the animation loop freezes for a second or so. After this first freeze, the camera orbits smoothly no matter how many objects. Loading dynamically the objects would be a solution, but for my specific use case, I still need to load at least 50 objects at first load.
Update - I have added the preload functions I use in my production project, and I also added 21 different models just to illustrate my specific scenario. I have tried the following solution:
preloading the json files,
reading the source path to the textures,
loading them with texture loader,
overwritting the maps of the json material objects with the preloaded textures,
finally releasing the objects into scene. The same behavior occurs again.
Try to click the setCamera link to se how laggy it is. I need to cut this lag to 0ms. Thanks for support!
Working demo: http://demo.adrianmoisa.ro/flexikom-loader/ First try to orbit the camera up and down to check it's working ok, then left and right. Any advice is much appreciated!
Looking at your code I see you are loading the same object 10 times, creating 10 meshes that are all the same. All use the same geometry and the same material. This is where your lag comes from. Both from the loading (asynchronous request to the server) and the object creation.
What you need to do is to load one object and create one material that you will assign to the object. Then you clone() the object 10 times assigning the different position that you want to each cloned object.
Gaitat is correct that you should not be loading the same object 10 times. But I think the lag is directly related to the textures.
You should load the textures outside of the loop.
How it is now, you are loading 30 textures onto the gpu when you could be just loading 2 (at least I think this is how it is working).
Profiling the page shows that texture2D is taking a lot of time.
I am almost certain that this will stop the lag.
Im making a page/application that presents a wide range of products. One view contains a lineup of about 130 products, eash represented by a png-image, the size varies from 33Kb to 150Kb.
The lineup can be scrolled horizontally whith the users scrollbar or custom controller, and when you hover each product I use som css-transistions to fade out all products except the one hovered, and to enlarge it.
It works perfectly smooth in Safari and decently Firefox, and in Chrome as long as I keep the image count-down. But the more images i try to add, both the scrolling and the transistions progressively gets slower until it's almost imposible to work with.
Is this some cache.problem in chrome? Is there any way around it?
I've tried to preload the images, but the problem isn't the loading time og the image, its the performance that seems to halt due to the sheer number of images.
You can combine all your little images in one big image, and load ONLY the big image, so you do only ONE HTTP request. For display you must set the offset (background-position property) of every image using css.
Tutorial
My website seems to take on this "squeegee" type load effect, where all of the graphics load from the top down with an ugly top to bottom wiping effect. Is there a way to make the actual way in which your website renders graphics prettier?
I'd be more interested in why your page is taking so long to load and/or render. If it takes several seconds to draw, even on a fast connection, you might want to look into why that is. Tools such as Fiddler, Firebug, IE Developer Tools, etc can help you look at what resources your page is downloading and how big each research is.
If you have massive resources on the page (such as BMP or PNG files that are several hundred K), see if you can convert them to other formats or resize them on the server to the size they render at.
If your HTML is massively complex, such as huge nested tables, you might want to look into simplifying that with more modern HTML and CSS styling.
If you do have huge, high-res bitmaps that need to be loaded, you might want to preload them with script and then render them dynamically when they finish loading.