Javascript 在webgl中绘制圆周长上的点

我能画一个圆 我想在圆上选择一个任意点，画一个三角形或三角形的形状 圆周上的一个简单点

现在我所了解的是vertexData数组具有这一点 所以我可以从vertexData中选择一个点 但是，如何继续将点绘制到该位置 如果只是在画布上画一个点 我知道在vertexShader中我可以 声明 属性vec4 a_位置 然后gl_位置=a_位置

但在圆周上我不明白 请在这里导游 谢谢

变量vertexShaderText=[
“统一vec2 u_分辨率；”，
'',
'属性向量2 a_位置；'，
'',
“void main（）”，
'{',
'',
'vec2 clipspace=a_位置/u_分辨率*1.0；'，
'',
‘gl_Position=vec4（clipspace*vec2（1，-1），0，1）；’，
'}'
].加入（“\n”）；
变量fragmentShaderText=[
“精密中泵浮动；”，
'',
“无效主管道（无效）”，
'{',
'',
“gl_FragColor=vec4（1.0,0,0）；”，
'',
'}'
].加入（“\n”）；
var uni=函数（）{
var canvas=document.getElementById（“游戏界面”）；
var gl=canvas.getContext（“webgl”，{antialas:true}）；
console.log（“这正在工作”）；
gl.clearColor（0.412,0.412,0.412,1）；
总账清除（总账颜色缓冲位）；
var vertextShader=gl.createShader（gl.vertext\u着色器）；
var fragmentShader=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（vertextShader，vertexShaderText）；
gl.shaderSource（fragmentShader，fragmentShaderText）；
gl.compileShader（vertextShader）；
gl.compileShader（碎片着色器）；
if（！gl.getShaderParameter（vertextShader，gl.COMPILE_状态））{
console.error（“vertexshader错误”，gl.getShaderInfoLog（vertexshader））；
返回；
}
if（！gl.getShaderParameter（fragmentShader，gl.COMPILE_状态））{
console.error（“fragmentShader错误”，gl.getShaderInfoLog（fragmentShader））；
返回；
}
var program=gl.createProgram（）；
gl.attachShader（程序，vertextShader）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
gl.useProgram（程序）；
if（！gl.getProgramParameter（程序、总账链接状态））{
console.error（“错误链接程序”，gl.getProgramInfoLog（程序））；
返回；
}
总账验证程序（程序）；
if（！gl.getProgramParameter（程序，gl.VALIDATE_状态））{
console.error（“错误验证”，gl.getProgramInfoLog（程序））；
}
变量圆={x:0，y:0，r:500}；
var属性=2；
var numFans=64；
变量degreePerFan=（2*Math.PI）/numFans；
var vertexData=[circle.x，circle.y]；
//控制台日志（总图位置）
对于（var i=0；i您正在使用三角形扇形绘制此圆，因此绘制其他形状需要第二次绘制调用。这不会很好地扩展，因为绘制调用非常昂贵，您更可能需要某种方法在一次绘制调用中绘制多个形状

也就是说，作为一个简单的示例，您可以在现有函数末尾的第一个绘制调用结束后，将以下代码添加到
uni
函数的底部，以使用第二个绘制调用在第一个圆的圆周上放置第二个较小的圆。给定片段着色器，这也将是一个红色圆，so您可能需要修改着色器以使用不同的颜色

// Insert this code at the end of the uni() function, it will make
// use of variables and GL state already declared earlier in that function.

// Pick a point along circumference, range 1 to 63
var selectedPointIndex = 8;

circle.x = vertexData[selectedPointIndex * 2];
circle.y = vertexData[selectedPointIndex * 2 + 1];
circle.r = 50;

vertexData = [circle.x, circle.y];
for(var i = 0; i <= numFans; i++) {
    var index = ATTRIBUTES * i + 2; // there is already 2 items in array
    var angle = degreePerFan * (i+0.1);
    vertexData[index] = circle.x + Math.cos(angle) * circle.r;
    vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
vertexDataTyped = new Float32Array(vertexData);

buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);

gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);

//在uni（）函数的末尾插入此代码，它将使
//使用该函数前面已声明的变量和GL状态。
//沿圆周选择一个点，范围为1到63
var-selectedPointIndex=8；
circle.x=顶点数据[selectedPointIndex*2]；
circle.y=顶点数据[selectedPointIndex*2+1]；
圆圈r=50；
顶点数据=[circle.x，circle.y]；
对于（var i=0；i
// Insert this code at the end of the uni() function, it will make
// use of variables and GL state already declared earlier in that function.

// Pick a point along circumference, range 1 to 63
var selectedPointIndex = 8;

circle.x = vertexData[selectedPointIndex * 2];
circle.y = vertexData[selectedPointIndex * 2 + 1];
circle.r = 50;

vertexData = [circle.x, circle.y];
for(var i = 0; i <= numFans; i++) {
    var index = ATTRIBUTES * i + 2; // there is already 2 items in array
    var angle = degreePerFan * (i+0.1);
    vertexData[index] = circle.x + Math.cos(angle) * circle.r;
    vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
vertexDataTyped = new Float32Array(vertexData);

buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);

gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);