Slow performance on Smartphone

[AlmightyFrog]

Hi, on my smartphone (a little older Honor 5x) I've tried the interactive light demo. You can move and control with touch, but UI is slow and lags much. Is there any plan/chance to improve performance on mobile devices?

[wassfila]

Hi, thank you for your feedback.

• The "05 interactive lights" demo is using a non optimised 3d model that has a lot of vertices.

• Check if the "04 real rooms model" is also lagging the same way, then it is not a lighting issue, rather a high poly mesh issue.

• As comparision, the "03 mouse on glTF imports" is using exactly the same implementation as example 04 just loading a different mesh. So if example 03 runs smooth, it is a mesh rendering issue.

I take note of this, I also had similar lags on galaxy S5 while it runs smooth on galaxy S10.

So I would say, you should not worry much about this issue as it is not related to the framwork, rather to the 3d file. I can give recommendations as after all, once you take this example, you most likely will be interested to have your own model. I'll also apply these recommendations once I'll be in the optimization phase, I'm currently still working on the basic functionality. I see two ways how the performance can be improved just through the mesh model :

1. decreasing the mesh count : At the time being, every wall is on its separate object and with its own mesh, that is not necessary if the application does not need to modify the mesh properties on runtime for every wall separately. OpenGL is known to be slow when splitting rundering on multiple calls. The fix to this would be to compact the whole model into a single mesh from the modeling tool. Except the interactive items of course, as the raytrace cursor works on mesh basis.

2. decreasing the polygon count of the model. Using belnder modifiers, it is possible to optimize the model and get a small percent of the polygon that have acceptable quality but with drastically less gpu time required.

I write down your test platform for my reference, I'll add in the future some fps indicators that can make tests more comparable.

Platform under test

• Honor 5x

• CPU : Octa-core (4x1.2 GHz Cortex-A53 & 4x1.5 GHz Cortex-A53)

• GPU : Adreno 405

Three.js performance

as this example is using three.js, I place as reference two posts related to performance

• https://stackoverflow.com/questions/47452428/how-to-detect-slow-gpu-on-mobile-device-with-three-js

• https://discourse.threejs.org/t/three-js-render-performance-question/1754

[AlmightyFrog]

Hi, the 04 and 05 perform about the same. If you would ask me, 04 feels slightly more performant but that is I guess subjective. That was done in firefox. Using the built in browser it laggs way less.

Using my second smartphone (which has currently no firefox installed) there is no lag at all.

So I guess it is an issue about the combination of a) my little older phone and b) firefox.

Before I design my own model, I'll wait a little to see what you can achieve in the meantime. I can currently only imagine like color the floor of a room by temperature color and use lights to show light on/off. How is it with interactive events - would it be possible to also e.g. show movement detectors live?

[wassfila]

Hi, I'm glad to see you're interested in this concept. It is indeed in its early phase and is undergoing a lot of changes. Thanks for the feedback about the phone models, I also had issues with the latest samples "07 interactive heating" where I added a lots of lights with shadows. Interactions with a smart home are the main reason why I started developing this, to give you an idea, here's a project I published on hackaday about sensors, light, heating and others. Color the rooms or floor with temperature is on the list of features, that I'll try to make generic so that there's no logic within the three app at all, everything comes from either the network or from the blender exported model. A hint about that, I'll explore using animations, as you can then configure the full modulation in blender. With that it is possible not only to animate colors, but also to animate any sort of movement such as opening window, light variation, color, texture,... On the home automation side, these integrations are going to be my main focus :

• Hue gateway and hue API
• Mqtt
  • zigbee2mqtt environment, including heating control with eurotronics
  • custom mqtt such as my custom sensors with nRF52, ESP32,...
• Ikea, if I manage somehow to beat the coap from webapp

Here is also a working three example where click on sphere turn the hue lights on and off. I actually developed that concept first, then I realized the need of a better structure so I started this project which better abstracts the three app from the user app.

Your feedbacks and suggestions are highly welcome, if you describe some practical use-cases, you can help influence the development. One thing I can predict with confidence, the main know-how will reside within blender modelling and the biggest time investment will be in creating a custom home model.

[wassfila]

I updated the readme with the link to https://github.com/HomeSmartMesh/smart_home_3d_webapp I will develop there the real application and keep this repo for 3d interactions only. I would be adding samples about the mapping of parameters to 3d visuals here first.

[wassfila]

And here a demo for a parameter update to animation : https://homesmartmesh.github.io/web_three_interface/08_parameter_to_animation/

with that actually all is done, it is enough to create a different animation in blender such as color change, and then create the event out of external trigger in stead of the gui.dat in the demo.

[wassfila]

I found the issue, it is a matter of poly count, beyond 3000 triangles the scene takes a huge amount of time to load on old devices, the loading may fail and the frame rate drops to 1 ~ 2 FPS. As the issue is not anyhow related to this project, I'll close this ticket and thankfully now there are multiple ways how to monitor the performance : pressing 's' will show / hide stats and also number of triangles currently rendered

latest test can be done from the smart home repo using this project

https://homesmartmesh.github.io/smart_home_3d_webapp/