in the past year I made quite a lot of videos about how to run WebGL on web
browser which allows you to run intense 3d graphics using GPU the result is so
great and it gives me an idea if we can run this project so smoothly how about
we run an actual game engine what will it be in this video I will show you how
to run Unreal Engine 4 project with HTML 5 and how it performs on web browsers
ready let's check it out
so around 4 years ago Unreal Engine start supporting html5 platform
packaging option there is no extra packing or any mods need you can compile
and package your project into html5 formats directly from packaging menu so
my first test I'm going to use the basic first person shooting demo from
Unreal Engine it has all the game's basic functionalities like controls
physics light and ready to run so I'm going to package it into html5 from the
menu after a couple minutes here's the output at HTML file CSS and JavaScript
I'm going to use Visual Studio code to create a local web server and Firefox
for browser the demo runs smoothly without any glitch or lacking at all and
if I turn the full-screen mode on I have no idea this is running on browser the
engine core was compiled into web assembly which allows web browser to run
a binary code but similar performance with native application then each frame
will be paint into a page on canvas HTML element CPU and GPU usage is relatively
low I was expecting this to run inefficiently but it seems like I have
underestimated the Unreal team so the next test I'm going to run a more
demanding demo this project has multiple light sources with high resolution
texture and reflection this time I will use a stats.js a JavaScript library to
monitor the framerate by adding the code in the engine rendering loop the
result exceeded my expectation the project is still running smoothly at 60
frames per second at 1080p resolution and CPU and GPU usage is only around 30
to 40% to be honest it looks just like a scene from a modern game so let's raise
the bar for the next test I'm going to use a larger map size foliage
volumetric light and screen space reflection and this is when I start to see
limitation the project runs smoothly but some of the visual effects are removed
when running on browser you can see the wall metric light and some reflections
are missing so an impressive scene and good performance though so I spent
around 2 days playing with html5 and here's my summary unreal engine performs
quite well in web browser this create many opportunities for web developers to
show their skills and creativity's without the platform limitation however
there are some several drawbacks first is the massive download size that going
to hit the server typically several hundred megabytes per project so I think
it's only practical for a small game product or design demonstration also the
engine features are limited for example I try to load the scene with realistic
foliage but turns out the engine couldn't support extremely high detail
texture material and reverted to an ugly default texture not all the projects can
be run on browsers it needs to be designed to support html5 from start for
example I try to run an official open world demo from unreal team and it's
stuck at packaging stage for a whole day without any progress so I decided to
abort and if that's not bad enough unreal team decided to remove html5
support since version 4.24 and change it to an extension instead so if anyone
wants to export the project in html5 they will need to download the Unreal
Engine source code from github then combine it with html5 platform
extension then recompile the engine editor I tried it myself
and it's a pain not really sure what's the reason behind
this but I guess it's about reducing their workload because now developer
community have to take care of this extension instead anyway if you're not
using the latest feature of the engine like ray-tracing
you can download the older version of Unreal Engine which natively support
html5 so that's all for this video hope you guys enjoy if you want to see more
web development tips and tutorials subscribe this channel to stay tuned
thanks for watching see you next time bye