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?
Thanks. These are the files created in the directory after I click on “Launch” with the Nightly(64 bit) option. Could you let me know which files are not needed in this list? And why are these files created if they aren’t necessary?
EDIT:
Just FYI - I am using the “Launch” option to package the project. In this case the files gets created under /Binaries folder. I guess you are using the File → Package Project → HTML5 option (in which case it asks for a directory where it creates the files). For some reason this option doesn’t work for me. A black screen shows up when I try to run the P2.HTML file (via localhost:8000).
Top Down empty template packaged with Shipping configuration is 33.5mb. That’s including the symbols.js which is 4.1mb that you may not need. So without that - it’s under 30mb.
I did try the “File → Package Project → HTML5” and ran it via the “HTML5LaunchHelper” & “localhost:8000” - as mentioned in my previous comment (under EDIT). However, that doesn’t work. I see a black screen in the browser.‘’
(It dumps both compressed and uncompressed versions of the same files only when the project is packaged via the “Launch” option in the editor - which is what you see in the screenshot I attached earlier).
However, I just tried this with a new project and choose “With Starter Content”. option. That works. The total size is ~ 50 MB. Not sure why the “No Starter Content” option doesn’t work.
But , the original question still remains. Why such a huge difference - even if it’s ~ 30 MB, it’s still orders of magnitude larger when compared to a 200 kB Three.js project of similar assets/content ?
You will need to do “File → Package Project → HTML5”. Make sure you’re in the “Shipping” configuration, otherwise it looks like it dumps both compressed and uncompressed versions of the same files.
If you are testing the build locally, you will need to run “HTML5LaunchHelper” and then access the “localhost:8000” via a browser (do not double click the HTML in Explorer). If that doesn’t work - try a different browser (could be a browser extension blocking some of the content).
If all else fails - try copying just the files you see in my screenshot. It should work if you grab the compressed files.
The answer to “Why so heavy” question is beyond my prowess. They are working on optimizing package size for mobile I hope this means some benefits might surface for HTML5 builds as well.
I think it comes down to the basic technology stack. You get a lot more “out of the box” with basic UE project than you do with Three.js. You might want to check out Samantha’s post - she mentioned removing Slate to get down to 9MB. This is still a lot ‘heavier’ than what you reported with Three.js. My advice to you is: if file size is of critical and utmost importance to you, if that outweighs the benefits of using UE - then by all means stick with Three.js.
Thanks for that useful info. I’ll check out the Slate post and see if that helps my project come down to 9 MB. That’s almost a 2/3rd reduction!
Since the project will be served over the net, size is definitely important. The UE4 editor does bring in lots of productivity & visual advantages. “Drawing” & procedurally programming in three.js code is far from easy - but given a 3D model/game it can be replicated in three.js with extremely small .js file sizes.
I’ll keep digging up for more pointers on how the size can be further reduced. I’m sure UE too will be working towards reducing the file sizes (as you too have mentioned) over future releases, since this would be a wishlist for most.
