Inside the following playground, you can see that only the blue box – which is the opaque box – is showing its stroked highlight effect behind the opaque occluding box.
Sure, if I set the hl.outerGlow = true; It will color the red box behind the opaque occluding box too. But the only effect I want is the stroke highlight, not the color.
Is there any way that I could show the stroke highlight on the red box behind the opaque box? Thank you.
Welcome aboard!
It’s a bit of a side effect that you can see the outline of the opaque objects behind the wall and not the outline of the transparent objects: that’s because the opaque objects are drawn before the wall, which happens because the default sorting mechanism (based on material ids) will render the opaque objects before the wall.
If you create the wall material before the box (opaque/transparent) materials, you will see it does not work anymore:
You can force the wall being drawn after the opaque and transparent objects by setting its renderingGroupdId to something greater than 0 (which is the default value for all objects):
Wow, I don’t know how to say thank you. This is the warmest welcome from the community I’ve ever experienced. I’ve seen your replies a lot in the similar posts and it always helps me out. Thanks again. 
It works very well in the case that the transparent object is behind the opaque wall! But I just found a little problem when the opaque object is behind or inside the transparent object. As shown in PG, the opaque object will be like as if it is in front of the transparent wall. Is there any fix to this?
skybox1 has renderingGroupId=0 and the boxes have renderingGroupId=1, meaning the boxes will be drawn after skybox1. As skybox1 is a transparent object, it does not write to the zbuffer so the boxes are not culled by it. That’s why they appear in front of. There’s not much you can do except making sure the transparent objects have a renderingGroupId value greater or equal to the one of the opaque objects they must hide.