Javascript 为什么此代码中的WebGL不'；不渲染轮廓矩形？

我是WebGL的新手，尝试制作轮廓矩形，但同时使用了混合了它们的着色器：）

问题是代码没有给出错误，但是没有用清除的方式渲染轮廓矩形，它只是清晰的，而矩形没有渲染

这里是顶点着色器

// VERTEX SHADER
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_translation;
uniform vec2 u_resolution; 
varying vec2 v_texCoord;
void main() {
    vec2 zeroToOne = (a_position + u_translation) / u_resolution;
    vec2 zeroToTwo = zeroToOne * 2.0;
    vec2 clipSpace = zeroToTwo - 1.0;
    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    v_texCoord = a_texCoord;
}

// FRAGMENT SHADER
precision mediump float;
uniform sampler2D u_image;
uniform vec4 u_color;
uniform int u_mode;
varying vec2 v_texCoord;
void main(void) {
    if (u_mode == 1) { gl_FragColor = u_color; }
    if (u_mode == 2) { gl_FragColor = texture2D(u_image, v_texCoord); }
    if (u_mode == 3) { gl_FragColor = u_color + texture2D(u_image, v_texCoord); }
}

这里是片段着色器

// VERTEX SHADER
attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform vec2 u_translation;
uniform vec2 u_resolution; 
varying vec2 v_texCoord;
void main() {
    vec2 zeroToOne = (a_position + u_translation) / u_resolution;
    vec2 zeroToTwo = zeroToOne * 2.0;
    vec2 clipSpace = zeroToTwo - 1.0;
    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);
    v_texCoord = a_texCoord;
}

// FRAGMENT SHADER
precision mediump float;
uniform sampler2D u_image;
uniform vec4 u_color;
uniform int u_mode;
varying vec2 v_texCoord;
void main(void) {
    if (u_mode == 1) { gl_FragColor = u_color; }
    if (u_mode == 2) { gl_FragColor = texture2D(u_image, v_texCoord); }
    if (u_mode == 3) { gl_FragColor = u_color + texture2D(u_image, v_texCoord); }
}

哦…这是HTML文件

多基因试验
//获取上下文
var gl=document.getElementsByTagName（“画布”）[0].getContext（“webgl”）；
//为矩形创建缓冲区
变量x=100，y=100，w=50，h=50；
var rect=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，rect）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
x、 -y，
x+w，-y，
x+w，-（y+h），
x、 -（y+h），
])、总图、静态图）；
gl.bindBuffer（gl.ARRAY\u BUFFER，null）；
//创建着色器并为其指定GLSL代码。。。
var vs=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vs`
属性向量2 a_位置；
属性向量2 a_texCoord；
统一vec2u_翻译；
均匀vec2u_分辨率；
可变矢量2 v_texCoord；
void main（）{
vec2 zeroToOne=（a_位置+u_平移）/u_分辨率；
vec2 zeroToTwo=zeroToOne*2.0；
vec2 clipSpace=zeroToTwo-1.0；
gl_Position=vec4（clipSpace*vec2（1，-1），0，1）；
v_texCoord=a_texCoord；
}`);
总帐编译主管（vs）；
var fs=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fs`
精密中泵浮子；
均匀采样二维u_图像；
均匀的vec4 u_颜色；
统一INTU__模式；
可变矢量2 v_texCoord；
真空总管（真空）{
如果（u_mode==1）{gl_FragColor=u_color；}
如果（u_mode==2）{gl_FragColor=texture2D（u_image，v_texCoord）；}
如果（u_模式==3）{gl_FragColor=u_颜色+纹理2d（u_图像，v_纹理坐标）；}
}`);
总帐编辑主任（fs）；
//创建程序并链接所有
var p=gl.createProgram（）；
总分类：attachShader（p，vs）；
德国劳埃德船级社（p，fs）；
gl.linkProgram（p）；
德国劳埃德船级社（p）；
//使用后删除着色器和程序。。。
gl.deleteShader（vs）；
gl.deleteShader（fs）；
德国劳埃德方案（p）；
//清除为黑色并设置视口
gl.clearColor（0,0,0,1）；
总账清除（总账颜色缓冲位）；
总图视口（0，0，总图画布宽度，总图画布高度）；
//设置颜色、分辨率和转换。。。
//将模式设置为1，使其仅使用gl_FragColor进行渲染
gl.uniform1i（gl.getuniformlLocation（p，“u_模式”），1）；
gl.uniform4f（gl.getUniformLocation（p，“u_颜色”）、Math.random（）、Math.random（）、Math.random（）、Math.random（）、1）；
gl.uniform2f（gl.getUniformLocation（p，“u_分辨率”）、gl.canvas.width、gl.canvas.height；
gl.uniform2f（gl.getUniformLocation（p，“u_翻译”），0,0；
//绑定矩形缓冲区
//启用顶点属性并将缓冲区指定给着色器。。。
gl.bindBuffer（gl.ARRAY\u BUFFER，rect）；
gl.VertexAttributePointer（gl.GetAttributeLocation（p，“a_位置”），2，gl.FLOAT，false，0，0；
gl.EnableVertexAttributeArray（gl.GetAttributeLocation（p，“a_位置”）；
//抽签！
gl.DrawArray（gl.LINE_循环，0,4）；

我甚至试图删除删除的程序，但似乎没有帮助。。。

---

有人能帮我吗？

已解决，索引不正确，因为高度为负，已修复

多基因试验
var gl=document.getElementsByTagName（“画布”）[0].getContext（“webgl”）；
变量x=100，y=100，w=50，h=50；
var rect=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，rect）；
gl.bufferData（gl.ARRAY\u BUFFER，新Float32Array([
x、 y,，
x+w，y，
x+w，y+h，
x、 y+h，
])、总图、静态图）；
gl.bindBuffer（gl.ARRAY\u BUFFER，null）；
var vs=gl.createShader（gl.VERTEX\u着色器）；
gl.shaderSource（vs`
属性向量2 a_位置；
属性向量2 a_texCoord；
统一vec2u_翻译；
均匀vec2u_分辨率；
可变矢量2 v_texCoord；
void main（）{
vec2 zeroToOne=（a_位置+u_平移）/u_分辨率；
vec2 zeroToTwo=zeroToOne*2.0；
vec2 clipSpace=zeroToTwo-1.0；
gl_Position=vec4（clipSpace*vec2（1，-1），0，1）；
v_texCoord=a_texCoord；
}`);
总帐编译主管（vs）；
var fs=gl.createShader（gl.FRAGMENT\u着色器）；
gl.shaderSource（fs`
精密中泵浮子；
均匀采样二维u_图像；
均匀的vec4 u_颜色；
统一INTU__模式；
可变矢量2 v_texCoord；
真空总管（真空）{
如果（u_mode==1）{gl_FragColor=u_color；}
如果（u_mode==2）{gl_FragColor=texture2D（u_image，v_texCoord）；}
如果（u_模式==3）{gl_FragColor=u_颜色+纹理2d（u_图像，v_纹理坐标）；}
}`);
总帐编辑主任（fs）；
var p=gl.createProgram（）；
总分类：attachShader（p，vs）；
德国劳埃德船级社（p，fs）；
gl.linkProgram（p）；
德国劳埃德船级社（p）；
gl.deleteShader（vs）；
gl.deleteShader（fs）；
德国劳埃德方案（p）；
gl.clearColor（0,0,0,1）；
总账清除（总账颜色缓冲位）；
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.uniform1i（gl.getuniformlLocation（p，“u_模式”），1）；
gl.uniform4f（gl.getUniformLocation（p，“u_颜色”）、Math.random（）、Math.random（）、Math.random（）、Math.random（）、1）；
gl.uniform2f（gl.getUniformLocation（p，“u_分辨率”）、gl.canvas.width、gl.canvas.height；
gl.uniform2f（gl.getUniformLocation（p，“u_翻译”），0,0；
总账。绑定缓冲区（gl。