如何使用 WEBGL 在 p5.js 中画一条线

Question

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.

Answer 1

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.

Answer 2

ROFL.

If you sit by the river long enough, you will see the body of your enemy float by.

https://codepen.io/micrub/pen/rNGXJPJ?editors=0011

  push();
  fill(255);
  stroke(255);
  line(0, 0, 0, C_ZISE / F, 0, 0);
  pop();

  push();
  fill(255);
  stroke(255);
  line(0, 0, 0, 0, C_ZISE / F, 0);
  pop();