UE4 Scene to WebApp

Development Platform & Builds
,
1

Hey,

I have couple questions regarding possibilities of conversion of UE4 scene into web app.

I’m not really good at UE4 at all. So it would be great if i can find an expert who will be able to complete specific task - if it is possible at all of course.

Here is scope of work:

  1. This app will not include any type of animation. It will be a static scene with quality of models, light settings and textures similar to a work completed by Sagar: BeatSpot dynamic materials demo - YouTube
    Thought level of details and number of elements within scene will be not that high - up to 3-4 objects. Do not worry about creatiopn of 3d models and other scene settings -this will be handled by another person. Right now i need to know if i can convert it to web based app fromUE4 project.
  2. Ability to work with this app through web browser.
  3. There should be several presets (3d objects, cameras, materails) which user can change (e.g. pick out of list of presets). Plus an option for user to upload their own textures and apply to 3d object.
  4. Possibility to output final version of scene to picture.

These are basic requirements. Most of all i’ve missed some details which may be important, so feel free to ask.

Best!

2

Web app will do whatever your app can do. Including widgets, so you can create your ui inside UE4 and set everything up with blueprints.
If you’ve added touch interface support, also will work on mobile devices on browser.

However. Desktop and web apps are quite different, especially in render quality. Your reflections, lighting, and probably materials will look pretty much different. Complex mats will not compile correctly. Dynamic lights will have problems. Post processing is not fully supported… etc…

So, in short, you’ll need to do a lot of hacks and changes. But it will work. And oh it will make you happy when you accomplish what you want to do, trust me.

Changes you ask can be easily made. For textures (that require user upload) will need a few c++ classes to accomplish but is possible.
You can also talk with javascript back and forward and use html + dom elements for your ui if you need it.

When it comes to output of a final picture, you’ll need to change a few things before packaging. HTML canvas for webgl requires a setting to be enabled for capturing images from current buffer. For emscripten + UE4 this setting is disabled

The file is C:\Program Files\Epic Games\4.10\Engine\Source\ThirdParty\HTML5\emsdk\emscripten\1.30.0\src\library_browser.js
Find preserveDrawingBuffer and comment GL_TESTING if-endif lines, like this:


// #if GL_TESTING
        contextAttributes.preserveDrawingBuffer = true;
// #endif

Am i getting into too much detail here :slight_smile:
Hope these can answer some of your questions.

3

Thanks for quick reply. Sent you private message.