Which method is best for series of images (like stop frame animation)

Questions
1

Hi there, I’m a newbie to Babylon.js and am inhaling the documentation and tutorials. Very exciting!

I hope someone can help me get over a hurdle. I’m trying to showcase my clients’ projects over the past 20 years and this one was a protective gear manufacturer.

I’d like to add an animation (or video), originally created in Adobe Flash (years ago) that uses a series of jpg files (stop frame animation style). The dimensions are 914px width x 1052px height. I have 2 products to showcase: (1) Helmet and (2) Entry Vest.

My challenge is determining which method I should use to display the content, when considering performance.

  1. Play a video as a texture: VideoTexture - Babylon.js Documentation. A video export for both products = 10mb.

  2. Use gif animation or stop frame animation. I am concerned about the file size with this method.
    When I export the helmet gltf, it generates 63 png files at 11.5mb. The entry vest exports 48 png files at 9.54mb. Also, when I drag/drop the gltf in sandbox, i get an error about the png images.

  3. Sprites: Sprites - Babylon.js Documentation
    I could create 1 file containing all helmet images and 1 file containing all entry vest images. Then, animate them separately.

  4. Any other method I am not aware of?

Ideally, I would like to add a photo as a skybox but do not want to push my luck with download speed if the animations already max it out. I have a video sample to send if that helps solve the challenge.

2

Hey and welcome!!

As a first thought, I will consider the video if you can store it on a streaming server. This way it will not block the rendering of the first frame and it will be downloaded while being played

1 Like
3

@Deltakosh, thank you for the kind welcome. I appreciate your input about streaming it as a video. Really, I wish I had time to convert the products into 3D; but that’s for another day.

1 Like
4

No worries, it will come :slight_smile: It is better to start with a project that you can ship!

1 Like