我正在尝试根据输入更改顶点着色器中的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,因此缓冲区已创建并正确绑定(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);
最佳答案
我自己已经弄清楚了。一个愚蠢而幼稚的错误,但很容易被忽视:
通过调用 gl.drawArrays(gl.POINTS, 0, 2)
,指定 WebGL 必须绘制两个独立的点 - 每个点都有自己的坐标、颜色和 PointSize。
因此,通过更改 var size = new Float32Array([10.0, 10.0])
,WebGL 现在可以从 size
中获取两个独立的 PointSize 值。否则,WebGL 状态机中将会出现某种 NullPointerException。
关于javascript - 动态设置 gl_PointSize 作为着色器属性在 WebGL 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33380366/