How to make thick line in 3D graphics (webGL)?

[aheight]

Hi guys,

I have a webGL application and my understanding is there is no option or at least the option to make thick lines is not working so I thought I would try to write my own routine. I suppose I could just make a double plot of the data just off-set a bit but I'm not exactly sure how to do this for a complex contour in 3D space. Suppose I have a set of 3D points that I draw lines between to make my contour:

firstContour={{x1,y1,z1},{x2,y2,z2},...{xn,yn,zn}}

I can make some progress by drawing multiple lines:

secondContour={{x1+dx,y1+dy,z1+dz},{x2+dx,y2+dy,z2+dz},...,{xn+dx,yn+dy,zn+dz}}
and a third likewise. Not too bad except when the plot is zoomed you can see the three contours so looks a bit unprofessional.I was just wondering if anyone here knows of a standard better more elegant way of accomplishing this task?

Thanks for reading.

 

[sysprog]

There's an article on line drawing in WebGL here.

 

[sysprog]

Thanks for that! Looks like I would like to expand the lines in the shader from what I've read and I'm actually pretty good with shader code. Unfortunately, I have to admit I find github a bit difficult to navigate. Would you happen to know what the following instructions at the github site means? Where do I even type in those commands?

First you need to git clone and install dependencies:

git clone https://github.com/mattdesl/webgl-lines.git
cd webgl-lines
npm install
To start developing a demo, use one of the following:

  npm run native
  npm run triangles
  npm run expanded
  npm run projected
And open localhost:9966/[demo], for example localhost:9966/native.

production
For the bundle splitting and uglify step, use npm run build-all.

Those are linux or similar unix commands. If you're using windows, or similar, you can go to https://github.com/mattdesl/webgl-lines to see all the demo files or you can do a direct download via this link: https://github.com/mattdesl/webgl-lines/archive/master.zip

Your question was helpful to me, because although I haven't done much WebGL, I've spent some time on SVGs, and because it's easy to specify line width via SVG <path> statements, I thought of conversion of SVG to WebGL, and my searching on that led me to:
https://css-tricks.com/rendering-svg-paths-in-webgl/
=> http://mattdesl.github.io/svg-mesh-3d/
=> https://mattdesl.svbtle.com/drawing-lines-is-hard

Matt DesLauriers' CSS Tricks guest article (the first link) is fun and intriguing, and the demo it links to (second link) is quite impressive, and the link to his WebGL line drawing article seemed very much on point for response to your post here, so there you have it.

 

[aheight]

Thanks for those references sysprog. I was able to download the code from github and I have been reviewing it: Think I'll try first to just trianglize the contour and send it through as (very narrow) polygons using gl.LINE_STRIP and see how it looks. This is what the contour looks like using the three line approach. It's the orange contour but if I zoom in, I can see the three separate lines but if I use only one line the contour does not show up well. All of that torus is webGL.

 

[sysprog]

Thanks for those references sysprog. I was able to download the code from github and I have been reviewing it: Think I'll try first to just trianglize the contour and send it through as (very narrow) polygons using gl.LINE_STRIP and see how it looks.

As you are no doubt already aware, you need only two inter-inversely postioned congruent right triangles to make a line segment of arbitrary thickness and length, and you can of course break up a curve into an arbitrary number of line segments (and perhaps do successive partial integrations and redifferentiations (unless it's continuous but not differentiable) to determine local densities of separations of functions -- i.e. how many line segments to use per curve part, varying depending on variance of curvature, for a target resolution) for triangle rendering of a spline curve. You might also want to look at the section of the first reference that references Bézier curves, which are reasonably easy to specify in SVG paths, and perhaps not terribly difficult to convert to WebGL.

This is what the contour looks like using the three line approach. It's the orange contour but if I zoom in, I can see the three separate lines but if I use only one line the contour does not show up well. All of that torus is webGL.

Wow. That's pretty impressive, aheight. Is that a stereoscopic model of a Clifford square torus using a Nash embedding? I notice that your three axial lines intersect at apparently what would be the center of gravity of the torus. Have you looked at GeoGebra? You can use it online or download it -- it can facilitate some mathematically accurate adjustable precursors that can serve as working sketches for the kind of thing you're rendering in WebGL. Here's an example (viewable on this page):

 

[aheight]

Is that a stereoscopic model of a Clifford square torus using a Nash embedding? I notice that your three axial lines intersect at apparently what would be the center of gravity of the torus. Have you looked at GeoGebra? You can use it online or download it -- it can facilitate some mathematically accurate adjustable precursors that can serve as working sketches for the kind of thing you're rendering in WebGL. Here's an example (viewable on this page):

Hey sysprog, the torus is part of my website on algebraic functions you guys in this forum help me build! :) I am working on the thick lines but unfortunately my job takes me away from coding so can't do much of anything now. Here's the link to the webGL I wrote: algebraicfunction.com . You can see the torus by selecting it from the function drop-down menu and then selecting contours in the ring table drop down menu. It's 3D-interactive. The plot is described in the website :http://www.jujusdiaries.com/. Just select Introduction/Riemann Surfaces.