KHR extensions, transmission and 1.58 engine release

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 ? :slight_smile:

Thanks you all in advance !

@Gustav_Sterbrant Did you have an example project that would work with this?

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

@Gustav_Sterbrant did

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.

2 Likes

@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:

image

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

1 Like

Quick example:
https://playcanvas.com/project/1010851/overview/glass-example

2 Likes

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

1 Like

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