The black space should appear transparent on DOM, there’s no background (transparent)/content
What I’m possibly doing wrong?
var material = new pc.StandardMaterial();
material.depthWrite = true;
material.redWrite = false;
material.greenWrite = false;
material.blueWrite = false;
material.alphaWrite = false;
material.blendType = pc.BLEND_NONE;
material.opacity = 0;
material.update();
this.entity.render.material = material;
Canvas: transparent
Camera clear: 00000000
Hi @Newbie_Coder,
I’m not sure about the DOM that isn’t affected by the PlayCanvas renderer. But if you are looking to create a transparent/blended material then you need this:
material.blendType = pc.BLEND_NORMAL;
material.opacity = 0.5; // set an opacity/transparency value
I have tried all possible blend types, seems like BLEND_NONE is the only way go.
However, I’m facing another issue
Correct:
Incorrect:
what am i missing? Engine-only project
This should enable transparent canvas:
const app = new pc.Application(canvas, {
mouse: new pc.Mouse(document.body),
keyboard: new pc.Keyboard(window),
graphicsDeviceOptions: {
antialias: true,
powerPreference: 'high-performance',
alpha: true
}
});
Camera transparency
camera.addComponent('camera', {
clearColor: new pc.Color().fromString('#00000000'),
fov: 60,
frustumCulling: true,
});
any ideas?
Got it.
canvas application dom was missing this css
position: absolute;
inset: 0;
1 Like
