#geometry #webgl
#геометрия #webgl
Вопрос:
Я не могу нарисовать круг с помощью треугольника веера.
Следующий код взят из моего файла JavaScript. Мой html содержит холст и шейдеры. Также у меня есть другой JavaScript, который инициализирует вершинные шейдеры и фрагментные шейдеры. Инициализация шейдеров из других файлов javascript не вызывает никаких проблем, потому что она правильно работает с другими кодами.
Пожалуйста, помогите мне с этим кодом, найти, что с ним не так.
var xCenterOfCircle;
var yCenterOfCircle;
var centerOfCircle;
var radiusOfCircle = 200;
var ATTRIBUTES = 2;
var noOfFans = 80;
var anglePerFan;
var verticesData = [];
var canvas;
var gl;
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//
// Configure WebGL
//
gl.viewport( 0.0, 0.0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
// Load shaders and initialize attribute buffers
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
drawCircle();
// Load the data into the GPU
var bufferId = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
gl.bufferData( gl.ARRAY_BUFFER, flatten(verticesData), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
render();
}
function drawCircle()
{
xCenterOfCircle = 400;
yCenterOfCircle = 400;
centerOfCircle = vec2(400, 400);
anglePerFan = (2*Math.PI) / noOfFans;
verticesData = [centerOfCircle];
for(var i = 0; i <= noOfFans; i )
{
var index = ATTRIBUTES * i 2;
var angle = anglePerFan * (i 1);
var xCoordinate = xCenterOfCircle Math.cos(angle) * radiusOfCircle;
var yCoordinate = yCenterOfCircle Math.sin(angle) * radiusOfCircle;
document.write(xCoordinate);
document.write("n");
document.write(yCoordinate);
var point = vec2(xCoordinate, yCoordinate);
verticesData.push(point);
}
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays( gl.TRIANGLE_FAN, 0, verticesData.length/ATTRIBUTES );
}
Это мой HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Supper Bug Zapper</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
void main(void)
{
gl_Position = vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main(void)
{
gl_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
}
</script>
<script type="text/javascript" src="js/webgl-utils.js"></script>
<script type="text/javascript" src="js/MV.js"></script>
<script type="text/javascript" src="js/initShaders.js"></script>
<script type="text/javascript" src="js/superBugZapper.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="800" height="800" style="border:1px solid #000000;">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
Ответ №1:
Координаты области просмотра экрана определяются в диапазоне от -1 до 1. Центр экрана равен [0, 0], нижний левый — [-1, -1] и т.д.
Радиус вашего круга равен 200, а его центр равен [400, 400], на вашем экране это огромный круг далеко за пределами в правом верхнем углу.
Начните создавать круг, скажем, с радиусом .5 в центре [0, 0]. Вы должны что-то увидеть.
Если вам нужно сохранить этот масштаб в своем буфере, вы также можете предоставить матрицу своему вершинному шейдеру для преобразования пространственных координат в обычные координаты видового экрана OpenGL.
Комментарии:
1. Я добавил html-код для большего упрощения. Не могли бы вы сказать мне, чего мне не хватает?