How to draw a line in p5.js using WEBGL

Does drawing lines in 3D work in p5.js?

The tutorial here: https://github.com/processing/p5.js/wiki/Getting-started-with-WebGL-in-p5 says that it should, but my attempt just gives a blank page.

function setup() {
  createCanvas(400,400, WEBGL);
}

function draw(){
  line(-100,-100,-100, 100,100,100);
}

As Kevin, below, has pointed out, the console gives an error:

TypeError: this._renderer.line is not a function

when I attempt to use line();

My browser does support WEBGL, if I write draw() as

function draw(){
  box();
}

a box does indeed get drawn.

The only way I've currently found to draw a line is to write my own function

function drawLine(x1, y1, z1, x2,y2, z2){
  beginShape();
  vertex(x1,y1,z1);
  vertex(x2,y2,z2);  
  endShape();
}

which does draw a line in 3D space, but the console generates many errors of the form

Error: WebGL: vertexAttribPointer: -1 is not a valid index. This value probably comes from a getAttribLocation() call, where this return value -1 means that the passed name didn't correspond to an active attribute in the specified program.

in so doing, so something must be wrong there as well.


Googling your error returns a ton of results, including this GitHub issue.

So it looks like this is a known issue. The line() function is supposed to work, but it hasn't been properly implemented yet.

Googling your second error returns this GitHub issue, which mentions that it might be caused by not setting a fill() color before drawing.