使用 p5 和 webgl 渲染器的简单 beginShape

Question

我正在制作一个非常基本的示例，该示例使用 p5.js 和一个带有 WEBGL

的 canvas

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

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

这是完整的程序。当我运行这个我得到以下错误

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

我使用的是最新版本的 p5.js（p5.js v0.5.4 2016 年 10 月 1 日）我已经阅读了其他一些 post 内容，关于它是 webgl 优化未使用属性的问题。但我不确定如何在我的简单示例中解决这个问题。

Answer 1

这已经不是问题了，但它是一个点的形状，不会出现在 canvas 上。如果你想显示一个点我推荐

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

function draw(){
    background(230);
    beginShape();
        vertex(0,0);
        vertex(0,1);
    endShape();
}

看起来几乎一样。

Answer 2

这不是错误，而是误会:.
形状是...形状，而不是点。
因此它需要至少 2 个顶点作为最小形状（一条线）存在，三角形 3 个，矩形 4 个，任何...形状 ..
P5参考总是谈论series::.

'调用 beginShape() 函数后，必须执行一系列 vertex() 命令...'。

使用 p5 和 webgl 渲染器的简单 beginShape

simple beginShape with p5 and webgl renderer

javascript

p5.js