We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

sprite sheet thing in Verge

Home › Forums › General Questions › sprite sheet thing in Verge

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • 2025-05-22 at 12:14 pm #82073
    visualizer
    Customer

    Hi
    Guys
    to generate some effects Verge uses a sprite sheet thing. Of course when we work on some thing we just don’t make sprite of mickey mouse & Donald duck.
    I made a sprite sheet effect of a smoke / cloud. The sprite sheet PNG is with 144 images ( 12 x 12 ) and the file size is 67 mb
    the each individual image is of 960 x 460 pixels while whole sheet PNG image is of 11520 x5520 pixels.
    In Blender it plays perfectly well. But when tested in verge published scene the frames are breaking like anything & its not moving smooth. It intermittently stops and plays.

    Can this issue be fixed in Verge? &

    How to fix this issue?

    2025-05-22 at 12:38 pm #82074
    Alexander Kovelenov
    Staff

    Hi,
    Could you please elaborate a bit how do you implement the rendering of such the huge texture?

    Soft8Soft Tech Chief
    X | FB | LinkedIn

    2025-05-22 at 1:35 pm #82080
    visualizer
    Customer

    Hi
    Check the preview taken from Blender & Verge.
    I am trying to create an experience in Web3D of an object getting placed on ground with dust raising up when it touches ground.
    I am trying to maintain the visual quality to FHD level at least if not 4k.
    Is there anyway we can achieve the smooth running effect of those frames?

    Attachments:
    1. blender-view.mp4
    2. Verge-view.mp4
    2025-05-22 at 2:20 pm #82084
    xeon
    Customer

    Sprite sheets can be any size and ratio but to be their most efficient they need to based on a power of two. The next thing is the entire map plus your scene must fit in the memory available for the device it must play back on and based on the method of playback ( browser vs electron ). With browsers the memory limit is much smaller.

    Try a 4096×4096 with a cell size of 1024×1024. Then try using a webp instead of png.

    You might have better luck.

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

    2025-05-23 at 11:28 am #82119
    visualizer
    Customer

    Xeon
    as per your calculation for the resolution of 4096 and cell size 1024… there will be too less images. my sequence is of 144 images 12 x 12
    its difficult to come down than 120 images at the most

    2025-05-23 at 11:29 am #82120
    visualizer
    Customer

    Could you please elaborate a bit how do you implement the rendering of such the huge texture?

    Any other way to achieve this?

    2025-05-23 at 1:34 pm #82125
    xeon
    Customer

    You can have a grid that is 8×16-128 cells or 16×16 256 cells. Or you can have two 8×8 maps.

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

    2025-05-23 at 3:32 pm #82126
    Alexander Kovelenov
    Staff

    Indeed, 8×16 with the tile size of 1024 x 512 will make a square 8192×8192 texture atlas which will be more efficient than 11520 x 5520. If you reduce the tile even more, to 512 x 256, it will be 4096×4096 which is perfect!
    Also, storing your texture in WebP format can significantly reduce application loading times.

    Soft8Soft Tech Chief
    X | FB | LinkedIn

    2025-05-23 at 5:47 pm #82130
    visualizer
    Customer

    makes sense ! let me try on it

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.