Question

在为高中班级演示创建一个webgl“hello world”时，我遇到了一个异常的结果。

使用gl-matrix.js 2.2.0版，反转两次变换的顺序不会产生输出差异。

此代码产生所需的结果：

function DrawScene(gl) {
    var time_now = new Date();
    var elapsed_time = new Date();
    elapsed_time.setDate(time_program_started - time_now);
    var projection_matrix = mat4.create();
    var modelview_matrix = mat4.create();
    var mvp = mat4.create();
    gl.viewport(0, 0, gl.size[0], gl.size[1]);
    gl.clearColor(0.2, 0.2, 0.2, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    mat4.perspective(projection_matrix, D2R(50.0), gl.size[0] / gl.size[1], 1.0, 10.0);
    mat4.translate(modelview_matrix, modelview_matrix, [0.0, 0.0, -3.5]);
    mat4.rotate(modelview_matrix, modelview_matrix, D2R(elapsed_time / 1000.0 * 60.0), [0.0, 1.0, 0.0]);
    mat4.multiply(mvp, projection_matrix, modelview_matrix);
    triangle.Render(gl, shader_index, [1.0, 1.0, 1.0, 1.0], mvp);
}

是一个围绕其Y轴旋转的三角形。

反转平移和旋转的顺序应该旋转相机周围的三角形（我预期课程的一部分），而是继续旋转三角形到位。我理智地在相同的遗留OpenGL“hello world”中检查了这一点，产生了预期的结果。

顶点着色器简单地将顶点位置属性与mvp均匀相乘。 gl-matrix.js或此代码中是否存在问题？

为了完整性，这里是渲染功能。

Triangle.prototype.Render = function (gl, shader_index, color, mvp) {
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vertex_buffer_object);
    gl.vertexAttribPointer(shaders[shader_index].VP, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(shaders[shader_index].VP);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.element_buffer_object);
    shaders[shader_index].Use(gl);
    gl.uniformMatrix4fv(shaders[shader_index].MVP, false, mvp);
    if (shader_index == 0)
        gl.uniform4fv(shaders[shader_index].COLOR, color);
    else {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.color_buffer_object);
        gl.vertexAttribPointer(shaders[shader_index].COLOR, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(shaders[shader_index].COLOR);
    }
    gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
    shaders[shader_index].StopUsing(gl);
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    gl.bindBuffer(gl.ARRAY_BUFFER, null);
}

谢谢。

Answer 1

我认为我使用gl-matrix或gl-matrix本身存在错误。用mjs.js替换gl-matrix的工作方式已经过时了。

function DrawScene(gl) {
    var time_now = new Date();
    var elapsed_time = new Date();
    elapsed_time.setDate(time_program_started - time_now);

    var projection_matrix = M4x4.I;
    var modelview_matrix = M4x4.I;
    var mvp = M4x4.I;

    gl.viewport(0, 0, gl.size[0], gl.size[1]);
    gl.clearColor(0.2, 0.2, 0.2, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    projection_matrix = M4x4.makePerspective(50.0, gl.size[0] / gl.size[1], 1.0, 10.0);
    modelview_matrix = M4x4.rotate(D2R(elapsed_time / 1000.0 * 60.0), [0.0, 1.0, 0.0], modelview_matrix);
    modelview_matrix = M4x4.translate([0.0, 0.0, -5.5], modelview_matrix);
    mvp = M4x4.mul(projection_matrix, modelview_matrix);
    triangle.Render(gl, shader_index, [1.0, 1.0, 1.0, 1.0], mvp);
}

确实围绕相机旋转。反向转换然后围绕三角形的Y轴旋转旋转。

我很高兴能够纠正我的gl-matrix代码。如果不能，则gl-matrix非常破碎。

glmatrix.js异常 - 改变转换顺序不会改变结果

1 个答案: