Modifying line type in WebGL

p5.js Coding Questions
1

Hello!

In the past to draw a dashed line I have used the following:

 drawingContext.setLineDash([5, 15]);

This does not appear to work with WebGL. Is there a simple way to get a dashed/dotted line with WebGL?

1 Like
2 

// def  camera(eyeX, eyeY, eyeZ,              // position 
//             centerX, centerY, centerZ,     // look at
//             upX, upY, upZ)

int cameraType=3; 

PVector minAll; 
PVector maxAll;
PVector myEye;
float eyeAngle;  // for rotate  

void setup() {
  // init
  size(1300, 700, P3D);
  minAll=new PVector(100000, 100000, 100000); 
  maxAll=new PVector(-100000, -100000, -100000);
} // func 

void draw() {
  // runs on and on 
  background(0);
  lights(); 

  useCamera(); 

  line3DDotted(200, 10, 100, 
    300, 300, 300 );

  camera();
  fill(255);
  text ("Change camera with 0,1,2 and 3", 14, 14);
} // func 

// ----------------------------------------------------------

void line3DDotted(float x1, float y1, float z1, 
  float x2, float y2, float z2)
  // drawLine/line3D was programmed by James Carruthers
  // see http://processing.org/discourse/yabb2/YaBB.pl?num=1262458611/0#9 
{     
  PVector p1 = new PVector(x1, y1, z1);
  PVector p2 = new PVector(x2, y2, z2);
  PVector pNew = new PVector(0, 0, 0);

  float max = 12; 
  for (int i = 0; i < max; i+=1) {

    pNew.x = lerp(p1.x, p2.x, i/max);  
    pNew.y = lerp(p1.y, p2.y, i/max); 
    pNew.z = lerp(p1.z, p2.z, i/max);

    myBox(pNew.x, pNew.y, pNew.z);
  }//for
} // method

void myBox( float x, float y, float z ) {
  println("2");
  pushMatrix();
  translate(x, y, z); 
  fill(255, 0, 0); // red
  noStroke(); 
  box(7);
  popMatrix();

  // take data
  minAll = getMin(minAll, new PVector(x, y, z) ); 
  maxAll = getMax(maxAll, new PVector(x, y, z) );
}

PVector getMin(PVector minAll1, PVector newData) {
  if (newData.x < minAll1.x)
    minAll1.x=newData.x;
  if (newData.y < minAll1.y)
    minAll1.y=newData.y;
  if (newData.z < minAll1.z)
    minAll1.z=newData.z;
  return minAll1;
}

PVector getMax(PVector maxAll1, PVector newData) {
  if (newData.x > maxAll1.x)
    maxAll1.x=newData.x;
  if (newData.y > maxAll1.y)
    maxAll1.y=newData.y;
  if (newData.z > maxAll1.z)
    maxAll1.z=newData.z;
  return maxAll1;
}

// ----------------------------------------------------------

void keyPressed() {

  // the keys 0..3 determine the camera type 

  switch (key) {

  case '0': 
    // The default camera
    cameraType=0; 
    break; 

  case '1': 
    cameraType=1; 
    break;

  case '2': 
    cameraType=2; 
    break;

  case '3': 
    cameraType=3; 
    break;

  default:
    //println("Error: "+key);
    break;
  }//switch
  //
}//func 

void useCamera() {

  // using the camera type 

  // calc center
  PVector centerAll = new PVector( 
    (minAll.x + maxAll.x) /2, 
    (minAll.y + maxAll.y) /2, 
    (minAll.z + maxAll.z) /2); 

  // calc distance 
  float d, d2;

  // calc distance 
  d = 300;

  switch (cameraType) {

  case 0: 
    // 
    camera(0, 0, 420, 
      centerAll.x, centerAll.y, 0, 
      0, 1, 0);
    break; 

  case 1: 
    //
    camera(centerAll.x, centerAll.y-122, 144, 
      centerAll.x, centerAll.y, centerAll.z, 
      0, 1, 0);
    break;

  case 2:
    // ALL changes: position and lookAt  
    camera(centerAll.x, centerAll.y, centerAll.z - d, 
      centerAll.x, centerAll.y, centerAll.z, 
      0, 1, 0);
    break;

  case 3:
    // ALL plus rotation 
    // eye rotates around the scene     
    PVector myEye=new PVector(
      d* cos (eyeAngle) + centerAll.x, // x value on circle
      centerAll.y-155, // bit above sceene  
      d* sin (eyeAngle) + centerAll.z );   // z value on circle

    camera(myEye.x, myEye.y, myEye.z, 
      centerAll.x, centerAll.y, centerAll.z, 
      0, 1, 0);
    eyeAngle+=.03; // rotate
    break;

  default:
    println("Error - reset");
    cameraType=0; 
    break;
  }//switch
  //
}//func 
//
1 Like
3

Thank you for this, I’m going to try to transfer this to p5.js and see if I can make it work. I’ll come back and post my code if I can get it working.

4

It’s a manually dotted line using lerp

:wink:

There might be better ways

5

just with translate and line works too
using vectors in 3D easier.
https://editor.p5js.org/kll/sketches/omvJ6Pfff

2 Likes
6

I seem to recall that three.js has a demo implementation of native webgl dashed lines. Haven’t inspected the code, but might be worth looking at their approach and what backs it – e.g. if it is shader-based.

https://threejs.org/examples/webgl_lines_dashed.html

7

You can find all the three.js shaders in this folder:

(see linedashed_vert.glsl.js and linedashed_frag.glsl.js)

In those shaders you will find a bunch of includes. The content of those includes can be found at

1 Like
8

Thank you for this succinct and working solution.

1 Like