UnrealEngineHTML5 / Documentation

542 stars 183 forks source link

Fork of UE 4.27.2 with HTML5 platform using ES3 shaders #147

Open SpeculativeCoder opened 2 years ago

SpeculativeCoder commented 2 years ago

Hi all,

I have created a fork of UE 4.27.2 (last version of UE4) with work on the HTML5 platform plugin to make it use ES3 shaders and a recent version of emscripten (plus some other changes):

https://github.com/SpeculativeCoder/UnrealEngine-HTML5-ES3

I've put a bunch of info on that page if interested.

I have tested it on Windows with Firefox and Chrome-based browsers. Hopefully will be of use if wanting to use WebGL with the most recent version of UE4.

Sekretz commented 2 years ago

So will it work for UE 5.1 which is also based on same openGL ES version right ?

Sekretz commented 2 years ago

I tried with your Platform folder with 5.1 git source. It seems need to patch these. Other than that it will will work well.

Screenshot (196)

SpeculativeCoder commented 2 years ago

Hi @UE5Web - the engine patch won't apply as it is designed specifically for the UE 4.27.2 source (so all the changed lines have to match up etc.). There are likely a lot of changes in between UE 4.27.2 and the latest UE 5.1 (recently released) but I have not yet looked at it so not sure what is possible or how much effort this would involve. In addition to any engine patch - the code in the HTML5 plugin itself would likely also need modifying to cope with underlying changes in the engine.

I am currently using the 4.27 HTML5 for a project I'm working on so maintaining that in a working state is my focus at the moment (likely with improvements / fixes for emscripten changes) but who knows in the future...

SpeculativeCoder commented 1 year ago

Updated to emscripten 3.1.26

Also added some experimental support for WebSocket SSL to allow HTML5 multiplayer to still function when Unreal is served via HTTPS (browser requires a secure websocket i.e. wss:// when the original web page was served by HTTPS).

ikarasdream commented 1 year ago

Morning, Speculative,

very fan of your work, any help in bringing Unreal projects to web is more than welcome (I will never understand why Epic discarded such a good tool).

We already tried the 4.24 fork by Nickshin, but after installing it and testing our project, we saw that the interface buttons didn't work (I don't know if we did something wrong on our side, but in the native 4.23 export they do work). And now we are interested in testing your project and installing your 4.27 version, which is even juicier with the new features that this version of Unreal includes.

But first of all I would like to ask, do the interface elements work correctly when exported to web? Specifically the buttons.

Any help is welcomed :D

Greetings!

SpeculativeCoder commented 1 year ago

Hi @ikarasdream

Which buttons did you notice were not working. Do you mean the blue buttons below the Unreal client (like Pause / Resume etc.?) or do you mean some buttons in your actual Unreal game / project?

If you mean the blue buttons at the bottom the 4.27 fork still has them. The Play/Pause should work as expected. The Clear IndexedDB should still clear out the local cached data (next reload of web page will then download the Unreal data again). The "Toggle Log" button was removed as that functionality wasn't working (you can still see log messages in the browser console though e.g. F12). Fullscreen should also work. However note that all buttons except "Clear IndexedDB" won't do anything until Unreal has started and is running successfully.

If you are referring to interface buttons in your actual game / project then in the 4.27 fork you should be able to click on them as the mouse / clicking works and Unreal receives the mouse clicks OK (at least for the UI elements I have done in my project).

ikarasdream commented 1 year ago

Hello Speculative,

thanks for your reply. Actually none of the buttons worked, neither the browser's own, nor the ones I made inside Unreal. I created some buttons in a Widget Blueprint in 4.24 and, when I packed the project into the web, they didn't work. They didn't even looked like the buttons I made inside the editor.

Yep, 4.23 was the last one to have the functionality inside Unreal itself and the buttons I made in that version did work when I brought them into the web.

Right now I'm installing version 4.27 thanks to your fork. I will update this post once I check if the buttons work for me or not.

JCBuck commented 1 year ago

Thank you for the very detailed steps to clone, and build it for 4.27.2

JCBuck commented 1 year ago

For those receiving an error after trying to run Setup.bat or Setup.sh

D:\dev\ue-4.27-html5-es3>Setup.bat
Checking dependencies...
Updating dependencies:   0% (0/64293)...
Failed to download 'http://cdn.unrealengine.com/dependencies/2605550-2722e8035d7444a18952cbd04a5c58c7/0104416c142ca7b3174660267c22f049db573bdb': The remote server returned an error: (403) Forbidden. (WebException)
Press any key to continue . . .

https://forums.unrealengine.com/t/upcoming-disruption-of-service-impacting-unreal-engine-users-on-github/1155880

UPDATE:

For Unreal Engine 4.25 and later, you should be able to successfully pull from the official release branch or you may optionally replace the XML file, as described below. Any release older than that, you must replace the XML file to successfully download the data required to build and run the engine.

–

To remedy the error in the builds, a new Commit.gitdeps.xml file has been attached to each release version as an asset. Please replace the existing Engine/Build/Commit.gitdeps.xml file with the new asset.

The complete list of releases with new XML files: 4.11.0-5.1.1

for convenience https://github.com/EpicGames/UnrealEngine/releases/download/4.27.2-release/Commit.gitdeps.xml

replace it in ue-4.27-html5-es3\Engine\Build

$ ./HTML5Setup.sh
./HTML5Setup.sh: line 24: cmake: command not found

In case CMake is installed via Visual Studio 2022 PATH=/c/Program\ Files/Microsoft\ Visual\ Studio/2022/Community/Common7/IDE/CommonExtensions/Microsoft/CMake/CMake/bin/:$PATH Use this in the git bash prompt

Python was not found; run without arguments to install from the Microsoft Store, or disable this shortcut from Settings > Manage App Execution Aliases.

then if python is installed via windows store turn off the aliases as per https://stackoverflow.com/questions/65348890/python-was-not-found-run-without-arguments-to-install-from-the-microsoft-store

-bash: cd: -b: invalid option
cd: usage: cd [-L|[-P [-e]] [-@]] [dir]
Engine/Platforms/HTML5/Build/PatchFiles/4.27.2.engine.patch:19: trailing whitespace.

Engine/Platforms/HTML5/Build/PatchFiles/4.27.2.engine.patch:29: trailing whitespace.

Engine/Platforms/HTML5/Build/PatchFiles/4.27.2.engine.patch:260: trailing whitespace.
                "Lumin",
Engine/Platforms/HTML5/Build/PatchFiles/4.27.2.engine.patch:428: trailing whitespace.

Engine/Platforms/HTML5/Build/PatchFiles/4.27.2.engine.patch:513: trailing whitespace.

warning: squelched 23 whitespace errors
warning: 28 lines add whitespace errors.
/mnt/d/dev/ue-4.27-html5-es3/Engine/Platforms/HTML5
Resolving SDK version '3.1.37' to 'sdk-releases-7c905cfc1ca6699f6ccb288ae174902cfbdcf0a2-64bit'
error: error: tool is not installed and therefore cannot be activated: 'node-15.14.0-64bit'

If getting this issue with tool not being installed and specifying nodejs.... It's because the HTML5Setup script had already cloned/downloaded the repo and attempted to install emsdk once, but failed when trying to find cmake or python. Since it didn't cleanup files it's in a bad state. The workaround or fix is to just delete the emsdk folder in ue-4.27-html5-es3\Engine\Platforms\HTML5\Build\ and rerun HTML5Setup.sh

if when building the html5 for a new project and it complains about langversion, maybe close and reopen editor? and if automation cs files complain about syntax,... rebuild automation tool: https://forums.unrealengine.com/t/unreal-engine-version-4-27-2-i-get-an-error-when-trying-to-package-any-project/270627/12

SpeculativeCoder commented 1 year ago

Thank you for the very detailed steps to clone, and build it for 4.27.2

Thanks @JCBuck - glad also you were able to work past the various issues you encountered.

SpeculativeCoder commented 1 year ago

Updated to emscripten 3.1.39

As part of this work I have updated the documentation page at https://github.com/SpeculativeCoder/UnrealEngine-HTML5-ES3 to include links to the official Epic Games fix(es) for the recent git dependencies issue (the fix is needed for any fresh installs). The info about the fix was added to the Installation section.

Mootbing commented 1 year ago

can you enable issues on your repo so I can ask questions there?

JCBuck commented 1 year ago

I'm not too familiar with cmake, but in effort to run HTML5Setup faster... is it okay to change the -j 1 to -j 32 for a 16C/32T CPU? It seems to run faster, but I'm not sure if there are any implications of correctness if doing so image

Mootbing commented 1 year ago

Can we also get a discord server running

SpeculativeCoder commented 1 year ago

can you enable issues on your repo so I can ask questions there?

Hi @Mootbing, there are some links to Issues / Discussions location (on the fork) here: https://github.com/SpeculativeCoder/UnrealEngine-HTML5-ES3#issues--discussions

SpeculativeCoder commented 1 year ago

I'm not too familiar with cmake, but in effort to run HTML5Setup faster... is it okay to change the -j 1 to -j 32 for a 16C/32T CPU? It seems to run faster, but I'm not sure if there are any implications of correctness if doing so

There was an intermittent failure during these parallel builds which would randomly cause the libraries to not be built (or corrupted). It was rare but happening to me a few times for sure and I saw discussions on the web about it possibily being exacerbated by parallel builds so went with the safest option for reliability and havn't had the problem since.

However for yourself if you are confident you can recover from the issue when it happens (the HTML5 packaging would probably error out complaining about some third party library) you could take the risk locally for massive speed increase of setup.

However I am also not aware / investigated if the issue was eventually fixed upstream.

Mootbing commented 1 year ago

can you enable issues on your repo so I can ask questions there?

Hi @Mootbing, there are some links to Issues / Discussions location (on the fork) here: https://github.com/SpeculativeCoder/UnrealEngine-HTML5-ES3#issues--discussions

Can we still have a discord server? would be helpful and esp for maintaining the repo postmortum