Transparent material

Help & Support
1

Hello,

i’m trying to make material transparent for some meshes.

  1. I have texture with alpha chanel (png).
  2. some code from fragment shader:
    vec4 diff = texture2D(uDiffuseMap, vUV0);

// this temporay code to make me sure that alpha is present in loaded texture
if (diff.a > 0.2) {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); // none transparent part is green
}
else {
gl_FragColor = vec4(0.0, 0.0, 1.0, 0.2); // transparent part is blue
}

3.- and i set some material properties:
// set blending enabled and configure blend func for transparancy:

mesh.material.blend = true;
mesh.material.blendSrc = pc.gfx.BLENDMODE_SRC_ALPHA;
mesh.material.blendDst = pc.gfx.BLENDMODE_ONE_MINUS_SRC_ALPHA;

mesh.material.setShader(shader_);
mesh.material.setParameter(‘uDiffuseMap’, tex_);

I think it is gonna be enough to make material transparent, but it does not work - i see green none transparent part (this is correct), and white part instead transparent (this is wrong). What is a my mistake?

2

What is the URL for your project?

3

Hmmm. Actually, you just use the PlayCanvas Engine don’t you? Is it possible to put a running example showing the problem to DropBox? Or post a ZIP of your app? It’ll be much easier to help you if I can run and debug something.

4

I place example on public server here:
http://elarbis.assets2.izhpt.com/elarbis/Transparent_Test/index.html

I left in scene only couple of mesh - plane and mesh with transparent material.

And also zip-file with example: https://drive.google.com/file/d/0B9jhowB_SK61OGQ1RjZNS2VhWGM/view?usp=sharing

5

Hey Anton,

I belive the problem is in draw call order (debug playcanvas.js, line 6547):
Order in for loop is:

material.name
"Cylinder001"
material.name
"plane"
material.name
"Untitled"

So first there is nothing, just white color. Then cylinder with transparent texture is being drawn. But there is nothing in behind, just white canvas. So it will transform transparent in white color. Plane is second a and skybox (Untitled) is last. You want to push both before this call.

Unfortunately, I have no idea how to fix it :slight_smile:

Good luck

6

I enjoyed every slide :slight_smile:

https://www.udacity.com/course/viewer#!/c-cs291/l-91376562/m-103530750

7

Thanks, I’ve fixed that issue already.

material.name
"Cylinder001"
material.name
"plane"
material.name
"Untitled"

Unfortunately, I have no idea how to fix it

Good luck

PlayCanvas sorts render queue by keys (kind of draw call id) or by distance (if it possible). Skybox doesn’t have suitable blendType for sorting by distance and have key less then rest of draw calls, that cause it was allways last in render queue.

It would be nice, if playcanvas has some API to control render queue, most of engines have it.

8

If there is a missing feature you think we need. The best thing is to add an issue over at https://github.com/playcanvas/engine. Then it will catch the attention of our graphics programmer. :smile:.