as you can see if we set a mix-blend value most of them make the video pixelated like so:
Apparently it messes give other elements as well even ones that do not have the mix-blend attribute:
are tere any solutions to fit this or is it just one of those things ?
I think this might be related to the order in which the browser applies the operations.
- Browser rasterizes the video into bitmap
- Browser applies CCS3D transformations, scaling the bitmap up
- Browser applies mix-blend-mode.
I’ve run into a similar issue with fonts. This might be because your <div> is small in pixel values. The browser has to convert it to bitmap format to apply the mix-blend-mode, and if it’s something small, like 64px x 32 px, then that’s all the pixels you’ll get.
I ended up coming up with the solution of using a <div> that was 10x larger than necessary (so in my example it’d be 640 x 320), then scaling the CSS3D Scene down 10x with cssScene.scale.set(0.1, 0.1, 0.1); That way when the browser performs the rasterization, you’ll have all those extra pixels to work with.
I hope this solution works for you as well. I wrote more about it in this thread:
I’d also like to add if you apply for example mix-blend-mode: overlay or screen which is meant to get rid of the color black of the background of the video it doesn’t have the expected result and the black still remains
scaling the CSS3DObject is what i did instead of scene and it works fine when mix-blend-mode isn’t present
ok so i’ve been messing with the css and i found if you don’t apply mix-blend-mode to any children div and add it to the main parent div generated by css3d object it works as expected but then all the other children will also have the mix-blend applied to them but hey no biggy it is hella laggy tho for some reason…
