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

【问题标题】：simple beginShape with p5 and webgl renderer使用 p5 和 webgl 渲染器的简单 beginShape
【发布时间】：2021-07-19 01:08:04
【问题描述】：

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

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 日）我已经阅读了其他一些关于 webgl 优化未使用属性的问题。但我不确定如何在我的简单示例中解决这个问题。

【问题讨论】：

很奇怪。无论将什么值传递给beginShape()，这似乎都会发生。你可能想在 GitHub 上创建一个问题：github.com/processing/p5.js/issues
这是个好主意。我以为我做错了什么。我会为它记录一个问题。谢谢
我遇到了同样的问题，但我在 GitHub 上找不到现有问题。所以如果你做错了，我也做错了！ :p
为了将来参考我在这里创建了一个问题：github.com/processing/p5.js/issues/1678。

标签： javascript p5.js

【解决方案1】：

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

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

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

看起来几乎一样。

【讨论】：

【解决方案2】：

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

'调用beginShape()函数后，后面必须跟着一系列的vertex()命令……'.

【讨论】：