Announcement

Collapse
No announcement yet.

Weird Texture Colours When Using Download Image...

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    Weird Texture Colours When Using Download Image...

    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.


    Click image for larger version

Name:	Capture_PlayHTML.PNG
Views:	1
Size:	468.9 KB
ID:	1199878

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

    Click image for larger version

Name:	Capture_HTMLLauncher.PNG
Views:	1
Size:	20.3 KB
ID:	1199879

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

    Click image for larger version

Name:	Capture_PlayInEditor.PNG
Views:	1
Size:	301.6 KB
ID:	1199880

    Click image for larger version

Name:	Capture_PlayStandalone.PNG
Views:	1
Size:	599.8 KB
ID:	1199881

    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.


    Click image for larger version

Name:	Capture_Blueprint.PNG
Views:	1
Size:	245.3 KB
ID:	1199882

    Click image for larger version

Name:	Capture_Material.PNG
Views:	1
Size:	198.5 KB
ID:	1199883

    Is this a BUG? Or am I missing something specific to HTML 5 Development? Any help will be greatly appreciated.
    Attached Files
    Quinton Delpeche
    Founder - Gobbo Games | Designer - The Colony 2174 (Board Game) | Developer - Riders of Asgard

    #2
    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?
    Quinton Delpeche
    Founder - Gobbo Games | Designer - The Colony 2174 (Board Game) | Developer - Riders of Asgard

    Comment


      #3
      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.

      Click image for larger version

Name:	swizzle.png
Views:	1
Size:	260.5 KB
ID:	1118148

      Comment


        #4
        [MENTION=8221]Molt[/MENTION]: Yeah ... I did it as a temporary fix to continue with my project, but they have logged a Bug Report for this: https://issues.unrealengine.com/issue/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.
        Quinton Delpeche
        Founder - Gobbo Games | Designer - The Colony 2174 (Board Game) | Developer - Riders of Asgard

        Comment


          #5
          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/...a68ac96a47c485

          Image to texture 2d converter
          https://gist.github.com/emrahgunduz/...b11fe5069bd806

          Currently my web downloader works something like this:

          Click image for larger version

Name:	x.jpg
Views:	1
Size:	326.9 KB
ID:	1118298

          Comment


            #6
            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!

            Comment

            Working...
            X