Objects behind transparent object sometimes get occluded

Help & Support
1

I have created a semi transparent cube(opacity 0.5) which acts as a pointer. When the user taps the screen, the cube and the material are cloned and the opacity is set to 1. I’m using blendType pc.BLEND_NORMAL.

After placing a cube, when I move the pointer around the placed cube sometimes gets occluded. When the pointer is infront of the cube, it works as expected, but when the pointer is halfway through the cube, it gets occluded.

2

Hmm, not sure if it’s a bug with a blending mode and the transparent canvas … what are your camera’s near/far planes? Try narrowing their margin (increase near plane / decrease far plane) just in case it’s a sorting issue.

3

Thanks for the reply.
Issue still persists at nearClip 0.1 and farClip 0.5

4

does the other opaque cube has any transparency set?
if one is opaque, and one transparent, opaque should always render first and so should never be occluded. Do you have a simple repro to try?

5

The opaque cube has opacity set to 1.
GitHub repo:

Live demo:
https://gamerwael.github.io/playcanvas-ar/
Click the bottom right button to enter AR and then anywhere on screen to place a cube.

This is how I’m creating the semi-transparent pointer:

var material = cube.model.meshInstances[0].material;
material.opacity = 0.5;
material.blendType = pc.BLEND_NORMAL;
material.update();

And this is how I’m creating the opaque cube:

var cubeclone = this.object.clone(); //this.object is the original cube
var materialclone = this.object.model.material.clone();
cubeclone.model.meshInstances[0].material = materialclone;
materialclone.opacity = 1;
materialclone.update();
6

when you set opacity to 1
set blendType to BLEND_NONE as well - this is what marks the material as opaque and should force it to render first.

1 Like
7

Thanks a lot. That does fix the issue.
:slight_smile:

8

Unfortunately, it seems the issue still persists. Now whenever I hover the semi-transparent pointer over the opaque cube, the opaque cube also becomes semi transparent. You can see the wooden floor when my pointer is over the opaque cube.

Screenrecorder-2020-11-18-14-04-20-675

I have updated the GitHub demo to use BLEND_NONE.

9

It’s a long shot, but you might try enabling Alpha to Coverage for the various materials.

10

It’s possibly this will fix your issue

(will be released as part of next engine release)