javascript - 动态设置 gl_PointSize 作为着色器属性在 WebGL 中不起作用

Question

我正在尝试根据输入更改我的顶点着色器中的 gl_PointSize。所以，每当我设置即。 gl_PointSize = 10.0 明确地说，一切正常。添加后

attribute vec4 vPosition;
attribute vec4 vColor;
attribute float vSize;

varying vec4 fColor;
void main()
{
    fColor = vColor;
    gl_PointSize = vSize;
    gl_Position = vPosition;
}

和调用

var size = new Float32Array([10.0]);
.
.
.
var sizeBufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sizeBufferId);
gl.bufferData(gl.ARRAY_BUFFER, size, gl.STATIC_DRAW);

var vSize = gl.getAttribLocation(program, "vSize");
gl.vertexAttribPointer(vSize, 1, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vSize);

vSize 在此之后为 2，因此已正确创建和绑定(bind)缓冲区。 WebGL Inspector 还验证了它的内容是 10.0。

仍然，当调用我的绘制代码时

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 2);

我只收到一张空白 Canvas ...我哪里错了？

---

我的其余代码:

var canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }

var colors = new Float32Array([ 1, 0, 0, 1,
                                0, 0, 1, 1]);

var vertices = new Float32Array([-0.5, 0,
                                  0.5, 0]);

var size = new Float32Array([10.0]);

// Configure viewport

gl.viewport(0,0,canvas.width,canvas.height);
gl.clearColor(1.0,1.0,1.0,1.0);

// Init shader program and bind it (invoked from another JS-file)

var program = initShaders(gl, "vertex-shader", "fragment-shader");

gl.useProgram(program);

// Load colors into the GPU and associate shader variables

var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

var vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);


// Load positions into the GPU and associate shader variables

var bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);


// Load squares' size into the GPU and associate shader variables

var sizeBufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, sizeBufferId);
gl.bufferData(gl.ARRAY_BUFFER, size, gl.STATIC_DRAW);

var vSize = gl.getAttribLocation(program, "vSize");
gl.vertexAttribPointer(vSize, 1, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vSize);

alert("Color var: " + vColor + " | Pos var: " + vPosition + " | Size var: " + vSize);

gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 2);

Answer 1

我自己已经弄明白了。一个愚蠢而天真的错误，但很容易被忽视:

通过调用 gl.drawArrays(gl.POINTS, 0, 2) 指定，WebGL 必须绘制两个独立的点 - 每个点都有自己的坐标、颜色和 PointSize。

因此，通过改变 var size = new Float32Array([10.0, 10.0]) WebGL 现在可以从 size 中获得两个独立的 PointSize 值。否则 WebGL 状态机中会出现某种 NullPointerException。