Video Texture incorrect colors?

I am trying to get the video texture to match and it doesn’t seem to it almost feels like when the texture is combined with the color behind it, it feels like it multiplies it by black.

Base line video texture.

a.webm that is on a white background.

babylons

also… while remoted into my computer and having the playground open, every once in a while something crashes and all my browsers re-initialize their rendering which actually turns the colors correct in the playground. i cannot reproduce this its just because i am remoted in and something happens, all browsers go black and then load back up in what i assume getting their webgl context back. so its weird that the color shows the correct orange in babylon when this happens.

To add to this. I have tried changing to use an emissive texture and alpha. No difference. I tried different blend types as well as having light and no light. Still not quite there.

I don’t know your constraints but if it’s possible to mix with a shader, I would try to do the blending in nme.
I guess with premultiplied alpha, this should work. maybe it’s because alpha is deduced from diffuse? @PatrickRyan

1 Like

does NME work with a video texture? i don’t see the node for it and when i use a texture spot it won’t let me upload the .webm unless i can still pass it as a texture? I can give that a shot

VideoTexture can be used as any other texture. You’ll need to replace the texture in the NodeMaterial with it.

1 Like

@Wigen, the color shift is most likely due to the pre-multiplication of the alpha channel in your video. Normally, you would want your entire frame to be the orange that you chose and your alpha channel to not be pre-multiplied so that the value doesn’t change. Some formats and tools assume pre-multiplication, so it is hard to control in some cases. But, since you are just passing a solid color with an alpha, you can do it slightly differently. Passing the video into a node material like @Cedric mentioned gives you access to the alpha channel in the video. Simply using this alpha channel and combining it with a flat color3 will give you what you are looking for as well as control over changing the color in code at any time you want. Here’s a simple update to your PG to demonstrate.

4 Likes

@PatrickRyan So while that works, it only works for that specific video texture with a solid color.

What i just tried was to divide the alpha output with the color, it also got the desired output. and still works in several different use cases. Not super happy with dividing color, feels dirty. but its working.

left is basic way, right is the nme changed way.

the nme

Also to note this is user generated and not something that we have control over exactly. Just trying to match expectation of how it looks on a website to look the same in babylon.

@Wigen, yes, if you have more complex video than a simple color gradient you will need to divide RGB by A to remove the premultiply done for alpha which is converting the image back to straight alpha. If you were using a static image, you would likely want to convert the image back to straight alpha outside the shader so it’s done only once rather than pixel by pixel every frame. With video, you change the texture every frame so the hit to perf has to either happen when the video gets loaded and pre-processed to convert from pre-multiplied to straight alpha or you are doing the divide each frame for each pixel.

If you are using user-generated content knowing if there is premultiplied alpha in the video is likely impossible unless you are requiring a format where you know it will default to premultiplied alpha. In this case, you may need to add a switch to the shader (lerp node) to enable the divide by alpha or allow the RGB to pass straight through. This value can be plumed up to the GUI level to allow the user to set the switch value correctly.

got it… Thank you very much!

1 Like