question

When streaming the 3D view using WebGL instead of video, the mesh data of the objects in your model is sent to the client device to be rendered in the browser. Depending on the model’s configuration, certain rendering techniques will either not work correctly in this manner or have serious performance considerations. When building a model to be used with WebGL Streaming, you should take care to optimize how it is configured to minimize the amount of data sent each update frame. If you can send mesh data once and then render it multiple times on the client-side, it will perform better than if you must keep re-sending a large amount of data each update.

In your video, I can see that it is still sending mesh data during the recording. The "Loading media..." text appears in the corner when FlexSim is still in the process of sending mesh data about your objects to the browser.

After object mesh data is sent, each update includes position data about any objects that have moved since the last position data update. The more data that is in each of these update messages, the longer it takes between updates in order to hold a steady bitrate of data across the internet. So if these positional data messages have less data in them, then it can send them more often and you get more updates faster (less lag).

In your model, you have thousands of small flowitems that are moving around. Any object in a different position will need to send its position in the update message. Since you have thousands of them, the amount of data that needs to be sent is large. The less things you have moving simultaneously, the less data it will need to send each update and the less time it will need between updates.

It can render it super smooth within FlexSim because it doesn't need to transfer that data across the internet. It simply loops through the positions of each object in RAM and draws them at that position. When using WebGL streaming, then the positions of each moving object need to be transferred from the server to the client over the internet. That takes a lot more time than reading data locally from highly optimized PC RAM hardware.

Also, you have thousands of little flowitems that are being custom drawn as bitmaps. The WebGL streaming works better if all you use are objects with 3D shapes and no custom drawn meshes. Your tiny circle flowitems may look like they would render quickly, but if they are sending their meshes every frame instead of just their positions, then they are going to cause lag between position updates. You should not use custom drawn meshes. You should use objects with 3D shapes so that their mesh data can be sent once and then only positional data needs to be sent afterwards.

You can also hide the contents of objects that contain a ton of flowitems in order to not have to send a ton of data about those flowitems. For example, you have 1660 flowitems in this one object alone:

If your model requires tons of positional data being sent every update, then it may be better to use Video Streaming instead of WebGL Streaming as the 3D View webserver rendering method. Then the server can process the frame and stream just the pixel color data instead of the 3D data to be rendered client-side. See Webserver (flexsim.com)

If you are using WebGL Streaming, then you need to be conscious of how you build your model in order to minimize the amount of data sent each update.