Could need some advice on adapting the SHADER BURN example

Help & Support
,
21

Thanks a lot for the example. I think I understand now.

And I can get a custom shader running. I know because when setting dAlpha to 0.5 my complete ship turns half transparent. The complete shader code in that case:

void getOpacity() {
    dAlpha = 0.5;
}

But when using the shader code of your example:

uniform float material_opacity;

#ifndef CUSTOM_GEM_UNIFORMS
#define CUSTOM_GEM_UNIFORMS
uniform sampler2D uHeightMap;
uniform float uTime;
#endif

void getOpacity() {
    dAlpha = 1.0;
    
    float t = uTime; 
    float height = texture2D(uHeightMap, vUv0).r;
    if (height < t) {
        dAlpha = 0.0;
    }
    dAlpha *= material_opacity;
}

Then model is wrong. Parts are missing and when rotating parts are dissapearing or appear depending on rotation.
I started to comment out lines and this is the shader that shows my complete ship correctly:


#ifndef CUSTOM_GEM_UNIFORMS
#define CUSTOM_GEM_UNIFORMS
uniform sampler2D uHeightMap;
uniform float uTime;
#endif

void getOpacity() {
    dAlpha = 1.0;
    
    float t = uTime; 
    //float height = texture2D(uHeightMap, vUv0).r;
    //if (height < t) {
       // dAlpha = 0.0;
    //}
    //dAlpha *= material_opacity;
}

Off course without dissolving. Just a complete ship.
But when adding the line

float height = texture2D(uHeightMap, vUv0).r;

again, I get this missing parts again.

23

I may know what is wrong:

Some parts of the ship do not have a material yet. I suspect those parts to fail.
I will investigate further…

24

Well, the model did have materials for all parts, but some materials did not have an associated texture. In that case the new opacity shader results in a compiler error.

So I removed all parts that did not have a texture and now it works.
There probably is a better way to handle this, like testing if there is a texture. But I do not know how and I do not know if it is a particular texture that is needed to prevent the compiler error.

But unfortunately, there is an other problem:

The object doesn’t really get transparent. When I draw something behind it, that part stays invisible.

See this demo: PlayCanvas 3D HTML5 Game Engine

But this is only for lines. Solid objects works perfect. So maybe it has nothing to do with the code but is it something about line drawing and transparancy.

25

There are multiple issues you are running into here:

  1. As you saw, some meshes don’t have materials and therefore aren’t affected by the shader

  2. There are materials that don’t use a texture and therefore the shader optimisation process to reduce the size of shader, removes the UV0 sampler as if there is no texture, you don’t need UV coordinates. However, we do need it for the shader. So we have to add a blank texture to the material. (See here for updated project in doing this: PlayCanvas 3D HTML5 Game Engine

  3. Rendering transparent meshes over each other. See this thread for more details: [SOLVED] Layers and affect of the 'Order' - #7 by yaustar TLDR is that it’s difficult to render complex transparent meshes in the right order to the camera. When the wrong order happens, you get issues where some meshes can’t be seen.

Regarding 3, I don’t know if there is a way not to render to the depth buffer here if a pixel is fully transparent @mvaligursky / @Leonidas ?

Otherwise you are in the realm of forcing the render with render layers (ie change the render component layers of the meshes inside the ship to render first, then the outside)

I do wonder if it’s possible to do this on the diffuse chunk and discard the pixel instead? That way, you aren’t rendering on the transparent layers :thinking:

26

if the shader discards the pixel, the pixel does not write to depth.
So discard the pixels with alpha being zero.

1 Like
27

Thanks Martin!

So after updating the shader to use discard instead of setting the transparency to 0, it looks a lot better.

Before:

image
image1920×1869 147 KB

After:

image
image1920×1652 130 KB

There is still an issue with some areas because they are already using semi transparent materials (wind screen etc)

This is likely be due to the render order issue mentioned before. A quick-ish fix to this is to have all the transparent parts of the model on a separate mesh instance/mesh in your modelling package before exporting.

That way on load, you can set the render component for that mesh to be renderer last after the rest of the ship.

1 Like
28

Thanks a lot you all! This is really great support! It is good to notice that you take the time to explain to people who still have to learn a lot.
And I already learned a lot and understand the dissolve demo completely now :slight_smile:

I’m ready for the next step: I want to adapt the dissolve algorithm. Because I do not like it 100% yet.
I would like to make the ship appear and dissapear not this random but from the middle of the ship to the outside.

So I want to calculate for each pixel the distance to the middle point of the ship and take that value into account for the opacity calculation/decision.

But then there is something new (for me) needed: I would need to know the position of the pixel. Is that somewhere available in some variable? Can I somehow get this value?

29

Hi Yaustar,
I made a mistake. I was not allowed to put the ship model on public available projects. So I changed some projects to private and deleted the ship on public projects such that the demo works with an other model.
But now I see you are using a copy of the model in a public project. Can you please delete that one?

30

Deleted the model