Question

我尝试根据输入更改顶点着色器中的gl_PointSize。所以，每当我设置ie。明确地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，因此创建缓冲区并正确绑定。 WebGL Inspector还验证了其内容为10.0。

仍然，在调用我的绘图代码时

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

我只收到一张空白的画布......我哪里错了？

我的其余代码：

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。

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

1 个答案: