为什么第二个点显示在错误的地方?
why is the second point displayed in the wrong place?
我正在尝试编写一个函数来绘制三角形(现在在 main() 中)。一切正常 - 一切都很酷,但我添加了两个绘制点函数的执行(drawPoint())和三角形后绘制的点显示在错误的位置,为什么?
index.html :
<!DOCTYPE html>
<html>
<head>
<title>
the rgb
</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
PLZ USE BROWSER SUPPORTING CANVAS
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="thergb.js"></script>
</body>
</html>
thergb.js:
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
function main()
{
clearCanvas('green');
drawPoint(0.3,0.0,50.0,'blue'); //draw point before triangle
//draw triangle
var VSHADER_SOURCE=
'attribute vec4 a_Position;\n'+
'void main() {\n' +
' gl_Position = a_Position;\n'+
'}\n';
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
'}\n';
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
{
return;
}
var n = initVertexBuffers(gl);
gl.drawArrays(gl.TRIANGLES, 0, n);
drawPoint(0.4,0.0,50.0,'red'); //draw point after triangle
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
function drawPoint(x,y,size,color)
{
var VSHADER_SOURCE=
'attribute vec4 a_Position;\n'+
'attribute float a_PointSize;\n'+
'void main() {\n' +
' gl_Position = a_Position;\n'+
' gl_PointSize = a_PointSize;\n'+
'}\n';
if (color == 'red')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
'}\n';
}
if (color == 'green')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n'+
'}\n';
}
if (color == 'blue')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n'+
'}\n';
}
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
{
return;
}
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
gl.vertexAttrib3f(a_Position,x,y,0.0);
gl.vertexAttrib1f(a_PointSize, size);
gl.drawArrays(gl.POINTS, 0,1);
}
function clearCanvas(color)
{
if (color == 'red')
{
gl.clearColor( 1.0, 0.0, 0.0, 1.0);
}
if (color == 'green')
{
gl.clearColor( 0.0, 1.0, 0.0, 1.0);
}
if (color == 'blue')
{
gl.clearColor( 0.0, 0.0, 1.0, 1.0);
}
gl.clear(gl.COLOR_BUFFER_BIT);
}
我的 github 上还有其他库:https://github.com/bazylevnik0/thergb
三角形后面的点出现在错误位置的原因是绘制三角形时它启用了 gl.enableVertexAttribArray
的属性
启用的属性从调用 gl.vertexAttribPointer
时分配的缓冲区中获取其值
禁用的属性从 gl.vertexAttrib???
设置的常量中获取其值
在 drawPoint
中,gl.vertexAttrib3f
函数,它们为该属性设置常量,但是当需要绘制第二个点时,属性被启用,这意味着它正在查找分配的缓冲区绘制三角形时不是常量。
如果你添加
gl.disableVertexAttribArray(a_Position);
gl.disableVertexAttribArray(a_PointSize);
在 drawPoint
绘制之前它应该可以工作。
您可能会发现 this state diagram 有助于理解各种函数所设置的内容
我正在尝试编写一个函数来绘制三角形(现在在 main() 中)。一切正常 - 一切都很酷,但我添加了两个绘制点函数的执行(drawPoint())和三角形后绘制的点显示在错误的位置,为什么?
index.html :
<!DOCTYPE html>
<html>
<head>
<title>
the rgb
</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
PLZ USE BROWSER SUPPORTING CANVAS
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="thergb.js"></script>
</body>
</html>
thergb.js:
var canvas = document.getElementById('webgl');
var gl = getWebGLContext(canvas);
function main()
{
clearCanvas('green');
drawPoint(0.3,0.0,50.0,'blue'); //draw point before triangle
//draw triangle
var VSHADER_SOURCE=
'attribute vec4 a_Position;\n'+
'void main() {\n' +
' gl_Position = a_Position;\n'+
'}\n';
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
'}\n';
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
{
return;
}
var n = initVertexBuffers(gl);
gl.drawArrays(gl.TRIANGLES, 0, n);
drawPoint(0.4,0.0,50.0,'red'); //draw point after triangle
}
function initVertexBuffers(gl) {
var vertices = new Float32Array([
0, 0.5, -0.5, -0.5, 0.5, -0.5
]);
var n = 3; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
function drawPoint(x,y,size,color)
{
var VSHADER_SOURCE=
'attribute vec4 a_Position;\n'+
'attribute float a_PointSize;\n'+
'void main() {\n' +
' gl_Position = a_Position;\n'+
' gl_PointSize = a_PointSize;\n'+
'}\n';
if (color == 'red')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n'+
'}\n';
}
if (color == 'green')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);\n'+
'}\n';
}
if (color == 'blue')
{
var FSHADER_SOURCE=
'void main() {\n' +
' gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n'+
'}\n';
}
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE))
{
return;
}
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
gl.vertexAttrib3f(a_Position,x,y,0.0);
gl.vertexAttrib1f(a_PointSize, size);
gl.drawArrays(gl.POINTS, 0,1);
}
function clearCanvas(color)
{
if (color == 'red')
{
gl.clearColor( 1.0, 0.0, 0.0, 1.0);
}
if (color == 'green')
{
gl.clearColor( 0.0, 1.0, 0.0, 1.0);
}
if (color == 'blue')
{
gl.clearColor( 0.0, 0.0, 1.0, 1.0);
}
gl.clear(gl.COLOR_BUFFER_BIT);
}
我的 github 上还有其他库:https://github.com/bazylevnik0/thergb
三角形后面的点出现在错误位置的原因是绘制三角形时它启用了 gl.enableVertexAttribArray
启用的属性从调用 gl.vertexAttribPointer
禁用的属性从 gl.vertexAttrib???
在 drawPoint
中,gl.vertexAttrib3f
函数,它们为该属性设置常量,但是当需要绘制第二个点时,属性被启用,这意味着它正在查找分配的缓冲区绘制三角形时不是常量。
如果你添加
gl.disableVertexAttribArray(a_Position);
gl.disableVertexAttribArray(a_PointSize);
在 drawPoint
绘制之前它应该可以工作。
您可能会发现 this state diagram 有助于理解各种函数所设置的内容