sketchpunk
commented
12 months ago With webGL there is only two ways that I know off to render wireframes. The first one is to create a new mesh made entirely of gl line primitives. If you dont know what that is, its the same a meshes except the draw mode is set to line instead of triangles. In line draw mode you can't draw a thickness, so each line will always be 1 pixel wide. When you generate your wireframe "mesh", you'd also want to make sure you're not over drawing lines, meaning drawing the same lines more than once. The easiest way to create this is to just go threw the triangle list in a mesh, then draw out the edge of each triangle. You can use the indices of the edges in a map object to keep track of which edges you've already made so you're not repeating things. Once your done, you don't need any custom shader as you'll only need to change the render mode of the shader from triangles to lines.
The second way is using barycentric coordinates. It's similar to the other method where you'll need to create a new mesh to render the wireframe but in this manner, you can define the thickness of the lines. To make this one, you again loop through the triangle list of the mesh and recreate the triangle & vertices along with setting a bary coord in a newly created vertex attribute. In this manner you are duplicating vertices, its like duplicating vertices to make a sharp edge of a cube. Once you have this new mesh available, then you'll need a shader that can copy the bary coords from the vertex shader to the fragment shader, then in the fragment shader do the edge rendering of the triangle.
Either way you need to generate a new mesh to render a wireframe version of the model. The bary coord method will need a custom shader to render the wireframe but you have more control over it.
A dirty quick way to see wireframe is take any model & shader combo and try to switch the drawing mode to continuous lines. It won't make a great looking wireframe but its something you can quickly test & see how it looks in webgl mode. If you can get that working well, then the first wireframe method will work fine using just single line mode but you'll then need to generate the mesh to render in that mode in the correct order.
tsabbir96
Hi, currently I am onmy way to build a 3dviewer for web, where users can upload their 3d models and view it on the viewer. For this I am using Unity WebGL build that can view and perform transformation on the model. However as builtin unity wireframes shaders work with Shader target 4.0 which is not supported in OpenGL ES (used for web and mobile platforms). I am having real troubles in building a wireframe shader inside unity that may work in WebGL. Could you provide some ideas how I can solve it?