I created a new project in UE4 (ver 4.10.4) with “no starter content” and “scalable to 2D/3D” settings. Essentially, there are a total of 5 assets in the project 1) floor, 2) light source, 3) sky sphere, 4) atmospheric fog and 5) player start.
When packaged to HTML5 with “shipping” build configuration, the size of the package is around **155 MB. ** The HTML project was launched from within the editor (Launch -> Nightly(64 bit). The 155 MB HTML5 directory that gets created is under the /Binaries folder.
If I create a similar project in Three.js, the file size (including three.js library file) is just ~ 200 kB. (However, I did not include a sky sphere - just a basic rectangular floor mesh with a light source).
Why such a huge difference in size, when UE4 packager is essentially creating WebGl based javascript files in its package? I can understand some overheads that UE4 may package, but even with that should the difference be so large? Or, am I missing something here?
The contents of the ./Binaries folder are for testing and not for export. Using a new project with no starter content and the default map included on 4.10.4, packaging the project via File -> Package Project -> HTML5 I get an output size of ~27mb, since the resulting files are compressed .gz files.
As for the build itself, it is still larger than Three.js, since the whole UE4 engine has to be packed as well in order to even run. UE4 supports much more than just basic WebGL features, and it is possible to get this size down even further by disabling plugins and stripping unneeded engine content, which may or may not require you to build the engine from source without those features built in. I believe the HTML5 demo of Tappy Chicken was around 15mb or so after optimizations, which is fairly acceptable.
For a quick rundown of the exact files included in a packaged project (applies to all platforms, not just HTML5) you can also check the /Saved/Cooked/<platform> folder after a succesfull package. This directory is an unpackaged copy of all the assets included in the build. From there you can identify files and plugin assets which you may not want and can deleted from the project in order to save space. A lot of default engine content assets are included by default for example, and you may want to remove those.
Thanks. Didn’t realize the entire UE4 engine was being packaged as well.
Would you know of any reference that details what features UE4 supports that are not in WebGL? I ask this because, from what I understand (I could be wrong though), the HTML5 packaging process essentially outputs HTML5 & Javascript code. Since the latter consists of calls to the WebGL API, wouldn’t the features of this HTML5 packaged code be at best to what WebGL supports?
I’m not too sure about the exact feature set. I’m not an active developer of HTML5 (I find the technology interesting but too young at the moment, with lack of proper support and what not), and the documentation is very scarce unfortunately, but most core functionality of UE4 should work in the browser.
It is true however that UE4 is limited to what WebGL is capable of in terms of graphical fidelity, but UE4 also included things like complex lighting, Paper2D, (experimental) network support and more, which is not native to Three.js. Many things that aren’t supported though are because of limitations of the browsers and the WebGL implementations themselves.
Your best bet is to stay active on the forums and report potential bugs/missing features to the engine team :). Do keep in mind though that HTML5 is probably not the top-priority at the moment (but nevertheless should be supported!).
