webgl中的变量未按预期工作

我是WebGL新手，现在正在学习各种变量。在这里，我的预期输出是下图

在下面的代码中，我尝试将颜色从顶点着色器传递到片段着色器。drawArray中的基本类型pass是三角形，但它不是绘制三角形。我编写此代码是为了理解WebGL中的各种变量，并从WebGL网站派生。我不知道出了什么问题，因为据我所知，这是我应该做的

我期望的结果是：

代码是：

“严格使用”；
var vs=`#版本300 es
高精度浮点；
在vec2 a_位置；
在vec4 a_颜色中；
输出vec4 v_颜色；
void main（）{
gl_位置=vec4（a_位置，0，1）；
v_颜色=a_颜色；
}
`;
var fs=`#版本300 es
高精度浮点；
在vec4 v_颜色中；
外显vec4外显色；
void main（）{
outColor=v_颜色；
}
`;
函数main（）{
var canvas=document.querySelector（“#c”）；
var gl=canvas.getContext（“webgl2”）；
如果（！gl）{
返回；
}
var program=webglUtils.createProgramFromSources（gl[vs，fs]）；
var vertex博览会=gl.getAttriblLocation（程序“a_position”）；
var vertexColor=gl.getAttributeLocation（程序“a_颜色”）；
var vao=gl.createVertexArray（）；
bindVertexArray总帐（vao）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
变量位置=[
-150, -100,
150, -100,
-150, 100,
-150, 100,
150, -100,
150, 100
];
总账缓冲数据（总账数组缓冲区、新Float32Array（位置）、总账静态绘图）；
gl.EnableVertexAttributeArray（Vertex）；
变量大小=2；
变量类型=总帐浮动；
var正常化=错误；
var-stride=0；
var偏移=0；
gl.VertexAttribute指针（顶点、大小、类型、规格化、步幅、偏移）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
变量颜色=[
0.7, 0.2, 0.9, 1,
0.6, 0.7, 0.2, 1,
0.5, 0.7, 0.9, 1,
0.4, 0.7, 0.2, 1,
0.7, 0.2, 0.9, 1,
0.5, 0.7, 0.9, 1,
];
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（彩色）、gl.STATIC\u DRAW）；
gl.EnableVertexAttributeArray（vertexColor）；
变量大小=4；
变量类型=总帐浮动；
var正常化=错误；
var-stride=0；
var偏移=0；
gl.VertexAttribute指针（顶点颜色、大小、类型、规格化、步幅、偏移）；
webglUtils.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.clearColor（0,0,0,0）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
gl.useProgram（程序）；
bindVertexArray总帐（vao）；
var偏移=0；
var计数=6；
总图绘制阵列（总图三角形、偏移、计数）；
}
main（）
正文{
溢出：隐藏；
}
帆布{
宽度：100vw；
高度：100vh；
显示：块；
}
问题在于，您提供的位置以像素为单位，但WebGL需要剪辑空间中的位置。所以你在画你认为你在画的东西，除了显示300x200矩形的中心2x2单位

例如，如果我们只是将位置除以300200

gl_Position = vec4(a_position / vec2(300, 200);

那就行了


“严格使用”；
var vs=`#版本300 es
高精度浮点；
在vec2 a_位置；
在vec4 a_颜色中；
输出vec4 v_颜色；
void main（）{
gl_位置=vec4（a_位置/vec2（300200），0，1）；
v_颜色=a_颜色；
}
`;
var fs=`#版本300 es
高精度浮点；
在vec4 v_颜色中；
外显vec4外显色；
void main（）{
outColor=v_U颜色；
}
`;
函数main（）{
var canvas=document.querySelector（“#c”）；
var gl=canvas.getContext（“webgl2”）；
如果（！gl）{
返回；
}
var program=webglUtils.createProgramFromSources（gl[vs，fs]）；
var=gl.getAttribLocation（程序“a_位置”）；
var vertexColor=gl.getAttributeLocation（程序“a_颜色”）；
var vao=gl.createVertexArray（）；
bindVertexArray总帐（vao）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
变量位置=[
-150, -100,
150, -100,
-150, 100,
-150, 100,
150, -100,
150, 100
];
总账缓冲数据（总账数组缓冲区、新Float32Array（位置）、总账静态绘图）；
gl.EnableVertexAttributeArray（Vertex）；
变量大小=2；
变量类型=总帐浮动；
var正常化=错误；
var-stride=0；
var偏移=0；
gl.VertexAttribute指针（顶点、大小、类型、规格化、步幅、偏移）；
var buffer=gl.createBuffer（）；
gl.bindBuffer（gl.ARRAY\u BUFFER，BUFFER）；
变量颜色=[
0.7, 0.2, 0.9, 1,
0.6, 0.7, 0.2, 1,
0.5, 0.7, 0.9, 1,
0.4, 0.7, 0.2, 1,
0.7, 0.2, 0.9, 1,
0.5, 0.7, 0.9, 1,
];
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（彩色）、gl.STATIC\u DRAW）；
gl.EnableVertexAttributeArray（vertexColor）；
变量大小=4；
变量类型=总帐浮动；
var正常化=错误；
var-stride=0；
var偏移=0；
gl.VertexAttribute指针（顶点颜色、大小、类型、规格化、步幅、偏移）；
webglUtils.resizeCanvasToDisplaySize（总图画布）；
总图视口（0，0，总图画布宽度，总图画布高度）；
gl.clearColor（0,0,0,0）；
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
gl.useProgram（程序）；
bindVertexArray总帐（vao）；
var偏移=0；
var计数=6；
总图绘制阵列（总图三角形、偏移、计数）；
}
main（）
正文{
溢出：隐藏；
}
帆布{
宽度：100vw；
高度：100vh；
显示：块；
}
谢谢您的回答。我真傻，竟然忘了。我有一个问题要问你。我正在使用three.js读取原始数据并进行渲染。在纹理中，数据格式为红色，类型为字节。Three.js混合不会显示任何效果。我是否需要学习任何东西，以便我能够理解为什么这不起作用？我可以发布一个问题。。。再次感谢f