Question regarding performance

[notchris]

Hello, VueGL is awesome! I've been checking out some of the options for the renderer that deal with performance. I was wondering what the recommended use for VueGL would be, in comparison to using THREE by itself. In example, if I were making a game with a level, including a decent amount of objects, I saw it was recommended to merge geometries. I know you can access the inst of objects, but would it make more sense to use the direct library in this kind of situation? I'm sorry if some of my terminology is incorrect, I'm doing my best to learn / figure out the right approach.

[h-ikeda]

Currently, such optimizations are not supported. I'd like to implement them as component props in the future. Pull requests are Wellcome, of course.

VueGL is focusing to render static but reactive objects with lower cost. So I'm not focusing much about realtime animation. In that case, integrate vue and another library like A-Frame might be more helpful.

[notchris]

Thanks for the response @h-ikeda

I was able to create a component for Convex Geometry then merge all of those, but I did experience performance issues. I understand now that VueGL is primarily for static / reactive objects.

[notchris]

@h-ikeda One thing I’ve noticed is, when implementing controls that call .requestRender, the scene will render and change correctly. However, once loading more than a single .obj, or a few meshes with varied geometries, the performance tanks on basic operations. What about Vue-gl currently prevents efficient re-rendering? Is it something about the Vue state, or the draw calls? I’m trying to pinpoint which area causes the greatest performance drop in comparison to using three without Vue.

Thank you for your time!

[h-ikeda]

@notchris Sorry I can't imagine actually what you are doing and what's going wrong without seeing examples. If you provide samples, I probably can point something.

VueGL is designed to trigger renderings only when Vue detects some changes. And I think just rendering is not a so heavy operation. It must be caused by more affected calls like re-creating much objects, unexpected repeated calls or recursive calls triggered by Vue's lifecycle.