Hi all, we are trying the new materials properties, available within 1.58 release.
Our interest is about achieving translucency/refraction effect, which is available,at the moment, only by loading a glb programmatically or using the viewer.
We tried the new material properties but basically we dont know ( withouth transmission property which is not present ) how to render a transparent/translucent material, any hint, sample or inspiration ? 
Thanks you all in advance !
I saw some days ago i saw experiment about this in twitter, does anybody has any example or hint to move on this transmission stuff ?
Thank you
Hello @Mirko_Arcese!
I’ve created a sample project to test this out: PlayCanvas | HTML5 Game Engine
There are a few things to look out for, glossiness needs to be fairly high for refractions to shine through as the material would otherwise act more as a diffuser than a sheet of glass.
A valid setup for the material can look like this:
Note that under Opacity, the material is set to do alpha blending. This isn’t really to do so much with the actual blending as it is putting the object being rendered into the transparent layer.
The camera also needs to have a script on it, which is very simple but it’s needed to enable the color grabpass.
var Grabpass = pc.createScript('grabpass');
// initialize code called once per entity
Grabpass.prototype.initialize = function() {
entity.camera.camera.requestSceneColorMap(true);
};
// update code called every frame
Grabpass.prototype.update = function(dt) {
};
A note on this is that the script is only necessary to enable refractions when playing the game. It should already be working in the viewport in the editor.
The last thing that needs to be done is to set the canvas to render transparently. This is really a bug in the engine that we plan to fix very soon, but for the time being it’s necessary to set that flag for this to work.
@Gustav_Sterbrant thank you very much for the example, but still I cant get how to obtain a glass translucency, basically when I work with GLBs, I use transmission and volume KHR, in order to obtain things like this:
Is it possible to create this kind of material in playcanvas editor ?
@Mirko_Arcese Hello again!
So we also realized the default layer order is also a problem. The way it’s setup by default stops the skybox from being part of the refraction! To fix that, you need to also rearrange the layers to this:
Note how the Depth layer is after World and Skybox layers. The Depth layer is responsible for triggering the grabpass, so if it happens before the Skybox is rendered, it won’t be in the refractions!
Thanks,
Gustav
We’ve created a small example scene with the different properties being applied that can help you a bit more: https://playcanvas.com/project/1010963/overview/158-new-material-params-example
Thanks a lot, just forked it !
We will implement soon in our scenes, applying the needed changes for shading pass.
Looking forward for alpha fix, will open another thread to better understand and share PC / KHR.
Thanks again @yaustar @Gustav_Sterbrant
@yaustar @Gustav_Sterbrant Hi, actually can’t have lights affecting refracion/iridiscence, camera does have grabpass script, and layers order should be correct, however if a light is inside or behind object, lights doesn’t pass through, how to solve this ?
I’m not sure what you mean here @Mirko_Arcese
Can you post an example project and expected result please?
Hi, and sorry for late reply, I’m sure i have to experiment a bit more in order to be more clear on this, feel free to close this thread abnd thank you for your time.
