P5.js: beginShape should not require call to fill() in order to render

Created on 24 Nov 2016  Â·  10Comments  Â·  Source: processing/p5.js

I have a minimal example set up that uses the webgl renderer

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

function draw(){
    beginShape(POINTS);
    vertex(0,0);
    endShape();
} 

Running this produces the following errors:

p5.js:31516 WebGL: INVALID_VALUE: enableVertexAttribArray: index out of rangep5.RendererGL._bindImmediateBuffers @ p5.js:31516p5.RendererGL.endShape @ p5.js:31447p5.endShape @ p5.js:15190draw @ sketch.js:8p5.redraw @ p5.js:14256(anonymous function) @ p5.js:9143
p5.js:31520 WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

I'm using the latest version of p5.js (p5.js v0.5.4 October 01, 2016)

webgl

Most helpful comment

Can you even make a 'wire mesh' with webGL? I'm attempting to do what Daniel Shiffman did with his procedural generated terrain, but I am also coming up with the same error as OP. However, using fill(255,0,0) will let it compile, but it won't draw the shape to screen.

All 10 comments

the warning shouldn't prevent drawing, but it's letting you know that you haven't set a fill color so you may not see the lines. try adding a line before that setting fill:

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

function draw(){
  beginShape();
  fill(255, 0, 0);
  vertex(100,23,-100);
  vertex(200,23,-50);
  vertex(150, 45,-100);
  endShape();
}

@indefinit @mindofmatthew I think this shouldn't be necessary in immediate mode. can we set the default colors to white for fill and black for stroke?

Can you even make a 'wire mesh' with webGL? I'm attempting to do what Daniel Shiffman did with his procedural generated terrain, but I am also coming up with the same error as OP. However, using fill(255,0,0) will let it compile, but it won't draw the shape to screen.

Hey has anyone found a fix for this issue?

Hi, i've got the same issue for my webgl-app (https://scenaristeur.github.io/graphe/):

p5.js:31517 WebGL: INVALID_VALUE: enableVertexAttribArray: index out of range
p5.RendererGL._bindImmediateBuffers @ p5.js:31517
p5.js:31521 WebGL: INVALID_VALUE: vertexAttribPointer: index out of range 

but when i had

    fill(0, 0, 0);

on the line 177 of my script https://github.com/scenaristeur/graphe/blob/master/js/sketch.js

my canvas is very, very slow, as described in this issue : https://github.com/processing/p5.js/issues/1727

I don't think it's a good solution :-/

Man this sucks, I want to use p5 for webgl and this bug is preventing me. Does anyone else know of any alternatives for building 3d webgl content? Maybe three.js or something?

@JakeSchroeder WebGL mode in p5.js is still pretty much work in progress. If you are looking for something more established now, three.js is a pretty good and popular library to deal with WebGL, you can start there.

But I want to use WEBGL. Thats the whole point of it haha XD

On Mon, Apr 17, 2017 at 9:38 PM, Zahir notifications@github.com wrote:

When you do the call to createCanvas, try not to add the WEBGL
parameter. Somehow this fixed my problem,

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js/issues/1678#issuecomment-294675368,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJQkpNGFa2ZGYBgK-ONCV5gb00btnPQgks5rxD5SgaJpZM4K7_Fh
.

The minimal example given by the OP will work if the WEBGL parameter is omitted. However any 3d-oriented functions such as rotateX will then fail.

Yes, thats because if you omit WEBGL, then you are not using WEBGL to do 3d
things. Which is what I wanted to do. ie; I WANT to use webgl, but p5.js is
not playing nicely with webgl currently

On Tue, Apr 18, 2017 at 9:31 AM, Zahir notifications@github.com wrote:

The minimal example given by the OP will work if the WEBGL parameter is
omitted. However any 3d-oriented functions such as rotateX will then fail.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js/issues/1678#issuecomment-294901898,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJQkpMa4Iuq5ccvgCZ2nq8dV6xfPlqcDks5rxOVsgaJpZM4K7_Fh
.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kappaxbeta picture kappaxbeta  Â·  3Comments

stalgiag picture stalgiag  Â·  3Comments

aferriss picture aferriss  Â·  3Comments

b0nb0n picture b0nb0n  Â·  3Comments

NamanSharma5 picture NamanSharma5  Â·  3Comments