BLUI Open Source HTML5/JS/CSS HUD/UI

Hey ,

I must start off with saying great work on this. Its nice to see someone trying to release a toolset like this for free. :slight_smile:

As a C# .NET & HTML5 developer by trade, this is amazing to see and would be a lot easier to use than UMG in my opinion.

One thing though,

For some reason, unknown to myself, the performance of the webpage seems very poor compared to loading (and using) it in Chrome, Firefox or IE. It seems to take a second or two to register my click/hover etc. onto the screen. Would you have any ideas as to why this would happen?

  • I used your example hud, changed the url to my local url and updated the tick via the Game Mode (as recommended).

I do not have problems with FPS with my system (in-case that was your first thought)

Thanks for any help. :):slight_smile:

[QUOTE=paulv2k4;263763]
Hey ,

I must start off with saying great work on this. Its nice to see someone trying to release a toolset like this for free. :slight_smile:

As a C# .NET & HTML5 developer by trade, this is amazing to see and would be a lot easier to use than UMG in my opinion.

One thing though,

For some reason, unknown to myself, the performance of the webpage seems very poor compared to loading (and using) it in Chrome, Firefox or IE. It seems to take a second or two to register my click/hover etc. onto the screen. Would you have any ideas as to why this would happen?

  • I used your example hud, changed the url to my local url and updated the tick via the Game Mode (as recommended).

I do not have problems with FPS with my system (in-case that was your first thought)

Thanks for any help. :):slight_smile:

Hello there!

Thanks for the comments, trying my best to help out the community in any way I can. Being a first-yea college student tends to eat up money, so purchasing a toolset like this wasnā€™t really an option. In my free time I opted to make one myself instead :slight_smile:

Anyways, referring to your issue, thatā€™s strange that there is a largely noticeable delay. Iā€™ve tested intense pages such as http://paperjs.org/ and http://www.smashcat.org/av/canvas_test/ without any performance issues.

What kind of page are you loading up? It may give me a better idea on what is causing the performance issues

Just to test, Ive switched my url to paperjs.org. The home page is very stuttery (2/3 fps iā€™d say) where as its fluid on chrome etc.

Ive tried ticking BluManager::doBluMessageLoop(); in my base GameMode class, placing the blueprint tick in my BP Game Mode class and placing the blueprint tick in the level class. They all provide the same result.

Really confused.

P.S. Ive tried on 4.7.3 and 4.7.4, if it makes any difference

[QUOTE=paulv2k4;263996]
Just to test, Ive switched my url to paperjs.org. The home page is very stuttery (2/3 fps iā€™d say) where as its fluid on chrome etc.

Ive tried ticking BluManager::doBluMessageLoop(); in my base GameMode class, placing the blueprint tick in my BP Game Mode class and placing the blueprint tick in the level class. They all provide the same result.

Really confused.

P.S. Ive tried on 4.7.3 and 4.7.4, if it makes any difference

Iā€™m confused as wellā€¦
Just curious, what are the specs for your PC? Just trying to narrow stuff down to get a better idea of the issue

CPU: AMD Athlon X4 750K Quad Core @3.4Ghz
Memory: 8GB DRR3 1600Mhz
GPU: NVIDIA Geforce GTX 760 - using 347.25 WHQL Drivers
O/S: Windows 7 64Bit SP 1

[QUOTE=paulv2k4;264032]
CPU: AMD Athlon X4 750K Quad Core @3.4Ghz
Memory: 8GB DRR3 1600Mhz
GPU: NVIDIA Geforce GTX 760 - using 347.25 WHQL Drivers
O/S: Windows 7 64Bit SP 1

This is very strange, I originally developed BLUI on a GTX 760. Interesting that you are having frame rate issues with the CEF3 binary.
Open the folder where you copied the cef_ue4_process.exe (same folder as UEditor.exe) and take a look into Blu.log and the debug.log file generated. Check if there is anything out of the ordinary in there.
Can you think of any software on your computer that might be causing issues with the CEF3 process?

I do not have a blu.log file but the debug.log file shows

[QUOTE]
[0403/194145:ERROR:renderer_main.cc(212)] Running without renderer sandbox
[0403/194229:ERROR:renderer_main.cc(212)] Running without renderer sandbox
[0403/194759:ERROR:renderer_main.cc(212)] Running without renderer sandbox
[0403/195006:ERROR:renderer_main.cc(212)] Running without renderer sandbox
[0403/195033:ERROR:tcp_socket_win.cc(372)] bind() returned an error: Only one usage of each socket address (protocol/network address/port) is normally permitted. (0x2740)
[0403/195033:ERROR:devtools_http_handler_impl.cc(295)] Cannot start http server for devtools. Stop devtools.
[0403/195043:ERROR:renderer_main.cc(212)] Running without renderer sandbox
[0403/195043:ERROR:cache_util_win.cc(20)] Unable to move the cache: 5
[0403/195043:ERROR:cache_util.cc(132)] Unable to move cache folder D:/Work/UnrealEngine/PARGFootball/BluCache to D:/Work/UnrealEngine/PARGFootball\old_BluCache_000
[0403/195043:ERROR:cache_creator.cc(133)] Unable to create cache
[0403/210056:ERROR:renderer_main.cc(212)] Running without renderer sandbox

No I keep my PC free from any bloatware. Any ideas?

[QUOTE=paulv2k4;264060]
I do not have a blu.log file but the debug.log file shows

No I keep my PC free from any bloatware. Any ideas?

Iā€™ll have to look into possible issues. Yours is the first report of low fps in the rendering Iā€™ve seen yet.
Try making a blank project to see if the issue exists in it as well

Ok, so I did some testing and came to some rough conclusions.

It seems this only works properly on a blank map and being run in a standalone process, in the editor window or (probably best) in a packaged game. Any other instance like ā€œnew editor windowā€ drops the fps by at least 20 fps (in certain this is Slate/UMG issue). Put that with any decent size/complex map and your fps will soon become 10-20fps. (unchecking ā€œuse single processā€, does not seem to improve this)

Also there is substantial fps dips occurring every 1-3 seconds bringing the fps down another 5-15fps, which is a little odd.

There seems to be a slight 0.5s - 1.5s pause between a mouse click/hover/interaction and the page actually doing something.

In that case I can not see this usable as a HUD but Menu UI will be fine as long as you keep the 3D background small (which games tend not to do anymore).

I do know that Slate (UMG) is incredibly slow too which could be hindering the process (the profiler proves this). This made me wonder whether I should put this on a plane to see if it improves things.

My concern is that if you were to ship the game and someone with a much worse CPU/GPU were using it, they would notice a more significant performance drop.

I hope we can get to the bottom of this. I am more than willing to help.

[QUOTE=paulv2k4;264359]
Ok, so I did some testing and came to some rough conclusions.

It seems this only works properly on a blank map and being run in a standalone process, in the editor window or (probably best) in a packaged game. Any other instance like ā€œnew editor windowā€ drops the fps by at least 20 fps (in certain this is Slate/UMG issue). Put that with any decent size/complex map and your fps will soon become 10-20fps. (unchecking ā€œuse single processā€, does not seem to improve this)

Also there is substantial fps dips occurring every 1-3 seconds bringing the fps down another 5-15fps, which is a little odd.

There seems to be a slight 0.5s - 1.5s pause between a mouse click/hover/interaction and the page actually doing something.

In that case I can not see this usable as a HUD but Menu UI will be fine as long as you keep the 3D background small (which games tend not to do anymore).

I do know that Slate (UMG) is incredibly slow too which could be hindering the process (the profiler proves this). This made me wonder whether I should put this on a plane to see if it improves things.

My concern is that if you were to ship the game and someone with a much worse CPU/GPU were using it, they would notice a more significant performance drop.

I hope we can get to the bottom of this. I am more than willing to help.

Thanks for looking into this and reporting all this information back!
Iā€™ll run some tests on a complex map and see what I find. I donā€™t want to be fast to point fingers at UMG itself, but I think trying it on a plane would be a good idea to start with.
I currently donā€™t have access to my workstation for this weekend, but come Sunday Iā€™ll be back at it.

Iā€™ll also file an issue under the BLUI Github with the information youā€™ve provided!

Thanks .

There is definitely a delay in the javascript calls too. (which has nothing to do with FPS, ofcourse).

If I run the same long calculation call on Chrome, Firefox and UE4 BLUI - The results are:

Chrome: <1s
Firefox: <1s
BLUI: <3s

I do not know enough about chromium to pass a knowledgeable judgement but could I ask why there needs to be a separate process along side UE4? Something tells me that this process is holding it back.

Thanks again,

[QUOTE=paulv2k4;265050]
Thanks .

There is definitely a delay in the javascript calls too. (which has nothing to do with FPS, ofcourse).

If I run the same long calculation call on Chrome, Firefox and UE4 BLUI - The results are:

Chrome: <1s
Firefox: <1s
BLUI: <3s

I do not know enough about chromium to pass a knowledgeable judgement but could I ask why there needs to be a separate process along side UE4? Something tells me that this process is holding it back.

Thanks again,

The separate process is part of the chromium architecture. Just as Chrome invokes multiple processes for sandboxing, BLUI does the same. At the heart itā€™s chromium.

As an added note, I have not seen any fps issues. Even on a complex map such as the sun temple demo.

Each process can either be a browser process, flash process or renderer process

Iā€™ve also just had a thought. Iā€™m not sure how but possibly the cef static lib being compiled on my Intel CPU might have something to do with that. Bit of a stretch as I used the standard MSVC compiler but. I think it may be worth a total compile of cef on an AMD to test the theory

Great plugin, . Weā€™ve been using it to enable a bunch of cool stuff in our soon-to-be-properly-announced virtual reality gameroom, and mitchemmc has done a bunch of work fixing things that were broken by introducing it into VR, e.g., dealing with the dual camera rig VR needs. At some point in the coming weeks weā€™ll put together a little video showcasing the ways weā€™ve been using BLUI, and we might want to talk about integrating it into the next version of Mitchā€™s VR Template and/or sharing some of his fixes. Exciting times!

In the nearer term, Iā€™d like to know a ballpark timeline on an Android build of BLUI. We might be the only ones who would ever even use it, so I understand why itā€™s not a priority for you, but weā€™re hoping to use BLUI in at least one project for the Gear VR, the VR headset based on the Samsung Note 4. Would it be fairly trivial for you to compile BLUI for Android if we offer to test whatever highly experimental thing falls out of your compiler?

[QUOTE=nateight;268695]
Great plugin, . Weā€™ve been using it to enable a bunch of cool stuff in our soon-to-be-properly-announced virtual reality gameroom, and mitchemmc has done a bunch of work fixing things that were broken by introducing it into VR, e.g., dealing with the dual camera rig VR needs. At some point in the coming weeks weā€™ll put together a little video showcasing the ways weā€™ve been using BLUI, and we might want to talk about integrating it into the next version of Mitchā€™s VR Template and/or sharing some of his fixes. Exciting times!

In the nearer term, Iā€™d like to know a ballpark timeline on an Android build of BLUI. We might be the only ones who would ever even use it, so I understand why itā€™s not a priority for you, but weā€™re hoping to use BLUI in at least one project for the Gear VR, the VR headset based on the Samsung Note 4. Would it be fairly trivial for you to compile BLUI for Android if we offer to test whatever highly experimental thing falls out of your compiler?

Hello!

Glad to hear someone had been getting use out of BLUI!
My college term is almost over, just two week left (final exams, papers, fun stuffā€¦) But Android is indeed something I want to look into. Weather itā€™s possible, Iā€™ve yet to look into, but it should be fun!

Recently obtained a DK2, and was going to test VR. If you guys fixed a bunch of stuff Iā€™d really appreciate a pull request on Github, itā€™d save me some serious time!

Thanks again for using it!

first of all . many thanks to u body
if u can make it Blueprint friendly it would be very helpfull for nonprogrammers like me

at the end . my best wishes for u in the exams

[QUOTE=MuhammadMadi;270664]
first of all . many thanks to u body
if u can make it Blueprint friendly it would be very helpfull for nonprogrammers like me

at the end . my best wishes for u in the exams

Thanks!
Currently it is all possible via blueprints, however you do need a C++ project for plugins to work properly!

hi
as u can see this thread (Random: An Unreal Engine 4 Blueprints Remake of Shooter Game by Metahusk Cooperative - Programming & Scripting - Epic Developer Community Forums)

a game on BP and has 2 Plugins so its not needed to a C++ project for plugins to work properly!

for me its too late because my game already in BPs

[QUOTE=MuhammadMadi;271937]
hi
as u can see this thread (Random: An Unreal Engine 4 Blueprints Remake of Shooter Game by Metahusk Cooperative - Programming & Scripting - Epic Developer Community Forums)

a game on BP and has 2 Plugins so its not needed to a C++ project for plugins to work properly!

for me its too late because my game already in BPs

Hello, for this plugin, it must be compiled to work properly. You can make it work with your bp project by going to File > Add Code and just adding an empty C++ class. Then just compile the project once

Hi,

Is it possible to send from the engine to the javascript code on the webpage?

I need to implement some get methods on the webpage which will gather information from the engine.