solved Barycentric position in shader always zero

[Nacheitor]

Hi, I'm trying to develop a shader in Babylon like this:

http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/

The problem is that always return the barycentric attribute (0, 0, 0). Someone know what could be the problem?

My shader code is the following:

Quote

BABYLON.Effect.ShadersStore['infillVertexShader'] = `
            precision highp float;

            attribute vec3 position, barycentric;
            uniform mat4 worldViewProjection;
            varying vec3 vBC;

            void main(){
                vBC = barycentric;

                vec4 p = vec4(position, 1.);
                gl_Position = worldViewProjection * p;
            }
        `;

        BABYLON.Effect.ShadersStore['infillFragmentShader'] = `
            #extension GL_OES_standard_derivatives : enable
            precision highp float;

            varying vec3 vBC;

            float edgeFactor(){
                vec3 d = fwidth(vBC);
                vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBC);
                return min(min(a3.x, a3.y), a3.z);
            }

            void main(){
                // coloring by edge
                gl_FragColor = vec4(mix(vec3(0.0), vec3(0.5), edgeFactor()), 1.0);

                // alpha by edge
                if(gl_FrontFacing) {
                    gl_FragColor = vec4(vec3(1.0, 1.0, 1.0), (1.0 - edgeFactor()) * 0.95);
                } else {
                    gl_FragColor = vec4(vec3(1.0, 1.0, 1.0), (1.0 - edgeFactor()) * 0.7);
                }
            }
        `;

Thanks.

[Sebavan]

Hello, it would be amazing if you could share a playground highlighting the issue.

From what I guess you are using an attribute named barycentric but you are not bing and/or creating it.

[Nacheitor]

Here you have a playground:

https://playground.babylonjs.com/#SLK1PH

You can see that the sphere color is black.

[Sebavan]

As described before, you are not populating the "barycentric" attribute you are using in the shader.

Babylon by default comes with position, normal, uvs, vertex colors, tangents ... but no barycentric coordinates which is quite specifice to your need.

Did you try the wireframe mode of the mesh ? it should be pretty similar than what you are trying to achieve.

If it does not fit you could store the barycentric info in the normals as you might not need them in this kind of shader or could also use tangents or vertex colors that could also fit with your need.

[Nacheitor]

Thank you, Sebavan, for your help.

I cant use normal information because the barycentric information is different for each vertex depending to de facet to which it belongs. Barycentric information is the vertex coodinates inside each facet, in differents facets the same vertex have diferents coodinates...

I dont want to use wireframe of the mesh because I want to draw the wireframe and the model at the same time. Like this:

http://codeflow.org/webgl/barycentric-wireframe/www/

[Sebavan]

You will in this case need to dedup the indices to ensure that every triangle would have its own vertex data. once it is the case the uniqueness would not be an issue anymore.

Another approach might be to render the mesh twice, once normally and once in wireframe which could be fast enought as the info would already be in the gpu.

Do not hesitate if you need help with either of those approaches.

[Nacheitor]

Thanks Sebavan, I have chosen to implement the first approach. You can see the result here:

https://playground.babylonjs.com/#7ZPM3C#2

I hope than someone need something like this, this thread could help him...

[Sebavan]

GG thanks for the playground, it might help others.

[Pryme8]

you can bind custom attribute buffers.
Let me look up how to calculate barycentric stuff and Ill give example.
https://en.wikipedia.org/wiki/Barycentric_coordinate_system

oo ezpz

https://www.babylonjs-playground.com/#1TDIAH#20
https://www.babylonjs-playground.com/#1TDIAH#21

 

aw I just saw: https://playground.babylonjs.com/#7ZPM3C#2
You are gonna wanna use a combination of both of our methods. (so you don't replace your normals)

[Nacheitor]

Hi, Prime8,

I'm trying to work with vertex buffer but I dont get the same results than you:

https://playground.babylonjs.com/#7ZPM3C#3

Would you know what the problem is?

Thanks.

[Sebavan]

@Nacheitor the easiest is to not use indexed meshes: https://playground.babylonjs.com/#7ZPM3C#4

sphere.convertToUnIndexedMesh();

 

This will prevent you to try to map to the indexed position when filling your array of barycentric data.

[Nacheitor]

Thanks, everything works perfectly.

[Nacheitor]

Hi again, I've been trying to load several models with the shader we did. The problem is that at the moment that two models are in the same scene, sometimes one is painted over the other, depending on the position of the camera. You can see it in the example:

https://playground.babylonjs.com/#7ZPM3C#6

You can see how the order of the shaders changes by moving the camera from top to bottom.

Would there be any way to make a model paint on top of the other, without depending on the position of the camera?

Thanks.

[Sebavan]

This is expected with transparency ordering (closest mat from the cam renders first)

You should have a read at http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered and you ll find all the possible solutions for your issue. In case you wonder, you are in blend node ?

[Nacheitor]

Thank you, Sebavan.

The article is very instructive. I can change the transparency rendering order using the property alphaIndex.