Texture 2d shows wrong colors from jpeg on HTML5 package

[anonymous_user_83949151]

Hi friends!! I am working to load jpeg files from origin server. I want use this files to make a Texture2D and put this on static mesh component.

My code is a combination of C++ class and a blueprint child of this:

Blueprint Class

GegCuadros()

void ACOD_cargaObras::GetCuadros(){
	TSharedRef < IHttpRequest > Request = FHttpModule::Get().CreateRequest();

	//Set Request
	Request->SetHeader(TEXT("Content-Type"), TEXT("text/html; charset=UTF-8"));
	Request->SetURL(TEXT("http://navesixtina.es/juanga/interior01.jpg"));
	Request->SetVerb("GET");
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, Request->GetURL());
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Green, TEXT("Activado"));
	Request->OnProcessRequestComplete().BindUObject(this, &ACOD_cargaObras::LoadTexture);
	if (!Request->ProcessRequest()){
		GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("Problem processing the request "));
	}
}

LoadTexture

void ACOD_cargaObras::LoadTexture(FHttpRequestPtr Request, FHttpResponsePtr Response, bool bWasSuccessful){
	IImageWrapperModule& imageWrapperModule = FModuleManager::LoadModuleChecked<IImageWrapperModule>(FName("ImageWrapper"));
	IImageWrapperPtr imageWrapper = imageWrapperModule.CreateImageWrapper(EImageFormat::JPEG);
	UTexture2D* imagenTexture = NULL;
	if (bWasSuccessful){
		if (!Response.IsValid()){
			UE_LOG(LogTemp, Warning, TEXT("Texture is not valid"));
		}
		else{
			fileData = Response->GetContent();
			if (imageWrapper.IsValid() && imageWrapper->SetCompressed(fileData.GetData(), fileData.Num())){
				const TArray<uint8>* uncompressedRGBA = NULL;
				if (imageWrapper->GetRaw(ERGBFormat::RGBA, 8, uncompressedRGBA))
				{
					imagenTexture = UTexture2D::CreateTransient(imageWrapper->GetWidth(), imageWrapper->GetHeight(), PF_B8G8R8A8);
					void* dataTexture = imagenTexture->PlatformData->Mips[0].BulkData.Lock(LOCK_READ_WRITE);
					FMemory::Memcpy(dataTexture, uncompressedRGBA->GetData(), uncompressedRGBA->Num());
					imagenTexture->PlatformData->Mips[0].BulkData.Unlock();
					imagenTexture->UpdateResource();
					this->OnImagenCargada(imagenTexture);
				}
			}
		}
	}
}

The code runs perfect in the UE4 Editor!!
In the image you can see the result. The left mesh has got a texture charge with UE4Editor, and the right mesh it’s charged from code:

But, when I package the project on HTML5. I see this:

The web console and debug console don’t show error messages. I think that it’s a adjustment properties problem in UTexture2D but when I try edit this the web browser throws an error.

Thanks for your attention!!

[anonymous_user_83949151]

Ok Guys!!! I have solved my problem.
I think it’s a HTML5 packaging bug. When I was trying to run the project launcher the UE4 code changes the order of RGB components to BGR.
I solved the problem with a personal function. This function read the components of “uncompressed RGBA”, they are saved on TArray and they are loaded to texture from TArray .
Now I see the blue rose in UE4 Editor and the red rose in HTML5 XD.

This is my code now:

void ACOD_cargaObras::LoadTexture(FHttpRequestPtr Request, FHttpResponsePtr Response, bool bWasSuccessful){
	IImageWrapperModule& imageWrapperModule = FModuleManager::LoadModuleChecked<IImageWrapperModule>(FName("ImageWrapper"));
	IImageWrapperPtr imageWrapper = imageWrapperModule.CreateImageWrapper(EImageFormat::JPEG);
	imagenTexture = NULL;
	if (bWasSuccessful){
		if (!Response.IsValid()){
			UE_LOG(LogTemp, Warning, TEXT("Problem on LoadTexture "));
		}
		else{
			fileData = Response->GetContent();
			if (imageWrapper.IsValid() && imageWrapper->SetCompressed(fileData.GetData(), fileData.Num())){
				const TArray<uint8>* uncompressedRGBA = NULL;
				if (imageWrapper->GetRaw(ERGBFormat::RGBA, 8, uncompressedRGBA))
				{	
					uint8ToFColor(*uncompressedRGBA);
					TextureFromImage(
						imageWrapper->GetWidth(),
						imageWrapper->GetHeight(),
						uncompressedFColor,
						false);
				}
			}
		}
	}
}

uint8ToFColor

void ACOD_cargaObras::uint8ToFColor(const TArray<uint8> origin){
	uint8 auxOrigin;
	FColor auxDst;

	for (int i = 0; i < origin.Num(); i++){
		auxOrigin = origin[i];
		auxDst.R = auxOrigin;
		i++;
		auxOrigin = origin[i];
		auxDst.G = auxOrigin;
		i++;
		auxOrigin = origin[i];
		auxDst.B = auxOrigin;
		i++;
		auxOrigin = origin[i];
		auxDst.A = auxOrigin;
		uncompressedFColor.Add(auxDst);
	}
    	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Green, TEXT("uint8ToFColor DONE!!"));
    
    }

And thanks to Rama (Is there a faster alternative to FImageUtils::CreateTexture2D? - Programming & Scripting - Epic Developer Community Forums) I use TextureFromImage

void ACOD_cargaObras::TextureFromImage(const int32 SrcWidth, const int32 SrcHeight, const TArray<FColor> &SrcData, const bool UseAlpha){
	// Create the texture
	UTexture2D* MyScreenshot = UTexture2D::CreateTransient(SrcWidth, SrcHeight, PF_B8G8R8A8);

	// Lock the texture so it can be modified
	uint8* MipData = static_cast<uint8*>(MyScreenshot->PlatformData->Mips[0].BulkData.Lock(LOCK_READ_WRITE));

	// Create base mip.
	uint8* DestPtr = NULL;
	const FColor* SrcPtr = NULL;
	for (int32 y = 0; y<SrcHeight; y++)
	{
		DestPtr = &MipData[(SrcHeight - 1 - y) * SrcWidth * sizeof(FColor)];
		SrcPtr = const_cast<FColor*>(&SrcData[(SrcHeight - 1 - y) * SrcWidth]);
		for (int32 x = 0; x<SrcWidth; x++)
		{
			*DestPtr++ = SrcPtr->B;
			*DestPtr++ = SrcPtr->G;
			*DestPtr++ = SrcPtr->R;
			if (UseAlpha)
			{
				*DestPtr++ = SrcPtr->A;
			}
			else
			{
				*DestPtr++ = 0xFF;
			}
			SrcPtr++;
		}
	}

	// Unlock the texture
	MyScreenshot->PlatformData->Mips[0].BulkData.Unlock();
	MyScreenshot->UpdateResource();

 	UMaterialInstanceDynamic* instance = cubeMesh->CreateAndSetMaterialInstanceDynamic(0);
	instance->SetTextureParameterValue(FName("imagen"), MyScreenshot);
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("TextureFromImage "));

}

Maybe it’s a problem in Unreal Engine to fix in future releases.

Thanks!!!