Jump to content

Ink / Outline Shader


eucly2
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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  ^_^

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...