Opengl es Dart WebGL窗口渲染不工作

我正试图深入研究dart的Web GL支持，但无法使其正常工作。我熟悉java中OpenGL的“旧”版本（没有着色器等），并且对GL的工作原理有了相当好的了解

然而，我的dart WebGL代码有一个问题，我似乎无法解决。 这是我的密码：

导入'dart:html'；
将“dart:web\U gl”导入为WebGL；
导入“dart:键入的_数据”；
导入“dart:math”；
导入“package:vector_math/vector_math.dart”；
WebGL.RenderingContext-gl；
画布元素画布；
四方形；
void main（）{
画布=查询选择器（“游戏画布”）；
gl=canvas.getContext（“实验性的_-webgl”）；
如果（gl==null）{
gl=canvas.getContext（“webgl”）；
}
如果（gl==null）{
canvas.remove（）；
查询选择器（“错误日志”）.text=“无WebGL”；
返回；
}
四边形=新四边形（新着色器（“”）
高精度浮点；
属性向量3 a_pos；
均匀mat4u_变换；
统一的mat4 u_视图；
void main（）{
gl_位置=u_视图*u_变换*vec4（a_位置，1.0）；
}
""", """
高精度浮点；
均匀的vec4 u_颜色；
void main（）{
gl_FragColor=u_颜色；
}
"""
));
总帐启用（总帐深度测试）；
gl.clearColor（0.0,0.0,0.0,1.0）；
render（）；
}
void render（）{
总图视口（0，0，canvas.width，canvas.height）；
gl.clear（WebGL.COLOR_BUFFER_BIT | WebGL.DEPTH_BUFFER_BIT）；
Matrix4视图=makePerspectiveMatrix（70.0*PI/180.0，canvas.width/canvas.height，0.1100.0）；
quad.setView（视图）；
渲染（新矢量3（150.0，150.0，30.0），100100，新矢量4（1.0，0.0，0.0，1.0））；
//渲染（新矢量3（450.0、150.0、0.0）、100、100、新矢量4（0.0、1.0、1.0、1.0、1.0））；
}
四年级{
着色器；
int-posLocation；
WebGL.UniformLocation转换位置、颜色位置、视图位置；
Quad（this.shader）{
posLocation=gl.getAttribLocation（shader.program，“a_pos”）；
transformLocation=gl.getUniformLocation（shader.program，“u_变换”）；
colorLocation=gl.getUniformLocation（shader.program，“u_颜色”）；
viewLocation=gl.getUniformLocation（shader.program，“u_视图”）；
Float32List vertexArray=新的Float32List（4*3）；
setAll（0*3，[0.0,0.0,0.0]）；
setAll（1*3，[1.0,0.0,0.0]）；
setAll（2*3[1.0,1.0,0.0]）；
setAll（3*3[0.0,1.0,0.0]）；
Int16List indexArray=新的Int16List（6）；
setAll（0[0,1,2,0,2,3]）；
gl.useProgram（shader.program）；
gl.EnableVertexAttributeArray（posLocation）；
WebGL.Buffer vertexBuffer=gl.createBuffer（）；
gl.bindBuffer（WebGL.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferDataTyped（WebGL.ARRAY\u BUFFER、vertexArray、WebGL.STATIC\u DRAW）；
gl.VertexAttributePointer（posLocation，3，WebGL.FLOAT，false，0，0）；
WebGL.Buffer indexBuffer=gl.createBuffer（）；
gl.bindBuffer（WebGL.ELEMENT\u ARRAY\u BUFFER，indexBuffer）；
gl.bufferDataTyped（WebGL.ELEMENT\u ARRAY\u BUFFER、indexArray、WebGL.STATIC\u DRAW）；
gl.bindBuffer（WebGL.ELEMENT\u ARRAY\u BUFFER，indexBuffer）；
}
无效集合视图（Matrix4视图）{
gl.uniformMatrix4fv（视图位置、假、视图存储）；
}
Matrix4矩阵=新的Matrix4.identity（）；
无效渲染（矢量3位置、整数w、整数h、矢量4颜色）{
matrix.setIdentity（）；
矩阵翻译（位置x-w/2.0，位置y-h/2.0，位置z）；
矩阵比例（w*1.0，h*1.0，0.0）；
gl.uniformMatrix4fv（转换位置、错误、矩阵存储）；
gl.uniform4fv（颜色位置、颜色存储）；
总帐付款人（WebGL.三角形，6，WebGL.UNSIGNED_SHORT，0）；
}
}
类着色器{
字符串vsSource，fsSource；
WebGL.Shader vertexShader，fragmentShader；
程序；
着色器（this.vsSource、this.fsSource）{
编译（）；
}
void compile（）{
vertexShader=gl.createShader（WebGL.VERTEX\U着色器）；
gl.shaderSource（vertexShader，vsSource）；
gl.compileShader（顶点着色器）；
if（！gl.getShaderParameter（vertexShader，WebGL.COMPILE_状态））{
抛出gl.getShaderInfoLog（vertexShader）；
}
fragmentShader=gl.createShader（WebGL.FRAGMENT\u着色器）；
gl.shaderSource（fragmentShader，fsSource）；
gl.compileShader（碎片着色器）；
if（！gl.getShaderParameter（fragmentShader，WebGL.COMPILE_状态））{
抛出gl.getShaderInfoLog（fragmentShader）；
}
program=gl.createProgram（）；
gl.attachShader（程序，顶点着色器）；
gl.attachShader（程序、碎片着色器）；
总账链接程序（程序）；
if（！gl.getProgramParameter（程序、WebGL.LINK_状态））{
抛出gl.getProgramInfoLog（程序）；
}
}
}

和我的html文件：

我得到的只是一个完全黑色（颜色取决于清晰的颜色）的窗口。我在使用java时也遇到过类似的问题，然后是视口造成了这种问题

但是，我不确定这是否是问题所在。

更换这一行

quad.render（新矢量3（150.0,150.0,30.0），100100，新矢量4（1.0,0.0,0.0,1.0））；

与

quad.render（新矢量3（0.0,0.0，-80.0），100100，新矢量4（1.0,0.0,0.0,1.0））；

然后你会看到红场

您创建了以（0.5,0.5,0.0）为中心的1x1正方形：

然后按（100x，100x，0x）缩放它：

请注意，重新缩放的方形中心现在是（50,50,0）

然后你把它翻译成（-50，-50，-80）：

因此，您创建了一个以（0,0，-80）为中心的100x100正方形

vertexArray.setAll(0 * 3, [0.0, 0.0, 0.0]);
vertexArray.setAll(1 * 3, [1.0, 0.0, 0.0]);
vertexArray.setAll(2 * 3, [1.0, 1.0, 0.0]);
vertexArray.setAll(3 * 3, [0.0, 1.0, 0.0]);

// quad.render(new Vector3(0.0, 0.0, -80.0), 100, 100 ...
// w=100 h=100
matrix.scale(w * 1.0, h * 1.0, 0.0);

// quad.render(new Vector3(0.0, 0.0, -80.0), 100, 100 ...
// w=100 h=100 pos=0,0,-80
matrix.translate(pos.x - w / 2.0, pos.y - h / 2.0, pos.z);