Weird Texture Colours When Using Download Image

[qdelpeche]

I have encountered a weird Texture Anomaly when using “Downlod Image” in an HTML 5 project.

The image below show the issue, starting from left to right here are the various results:

1. Poster 1 shows the default image that is being downloaded.
2. Poster 2 shows a new image downloaded as a JPG
3. Poster 3 shows a new imaged downloaded as a PNG
4. Poster 4 shows a failed download and using the default image included in the project.

The image below shows the HTML Launcher is serving the images and they are correctly referenced:

The weird thing is that the Play In Editor version and the Standalone version both work correctly as can be seen below:

You can download the project here or you can follow these steps to recreate the project:

1. Launch Unreal Editor and Select a Blank Project (I used 4.13.2)
2. Select Mobile/Tablet and Scalable 3D or 2D with No Starter Content
3. Add the blueprint is indicated below and add the object to the map.
4. Apply the material is indicated below and then run the project.

Is this a BUG? Or am I missing something specific to HTML 5 Development? Any help will be greatly appreciated.

[qdelpeche]

Okay … so as an experiment, I swapped the Red and Blue channels in the image and then used that image. It now displays correctly in the HTML build and obviously incorrect in the Editor and Standalone build.

So something during packaging is switching the two channels around of the material.

Is there a way I can swap the channels around inside the Material instead of having to edit the raw image file?

[Normalvector]

Although it feels ‘wrong’ to need this you can manipulate the channels pretty easily in the Material to do the channel swapping.

After your Texture Sample (Or however you’re reading the material) add a MakeFloat3 node. Although MakeFloat3’s inputs read X, Y, and Z which implies a vector you can use this to create new colours, with X being the Red component, Y the Green, and Z the Blue.

In this case to do the channel swap we just connect the Texture Sample’s Red output to the MakeFloat3’s Z (“Blue”) input, the Green output to MakeFloat3’s Y (“Green”), and the Blue output to MakeFloat’s Z (“Blue”). Now just replace any other connections to the Texture Sample with connections to the MakeFloat3 and it should work nicely.

[qdelpeche]

@Molt: Yeah … I did it as a temporary fix to continue with my project, but they have logged a Bug Report for this: Unreal Engine Issues and Bug Tracker (UE-38351)

I am picking up a few anomalies with the HTML builds … but this one has been the weirdest one. I have a flag in my Game Instance now that I set when I am doing an HTML build that when enabled uses an alternative material. Because I am building for HTML, Android, and IOS … this was the best way for me to maintain one code tree. Not the best solution … but we do what we have to.

[anonymous_user_1d9c3aac]

Unreal engine download assumes the file is in BGRA format, you can check the downloader code and see that raw data is for looped into a texture2d.

You can add a c++ class and create a custom image downloader. You can download the image from the web, directly convert it to texture2d and it will be fine.
I don’t have the exact code, but you can check these two and merge it in your own class…

Web downloader – saves image to disk

https://gist.github.com/emrahgunduz/5c3a8bbc2ef846a43ba68ac96a47c485

Image to texture 2d converter

https://gist.github.com/emrahgunduz/2c9d020c3c17e640dfb11fe5069bd806

Currently my web downloader works something like this:

[RobMilliken]

The original issue by qdelpeche should be pasted somewhere as a tutorial for downloading at runtime images based on a URL, inadvertent as it may be… many thanks!