search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.52k stars 3.3k forks source link

beginShape should not require call to fill() in order to render #1678

Closed RoelandMatthijssens closed 7 years ago

RoelandMatthijssens commented 7 years ago

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)

lmccart commented 7 years ago

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?

pikiaboy commented 7 years ago

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.

JakeSchroeder commented 7 years ago

Hey has anyone found a fix for this issue?

scenaristeur commented 7 years ago

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 :-/

JakeSchroeder commented 7 years ago

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?

limzykenneth commented 7 years ago

@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.

pikiaboy commented 7 years ago

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 .

bifocalpirate commented 7 years ago

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.

pikiaboy commented 7 years ago

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 .

lmccart commented 7 years ago

closed with https://github.com/processing/p5.js/pull/2088#event-1192353090