Javascript WebGL绘制循环和转换

我希望我的javascript程序将三角形向右移动。 我现在关注的是矩阵和绘制循环。我从来没有做过这样的事情，所以我可能是在越野，但出于学习目的，我试图做的是：

-设置webgl管道，以便正确显示三角形（确定）

-编写一个带有矩阵的函数，该矩阵允许我传入转换值（似乎可以，但我不确定）

暂时不考虑缩放和模型视图，因为我对webgl提供的正交视图非常满意（只是为了练习）

-设置一个循环遍历DrawArray（即使在这里，我也不确定循环是否在正确的位置开始和结束）

我怀疑我真的很接近，但三角形不移动（tx保持不变）

下面是代码（我想我甚至不需要清除颜色和深度缓冲区，因为我只在x轴上进行翻译）

var webgl_canvas=document.getElementById（'can'）；
var gl=webgl_canvas.getContext（'experimental-webgl'）；
var三角形=[-0.8，-0.8,0,0.8，-0.8,0,0,0.8,0]；
var vertexBuffer=gl.createBuffer（）；
var-tx=0.1；
var-ty=0；
var translation_prototype=[1,0,0,0，
0,1,0,0,
0,0,1,0,
tx，ty，0,1]；
var vertexShader_source='attribute vec3 a_position；'+'统一vec4 u_平移；'+'void main（）{gl_Position=u_translation*vec4（a_Position，1）；}'；
var fragmentShader_source='precision mediump float；'+'void main（）{gl_FragColor=vec4（0.9,0,0.1,1）；}'；
函数getTimeInSeconds（）{
返回日期.now（）*0.001；
}
函数makeTranslation（tx，ty）{
返回翻译原型；
}
//编译着色器
var buildShader=函数（shaderSource，typeOfShader）{
var shader=gl.createShader（typeOfShader）；
gl.shaderSource（着色器，shaderSource）；
gl.compileShader（着色器）；
if（！gl.getShaderParameter（着色器，gl.COMPILE_状态））{
警报（gl.getShaderInfoLog（着色器））；
}
返回着色器；
}
var compiledVertexShader=buildShader（vertexShader\u源，gl.VERTEX\u着色器）；
var compiledFragmentShader=buildShader（fragmentShader\u源，gl.FRAGMENT\u着色器）；
//安装GLSL程序
program=gl.createProgram（）；
gl.attachShader（程序，编译的VertexShader）；
gl.attachShader（程序，编译碎片着色器）；
总账链接程序（程序）；
//用顶点数据填充缓冲区
gl.bindBuffer（gl.ARRAY\u BUFFER，vertexBuffer）；
gl.bufferData（gl.ARRAY\u BUFFER、新Float32Array（三角形）、gl.STATIC\u DRAW）；
vertexBuffer.itemSize=3；
vertexBuffer.numItems=3；
总账清除（总账颜色缓冲位）；
var positionLocation=gl.GetAttriblLocation（程序，“a_位置”）；
gl.EnableVertexAttributeArray（位置位置）；
gl.useProgram（程序）；
var ShaderTranslationMatrix=gl.getUniformLocation（程序，“u_翻译”）；
gl.uniformMatrix4fv（shaderTranlsationMatrix，false，新Float32Array（translation_prototype））；
gl.VertexAttribute指针（位置位置，vertexBuffer.itemSize，gl.FLOAT，false，0，0）；
var startTime=0；
函数动画（时间）{
//拉环
gl.clear（gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT）；
var deltaTime=（时间-开始时间）；
makeTranslation（（tx*deltaTime），（ty*deltaTime））；
控制台日志（tx、ty、deltaTime）；
gl.DrawArray（gl.TRIANGLES，0，vertexBuffer.numItems）；
开始时间=时间；
window.requestAnimationFrame（动画）；
}
动画（0）；

以下是工作片段

顶点着色器应如下所示：

attribute vec3 a_position;' + 'uniform mat4 u_translation;' + 'void main() { gl_Position = u_translation*vec4 (a_position,1);}

    deltaTime += 0.005;
    makeTranslation(tx+deltaTime,ty+deltaTime);

function makeTranslation (x, y) {
    translation_prototype = 
            [1,0,0,0,
             0,1,0,0,
             0,0,1,0,
             x,y,0,1]
    return translation_prototype;  
}

• 为了使物体在空间中移动，必须将所有向量和矩阵与位置向量相乘才能得到结果

您必须在每个循环周期更新

翻译\u原型
变量：

attribute vec3 a_position;' + 'uniform mat4 u_translation;' + 'void main() { gl_Position = u_translation*vec4 (a_position,1);}

    deltaTime += 0.005;
    makeTranslation(tx+deltaTime,ty+deltaTime);

function makeTranslation (x, y) {
    translation_prototype = 
            [1,0,0,0,
             0,1,0,0,
             0,0,1,0,
             x,y,0,1]
    return translation_prototype;  
}


deltaTime
在循环外声明，并在每个周期递增

您的
makeTranslation
函数应该如下所示：

attribute vec3 a_position;' + 'uniform mat4 u_translation;' + 'void main() { gl_Position = u_translation*vec4 (a_position,1);}

    deltaTime += 0.005;
    makeTranslation(tx+deltaTime,ty+deltaTime);

function makeTranslation (x, y) {
    translation_prototype = 
            [1,0,0,0,
             0,1,0,0,
             0,0,1,0,
             x,y,0,1]
    return translation_prototype;  
}


（如果您使用的是全局变量，则可以去掉return语句，但建议使用局部变量）

（我不得不尝试这个新的代码片段功能：D）


var webgl_canvas=document.getElementById（'can'）；
var gl=webgl_canvas.getContext（'experimental-webgl'）；
var三角形=[-0.5，-0.5,0,0.5，-0.5,0,0,0.5,0]；
var vertexBuffer=gl.createBuffer（）；
var-tx=0；
var-ty=0；
var translation_prototype=[1,0,0,0，
-               0,1,0,0,
0,0,1,0,
0,0,0,1]; 
var vertexShader_source='attribute vec3 a_position；'+'统一mat4 u_平移；'+'void main（）{gl_Position=u_translation*vec4（a_Position，1）；}'；
var fragmentShader_source='precision mediump float；'+'void main（）{gl_FragColor=vec4（0.9,0,0.1,1）；}'；
函数getTimeInSeconds（）{
返回日期.now（）*0.001；
}
函数makeTranslation（x，y）{
翻译原型