Javascript WebGL基础：使用渲染循环将2D卷积过滤器应用于缓冲区画布

WebGL非常新，尝试移植一些2D图像处理着色器，以便处理问题。起初，我被MDN教程误导，认为WebGL就像OpenGL桌面，但后来我发现，它更符合我的形式和目的。但是，我在格式化渲染循环时仍然遇到一些问题，因此我可以传递一个不断更新的纹理进行处理。在它确实渲染的情况下，我得到的只是一团混乱，而在顶点着色器不是简单通过的情况下，我什么也得不到。我了解GLSL和缓冲区工作的基本原理，但显然我在这里做了一些非常错误的事情。。。任何帮助都将不胜感激。谢谢

GL类{
构造器（画布）{
this.gl=canvas.getContext（“webgl”）| canvas.getContext（“实验性webgl”）；
如果（！this.gl）{
警报（“无法初始化WebGL。您的浏览器可能不支持它。”）；
this.gl=null；
}
//初始化着色器
var fragmentShader=getShader（this.gl，“fshader”）；
var vertexShader=getShader（this.gl，“vshader”）；
var shaderProgram=this.gl.createProgram（）；
this.gl.attachShader（shaderProgram，vertexShader）；
this.gl.attachShader（shaderProgram，fragmentShader）；
这个.gl.linkProgram（shaderProgram）；
this.gl.useProgram（shaderProgram）；
this.positionLocation=this.gl.getAttriblLocation（着色器程序，“位置”）；
this.texCoordLocation=this.gl.getAttribLocation（着色器程序，“texcoord”）；
var resolutionLocation=this.gl.getUniformLocation（着色器程序，“分辨率”）；
this.width=this.gl.getUniformLocation（着色器程序，“宽度”）；
//设定分辨率
此.gl.uniform2f（分辨率位置、画布宽度、画布高度）；
函数getShader（gl，id）{
var shaderScript，源，currentChild，着色器；
shaderScript=document.getElementById（id）；
如果（！shaderScript）{
返回null；
}
来源=”；
currentChild=shaderScript.firstChild；
while（当前儿童）{
if（currentChild.nodeType==currentChild.TEXT\u节点）{
source+=currentChild.textContent；
}
currentChild=currentChild.nextSibling；
}
if（shaderScript.type==“x-shader/x-fragment”）{
着色器=gl.createShader（gl.FRAGMENT\u着色器）；
}else if（shaderScript.type==“x-shader/x-vertex”）{
着色器=gl.createShader（gl.VERTEX\u着色器）；
}否则{
//未知着色器类型
返回null；
}
gl.shaderSource（着色器，源）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
警报（“编译着色器时出错：+gl.getShaderInfoLog（着色器））；
返回null；
}
返回着色器；
};
};
渲染（缓冲画布，x，y）{
this.gl.clear（this.gl.COLOR\u BUFFER\u位）；
//纹理坐标
var texCoordBuffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ARRAY_BUFFER，this.texCoordBuffer）；
this.gl.enableVertexAttributeArray（this.texCoordLocation）；
this.gl.VertexAttribute指针（this.texCoordLocation，2，this.gl.FLOAT，false，8，0）；
此文件为.gl.bufferData(
此.gl.ARRAY\u缓冲区，
新浮点数组([
0.0,  0.0,
1.0,  0.0,
0.0,  1.0,
0.0,  1.0,
1.0,  0.0,
1.0,  1.0]), 
这是总帐（静态图纸）；
//创建纹理
var texture=this.gl.createTexture（）；
this.gl.bindTexture（this.gl.TEXTURE_2D，TEXTURE）；
//将图像规格化为二的幂
this.gl.texParameteri（this.gl.TEXTURE\u 2D，this.gl.TEXTURE\u WRAP\S，this.gl.CLAMP\u TO\u EDGE）；
this.gl.texParameteri（this.gl.TEXTURE\u 2D，this.gl.TEXTURE\u WRAP\T，this.gl.CLAMP\u TO\u EDGE）；
this.gl.texParameteri（this.gl.TEXTURE\u 2D，this.gl.TEXTURE\u MIN\u过滤器，this.gl.NEAREST）；
this.gl.texParameteri（this.gl.TEXTURE\u 2D，this.gl.TEXTURE\u MAG\u过滤器，this.gl.NEAREST）；
//从2d画布加载纹理
this.gl.texImage2D（this.gl.TEXTURE_2D，
0, 
这是gl.RGBA，
这是gl.RGBA，
此.gl.UNSIGNED_字节，
缓冲区（帆布）；
//加载缓冲区
var buffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ARRAY\u BUFFER，BUFFER）；
this.gl.enableVertexAttributeArray（this.positionLocation）；
this.gl.VertexAttribute指针（this.positionLocation，2，this.gl.FLOAT，false，12，0）；
//绘制尺寸和位置
this.gl.bufferData（this.gl.ARRAY_BUFFER，新Float32Array（[
x、 y,，
x+x.width，y，
x、 y+1.2.高度，
x、 y+1.2.高度，
x+x.width，y，
x+bufferCanvas.width，y+bufferCanvas.height]），此.gl.STATIC_DRAW）；
//模糊宽度
this.gl.enableVertexAttribute数组（this.width）；
this.gl.VertexAttribute指针（this.width，1，this.gl.FLOAT，false，12，8）；
//画
this.gl.drawArray（this.gl.TRIANGLES，0,6）；
};
};
var canvas2d=document.getElementById（'buffer-canvas'）；
var context2d=canvas2d.getContext（“2d”）；
var canvasGL=new GL（document.getElementById（'main-canvas'）；
canvasGL.width=5.0；
对于（var i=0；i代码有几个问题


这两个脚本标记似乎都不需要

你是一个
this.width = this.gl.getUniformLocation(shaderProgram, "width");

canvasGL.width = 5.0

this.gl.enableVertexAttribArray(this.width);
this.gl.vertexAttribPointer(this.width, 1, this.gl.FLOAT, false, 12, 8);

this.gl.uniform1f(this.width, whateverYouWantedWidthToBe);

this.gl.vertexAttribPointer(this.texCoordLocation, 2, this.gl.FLOAT, false, 8, 0);
this.gl.vertexAttribPointer(this.positionLocation, 2, this.gl.FLOAT, false, 12, 0);

this.gl.vertexAttribPointer(this.texCoordLocation, 2, this.gl.FLOAT, false, 0, 0);
this.gl.vertexAttribPointer(this.positionLocation, 2, this.gl.FLOAT, false, 0, 0);

var texCoordBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);

this.texCoordBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);

canvasGL.render(canvas2d, canvas2d.getBoundingClientRect("left"),     
                canvas2d.getBoundingClientRect("top"))

var theSource = shaderScript.text;