Combine a cubemap with transparent background with another cubemap

Greetings to anyone reading this!

I'm new to coding shaders, and I need some help to resolve a problem I'm facing.

I'm working on a shader to manipulate a stereoscopic image in a skybox for a VR application. The image, which shows the inside of a car, has some Neon lights on it. The player should be able to change the color of the neon lights upon selecting a color from a color list.

I've already managed to make the stereoscopic parallax effect work (thanks to the shader provided in this article), and I've managed to integrate into it an algorithm that looks for a specific color and replaces it with with another color of my choosing.

The problem is that the color replacement algorithm doesn't quite differentiate what is neon from what just happens to be a similar color to the neon. The image I have has the neon on a red color, and that color also occurs on certain parts of the radio and locking clip. If I increase the range of the substitution enough, the whole car gets slighly tinted with the color.

I'm currently unable to obtain an image with a different neon color, so i'm unable to simply swap pictures on user selection. I need to do this through manipulation of the image I have, preferably on real-time.

My idea, then, is to separate the neon parts manually through photoshop, deleting everything that is not neon and leaving the file at the same size as the original, but with a transparent background.
Then, I''d load both the neon and cubemap into the shader, do the color manipulations in the neon, and "paste" it on top of the original cubemap.

Only, I don't know how to do that.

*TL;DR*

Is there any way to take an image with transparent background and, through a shader, paste it on top of another image that has the same dimensions ?

Regards

Marcos

 

The answer to your question is yes, of course. In some respects pasting an image on top of another is kind of the main purpose of shaders.

However, assuming you're not using .exr or .hdr image files, there's no need to use two images. You can store the alpha to separate the neon from the rest of the image in the main cubemap's texture, apply the color replacement, then blend between the colorized and original images using the lerp() function. The reason I call out .exr and .hdr is those are usually stored as either DXT5 RGBM or BC6H, neither of which have a usable alpha channel. However, if you're using .png or .jpg or the like, then the alpha channel will work. Then it's just a matter of doing something like this:

half4 tex = texCUBE(_tex, i.texcoord);
half3 tex_colorized = // color replacement
half3 c = lerp(tex.rgb, tex_colorized, tex.a);
return half4(c, 1);

For this to work you'll need to modify the existing shader to remove all of the DecodeHDR stuff. If you are using an hdr image for this, then you will need to use a second texture, however I would still just store a mask rather than an otherwise copy of the original. For that you'd need two more cubemaps and sample them just like the current _texLeft and _texRight textures inside of the if statements.

 

@bgolus you seem to answer every shader question I've ever had