Webgl 不渲染到画布的圆圈

我正在尝试使用WebGL渲染一个圆。我只需要通过动态像素值来平移圆，所以我使用了教程中的一些平移逻辑，将像素空间转换为clipspace，并将其放入顶点着色器中。我还使用了普通的

三角形\u FAN

技术来制作圆

我目前在画布上看不到任何东西；它呈现为白色屏幕，任何地方都没有圆。我只希望圆的半径为1px

//着色器
常数glsl=（x）=>x；
常数顶点=glsl`
属性向量2 a_位置；
均匀vec2u_分辨率；
统一vec2u_翻译；
void main（）{
//加上翻译
vec2位置=a_位置+u_平移；
//将圆点从像素转换为0.0到1.0
vec2 zeroToOne=a_位置/u_分辨率；
//从0->1转换为0->2
vec2 zeroToTwo=zeroToOne*2.0；
//从0->2转换为-1->+1（剪辑空间）
vec2 clipSpace=zeroToTwo-1.0；
gl_Position=vec4（clipSpace*vec2（1，-1），0，1）；
}
`;
常量片段=glsl`
精密中泵浮子；
均匀的vec4 u_颜色；
void main（）{
gl_FragColor=u_颜色；
}
`;
函数main（）{
//获取WebGL上下文
var canvas=document.querySelector（“#c”）；
var gl=canvas.getContext（“webgl”）；
如果（！gl）{
回来
}
const opacity=0.5；//不透明度将是动态的
常量颜色=[0,0,0，不透明度]；
const translation=[50,50]；//此转换值可以是动态的，但出于演示目的使用[50,50]
//使用我们的样板UTIL编译着色器并链接到程序中
var program=webglUtils.createProgramFromScripts（gl[vertex，fragment]）；
//查找顶点数据需要去的地方。
var positionAttributeLocation=gl.GetAttributeLocation（程序，“a_位置”）；
//查找统一的位置
var resolutionUniformLocation=gl.getUniformLocation（程序，“u_分辨率”）；
var translationUniformLocation=gl.getUniformLocation（程序，“u_translation”）；
var colorUniformLocation=gl.getUniformLocation（程序，“u_颜色”）；
//创建一个缓冲区以放置三个二维剪辑空间点
var positionBuffer=gl.createBuffer（）；
//将其绑定到ARRAY\u BUFFER（将其视为ARRAY\u BUFFER=positionBuffer）
gl.bindBuffer（gl.ARRAY\u BUFFER，positionBuffer）；
常数位置=[
0.0，0.0//圆心顶点
];
常数停止=100；
对于（i=0；i
上述代码有3个问题

它正在调用
createProgramFromScripts
而不是
createProgramFromSources

着色器不使用
u\u转换

这是前两行

//add in the translation
vec2 position = a_position + u_translation;

// convert the circle points from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;

第二行使用的是
a_位置
，而不是
位置

风扇缺少最后一个三角形

您可能需要