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: