Displaying quad wireframe in WebGL like Maya(?)
null
Hey guys,
I have been working on a 3d model viewer, like Sketchfab, in my spare time to learn some more about tech art, as well as building up my portfolio. It is going quite well so far but i have run into an issue.
This is what my model viewer currently looks like, with the wire-frame enabled.
I am using ThreeJS to load the model into the browser, and then loading in a duplicate, with the wireframe flag set. I have noticed that my model's wireframe is being shown in tris, but i would rather this be in quads, much like how Maya and other 3D modelling software do e.g.
Sadly, ThreeJS has dropped support for Face4. What i would like is to be able to write a shader that would only render the edges of a mesh and not the diagonal intersection lines. If i could achieve the results within a shader it would eliminate my need to load the same model twice, and it would also give me some control over the thickness or color of the lines for example.
Actual question(s):
Would anyone be able to advise me/point me in to the direction of how to create a shader that will only render the lines of a mesh?
Is this how Maya achieves its result? by rendering as tris but just ignoring the intersection that makes up the two tris for a quad?
I appreciate this post might be a bit vague, so if you have any need for further information please let me know
Thanks in advance.
I have been working on a 3d model viewer, like Sketchfab, in my spare time to learn some more about tech art, as well as building up my portfolio. It is going quite well so far but i have run into an issue.
This is what my model viewer currently looks like, with the wire-frame enabled.
I am using ThreeJS to load the model into the browser, and then loading in a duplicate, with the wireframe flag set. I have noticed that my model's wireframe is being shown in tris, but i would rather this be in quads, much like how Maya and other 3D modelling software do e.g.
Sadly, ThreeJS has dropped support for Face4. What i would like is to be able to write a shader that would only render the edges of a mesh and not the diagonal intersection lines. If i could achieve the results within a shader it would eliminate my need to load the same model twice, and it would also give me some control over the thickness or color of the lines for example.
Actual question(s):
Would anyone be able to advise me/point me in to the direction of how to create a shader that will only render the lines of a mesh?
Is this how Maya achieves its result? by rendering as tris but just ignoring the intersection that makes up the two tris for a quad?
I appreciate this post might be a bit vague, so if you have any need for further information please let me know
Thanks in advance.
Replies
The three.js loader is probably triangulating that model for you. In some formats the faces with more than 3 edges are described right there, like in the .OBJ format for example:
So you would know how the wireframe is supposed to look based on this. By using raw (Web)GL code you can specify a list of points to be rendered as 3D lines, so you can do anything you want with this (like rendering the outer wireframe of a 12-sided face like Maya does).
As for a WebGL-friendly shader, a search found these, maybe this helps:
- https://threejs.org/examples/?q=webg#webgl_custom_attributes_lines
- http://codeflow.org/entries/2012/aug/02/easy-wireframe-display-with-barycentric-coordinates/
- http://web.archive.org/web/20140213062544/http://cgg-journal.com/2008-2/06/index.html#tth_sEc2
- https://www.opengl.org/discussion_boards/showthread.php/180809-How-to-get-wireframe-display-of-a-mesh-using-GLSL?p=1247159&viewfull=1#post1247159
- https://groups.google.com/forum/#!topic/webgl-dev-list/KLfiwj4jax0