Ink / Outline Shader

[eucly2]

Hi, 

 

I am newbie with shaders and I want to make one ink that draws the outline of meshes, like this tutorial : http://prideout.net/blog/?p=54

Does anyone know why my test does not work : http://www.babylonjs.com/cyos/#2A2AJE#2

 

Thanks!

 

---------------------------------------------------------------------------------------------------------------------------

 

Salut,

 

Je débute avec les shaders et j'aurais voulu en faire un qui trace les contours des objets comme dans ce tutoriel : http://prideout.net/blog/?p=54

J'ai fait un test mais il ne marche pas quelqu'un saurait-il pourquoi : http://www.babylonjs.com/cyos/#2A2AJE#2

 

Merci!

[Temechon]

Hi, 

 

Your shader does not work because you are not using the right uniform names. All this is unknown for your shader, because babylon does not send these variabels name. 

attribute vec3 Vertex;attribute vec3 Normal;uniform mat4 ModelViewMatrix;uniform mat4 ProjModelViewMatrix;uniform mat4 NormalMatrix;

All this data are sent to a shader with another variable name.

I tried to fix your shader here : http://www.babylonjs.com/cyos/#2A2AJE#4

 

Can you tell me if it's ok with you ?

 

Cheers, 

 

EDIT :  I can see in your tutorial http://prideout.net/blog/p54/Silhouette.glsl that the normal matrix is used. I don't think it's possible to get such data in babylon.js, but maybe I'm wrong => poke at @DK

[Temechon]

Oh, and do you mind to have your shader (when finished) in my shader library ?

Just send me a mail/PM when it's done with a link to a demo (or to the CYOS tool).

 

Thank you

 

Cheers, 

[eucly2]

Thanks for your reply Temechon.

 

With your fix i have black lines on meshes. But without  modelViewMatrix and projectionMatrix uniform datas i can't make this shader.

For example with Three.js they use that to have the good result : http://jsfiddle.net/Eskel/g593q/9/

 

And no problem to integrate this shader when it's done.

[Temechon]

You can use these uniforms instead : world, worldView (for modelViewMatrix) and worldViewProjection (for projectionMatrix)

[eucly2]

I'm sorry but I don't have the knowledge in GLSL and I don't found any solution on the web without using normalMatrix.

So I only hope that Deltakosh can help me.

[GameMonetize]

RTFM

 

From http://blogs.msdn.com/b/eternalcoding/archive/2014/04/17/learning-shaders-create-your-own-shaders-with-babylon-js.aspx:

 

 

BABYLON.ShaderMaterial can also handle the following matrices for you:

• world
• view
• projection
• worldView
• worldViewProjection

 

So if you want the projectionMatrix, just call your uniform "projection", for the modelView, call it "worldView"

 

But for this specific shader, you need to render your mesh twice: one for the outline and one for the mesh itself

 

I'm working on a outline renderer btw

[Temechon]

What about the normal matrix ?

[Dad72]

There's a small error in your link DK. the ":" at the end  ​ 

[eucly2]

Effectivement c'est ce qu'ils font sur cet exemple : http://jsfiddle.net/Eskel/g593q/9/, il y a deux objets identiques liés et c'est sur le deuxième que le shader est appliqué.

Du coup dans babylon je pourrai faire la même chose en appliquant ce shader : http://www.babylonjs.com/cyos/#OFPE2 sur le deuxième objet.

ça vaut le coup d'essayer même si je n'ai pour l'instant jamais lié un mesh à un autre, à voir...

Désolé j'ai pas eu le temps de faire ma minable traduction en anglais mais c'est peut être mieux comme ça 

[Dad72]

Désolé j'ai pas eu le temps de faire ma minable traduction en anglais mais c'est peut être mieux comme ça 

 

Bienvenue au club 

 

and welcome a you also

[GameMonetize]

Hop

http://www.babylonjs.com/playground/#E51MJ#1

[GameMonetize]

Added a new property:

New ```Mesh.renderOutline``` property to render outlines around a mesh (used with ```Mesh.outlineColor``` and ```Mesh.outlineWidth```)

[eucly2]

Thanks DK you are the best!

Juste une petite remarque, je pense qu'il serait plus logique que par défaut la couleur de l'outline soit noire mais ce n'est pas dérangeant puisque c'est paramétrable.

 

Merci encore, cette fonctionnalité m'enlève une grosse épine du pied.

[eucly2]

Il y a un petit souci mais c'est en partie ma faute car je suis mal exprimé. Le terme "outline" n'est pas bon et j'aurai du utiliser "daw edges" car avec l'outline actuellement les arrête intérieures ne sont pas tracées, exemple avec un cube : http://www.babylonjs.com/playground/#E51MJ#2 c'est encore plus flagrant avec un cylindre, les arrêtes qui sont vers la caméra ne sont pas surlignées...

Penses-tu pouvoir faire quelque chose pour ça Deltakosh?

[GameMonetize]

AArf this is why I used the "outline" term

 

This is not Draw Edges feature (And alas this is a bit more complicated )

[eucly2]

Hm it's ok. Thanks for your work on outline feature.

Do you think draw edges feature be adding in BabylonJS?

[GameMonetize]

Not yet because it involves a lot of work for the exporters