Sprite sheet limitations

This topic has 11 replies, 4 voices, and was last updated 1 month, 2 weeks ago by visualizer.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2025-06-22 at 3:40 pm #82490

visualizer
Customer

Hi
Verge team,
I have given a several trials and permutations and combinations but it feels like “Sprite sheet” is kind of a “sprite shit” thing for professional level output from Verge.
I have degraded the sprite sheet from 20 mbs to as low as 6 / 7 mbs by downgrading the images but still it doesn’t work smooth. You can say I have mastered the rows & column calculations required for playing sprite in scene.. lol
But still not satisfactory results.
Just wondering, such a professional output capabilities Verge has then why it is still dependent on sprite thing? OR may be some memory management Verge can provide as feature to play kind of heavy sprite sheets? like 20 MBs or 30 MBs smoothly without frame dropping

For creating effects like smoke, steam, dust & gas how can it be managed in Verge? I don’t think currently it is possible. Is there any chance Verge can come up with something good for alpha based image sequences for generating or faking some VFX in scenes many times.
Thats a something which seems missing in Verge

2025-06-23 at 4:43 am #82503

bigmike814
Customer

I’m not a sprite expert, but my understanding is their whole purpose it to keep things lightweight; less than 100kb.

20MB is a huge file size and I couldn’t imagine webgl being set up to handle the load, don’t know it this helps.

2025-06-23 at 6:00 am #82508

visualizer
Customer

WebGL even helps to handle heavy file sizes as long as they are geometries and other stuff… but for sprite thing it crawls even for 6 mb.. I believe that is something serious to consider as useless thing and think of something more efficient & professional feature in Verge.

2025-06-23 at 6:25 am #82511

Alexander Kovelenov
Staff

Hi,
The sprite size should not cause any slowdowns in Verge3D provided it fits fully into the GPU memory. Perhaps there is some other issue with sprite switching logic in your shader structure

Soft8Soft Tech Chief
X | FB | LinkedIn

2025-06-23 at 9:40 am #82520

Alexander Kovelenov
Staff

BTW, we have a working example in our Asset Store called Fire Effect. Feel free to learn from or reuse it. Also check out the tutorial series on how this demo was made.

Soft8Soft Tech Chief
X | FB | LinkedIn

2025-06-23 at 7:17 pm #82522

xeon
Customer

I use sprites sheets quite regularly but memory (device and browser) limitations are critical to manage. If you are creating an electron app then the limit is not so much an issue, but if its web based you are going to want to optimize your sprite sheets. Optimization starts with a Power of Two image size in X and Y. It will be much more performant than any other image size. Its even better if the cells are also Power of Two. As Alexander stated, the next thing is to make sure the sprite sheet is loaded into memory before you need it. If not there can be lag as the file is read into memory especially if its monstrously big. If I recall your use case is for smoke or fog that fills a good portion of the screen and you have a very large number of frames/cells which is why your file size has been so large. I would recommend creating a test case. Say with a file size of 2Mb or so…dont wory about the cell resolution. Then start threshold testing on what file size works best for your project / hardware and then figure out how to make the sprite sheet the best quality for that particular resolution. Often rendering out images at the exact size provided better quality than scaling an image to size but your testing will give you the best answer for that.

From my experience sprite sheets performance also comes down to the material shader nodes and how complicated or simplistic they are. The more simple…the better the performance. Also, if your sprite sheet has an alpha channel the way you manage that will also have an effect on performance. File type (PNG, WebP) will have a performance impact.
I would also be sure, and I am sure you already have, turned off all shadows associated with the smoke sprite sheet so its not accepting or providing any shadows.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2025-06-24 at 7:31 am #82531

Alexander Kovelenov
Staff

Indeed, this feature is quite tricky to do, requiring a certain optimizations to be made.

BTW if your asset is large, you might try making a transparent video texture and use it instead of the sprite sheet. See the corresponding demo in the Asset Store.

Soft8Soft Tech Chief
X | FB | LinkedIn

2025-06-24 at 1:39 pm #82550

visualizer
Customer

Alexander
Do you mean we can use transparent video texture? that’s .MOV? or GIF?

2025-06-24 at 1:42 pm #82551

visualizer
Customer

Xeon
I will take a look by considering your parameters again.
But just keeping power of 2 really makes that big sense & change?

Also any sprite sheet under 2mb size would be a cartoonish for pro output I believe. especially for smoke like subtle & soft gas effect elements

2025-06-24 at 1:43 pm #82552

visualizer
Customer

Alexander Kovelenov wrote:

BTW, we have a working example in our Asset Store called Fire Effect. Feel free to learn from or reuse it. Also check out the tutorial series on how this demo was made.

Yes I will take a look at that smoke effect thing explained. will try it

2025-06-24 at 7:11 pm #82556
xeon
Customer
POT images make things more performant due to the memory efficiency of the file itself and how it sits in they device memory. POT cell sizes are ideal because when translated to 0 to 1 dimensions for blender mapping the value never exceeds the decimal precision of 4 places and 3D apps can easily ensure that only the specified cell is shown…once you pass out of this ratio some of your cell (will intrude into the next cell due mathematical precision).

I don’t feel professionalism is a function of image quality rather a function of maximizing the tools you are using to achieve the best end result. This is typically a balance between memory efficient and design with both taking their required compromises.

Verge3D is a tool based on ThreeJS and has its rendering and performance constraints that we as developers have to balance and manage. Its not the only tool out there for interactive development. Depending on your project needs you decided on the tool you are going to use that best matches the need of the project. If particles and environment effects are the big thing that has to be completed and look realistic…then perhaps a different tool would be an option. You just have to pick your tool and work within its capabilities. You can use a screw driver as a hammer if you want but you cant get upset with the screwdriver when it doesn’t meet the expectations of a hammer.

When I started web 3d in general…the memory constraint was 50MB now we are up to 2GB but we are still single threaded with WebGL. Things will change when WebGPU is more widely adopted with multithreading….then we will see … hopefully raytracing and all sorts of good things to bring WebGL quality to where we want it to be. Until then….choose your tools wisely.
- This reply was modified 1 month, 3 weeks ago by xeon.
Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com
2025-06-25 at 7:39 pm #82572

visualizer
Customer

visualizer wrote:

Depending on your project needs you decided on the tool you are going to use that best matches the need of the project. If particles and environment effects are the big thing that has to be completed and look realistic…then perhaps a different tool would be an option.

There are other options no doubt. But it seems most things fit in Verge then definitely we expect something for remaining 10-20% to finish rather than switching over to the different option. In the recent past I have tested few options but I felt Verge is better in almost all conditions and gives very free hand to the end user.
May be as you said I might have not thought of power factor for creating sprite sheet. Thats one thing I got to try. Also sprite sheet like thing to me looks like a very basic things as compared with other features inside Verge.
One more thing I noticed that, Two major game engine giants have almost removed the Web based publishing capabilities which makes Verge Unique |& advantageous.
May be in coming versions Verge might include the advanced features to seamlessly work with softwares like Blender. I have seen Verge eventually included effects like fog & post processing also.
Author

Posts