I have a problem where entities with an opacityMap change the rendering of entities behind,
the problem is visible when I change the pitch of my camera angle to be greater than 30, and goes away when the pitch is closer to 0
The entity that is behind, have opacity on its material, so maybe the alpha is added ?
Camera angle below 30
Camera angle above 30
The OpacityMap
The opacityMap is just a canvas, drawn with opacity 0 on the areas I want to mask out,
below is a code snippet of the creation of the material:
// 1. hide the entire thing
var canvasMask = Utils.createCanvasWithColor(1024, 1024, "rgba(0, 0, 0, 0)");
// 2. show the text, with padding.
var ctx = canvasMask.getContext("2d");
ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
ctx.fillRect(x-padding, y-padding, objText.width+(padding*2), objText.height+(padding*2));
var texture = Utils.createCanvasTexture(this.app, canvas);
var mask = Utils.createCanvasTexture(this.app, canvasMask);
var material = entity.model.material.clone();
material.diffuseMap = texture;
material.emissiveMap = texture;
material.opacityMap = mask;
material.blendType = pc.BLEND_NORMAL;
material.opacityMapChannel = "a";
return material;
// Utils create Canvas texture:
createCanvasTexture: function(app, canvas){
var texture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8_A8,
autoMipmap: true
});
texture.setSource(canvas);
texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
texture.magFilter = pc.FILTER_LINEAR;
texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
return texture;
},