Hello! I have a working hevc and webm dual source setup that is letting me play a transparent video in HTML. I’m trying to create a texture using that video and use that to display the transparent video in 3D space on a material. Following various tutorials, I landed on:
var videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R5_G6_B5,
autoMipmap: false
});
videoTexture.minFilter = pc.FILTER_LINEAR;
videoTexture.magFilter = pc.FILTER_LINEAR;
videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
var video = document.getElementById("main-video");
videoTexture.setSource(video);
for (var i = 0; i < this.materials.length; i++) {
var material = this.materials[i].resource;
material.emissiveMap = videoTexture;
material.opacityMap = videoTexture;
material.blendType = pc.BLEND_NORMAL;
material.update();
}
which produced this result:
(You can see the working transparent video in the upper corner)
Seeing this before with other alpha materials I was fairly sure that the opacity map channel was set to “r” by default, so I decided to set that in the code:
for (var i = 0; i < this.materials.length; i++) {
var material = this.materials[i].resource;
material.emissiveMap = videoTexture;
material.opacityMap = videoTexture;
material.blendType = pc.BLEND_NORMAL;
material.opacityMapChannel = "a";//NEW
material.update();
}
which yields this unexpected result:
It seems like it can’t find the alpha channel in the texture.
I thought it was just a problem with transparent video since that’s a fairly niche use case, but when I copied the video onto a transparent canvas and then used the canvas in place of the video for the texture source, I was getting the exact same issue.
Code changed to get a canvas as the source:
var canvas = document.getElementById("main-canvas");
videoTexture.setSource(canvas);
In the screenshots, you can see the canvas in the top right (video is in the top left)
I feel like there is something wrong with the texture settings, or the material settings. Is their another way I should be setting the alpha channel?
This is a related post, but it seems like they used a workaround rather than fixing the core issue: Videotexture with alpha channel
