Javascript 用WebGL绘制变换后的图像

我正在尝试使用WebGL和一些模块绘制转换后的图像。我有一个加载的图像和它的mat3变换。着色器和纹理已准备好使用

下面的代码绘制了一个与画布尺寸相同的拉伸图像。它不应用矩阵变换。我认为图像被拉伸是因为缓冲区顶点

我已经厌倦了使用渲染器应用矩阵变换，但是没有渲染任何内容，也没有抛出错误：

gl_Position = vec4((uTransform * vec3(aPosition, 1.0)).xy, 0.0, 1.0);

问题:

如何使用原始宽度/高度绘制此图像？ 如何将矩阵变换应用于图像？ 有人能在这里发布一个代码，用于在画布上显示一个简单的图像，即使没有这些转换？ 我还没有找到任何教程，只是显示如何绘制纹理不是在一个。。。旋转立方体或基于三角形的棱锥体，使其具有原始宽度/高度

片段着色器：

顶点着色器：

矩阵值示例：

这个矩阵变换与Canvas2d API setTransform配合得很好：它可以根据需要旋转、缩放和移动图像

Javascript代码：

---

结果将完全取决于您使用的投影矩阵。但是，您也无法正确应用投影矩阵，至少在需要透视效果时是如此。顶点着色器也不会写入vTextureCoord。@derhass我已经更新了问题。我真的不想要透视效果，我应该把变量命名为uTransformation，而不是uProjection，这是我的错。？

precision lowp float;

varying vec2      vTextureCoord;
uniform sampler2D uTexture;

void main() {
    gl_FragColor = texture2D(uTexture, vTextureCoord);
}

precision lowp float;

varying   vec2 vTextureCoord;
uniform   mat3 uTransform;
attribute vec2 aPosition;

void main() {
    gl_Position   = vec4(aPosition, 0.0, 1.0);
    vTextureCoord = aPosition;
}

[0.9950041770935059, 0.0998334139585495, 0, -0.0998334139585495, 0.9950041770935059, 0, -5.846673488616943, -24.447290420532227, 1]
[0.646919310092926, 0.7625584602355957, 0, -0.7625584602355957, 0.646919310092926, 0, 61.47933578491211, -42.35515594482422, 1]

var shader  = require( "gl-shader" );
var buffer  = require( "gl-buffer" );
var texture = require( "gl-texture2d" );

var SpriteRenderer = function ( context ) {
    this.gl = context;

    this.vert = require( "./shaders/vert.js" );
    this.frag = require( "./shaders/frag.js" );

    this.shader = shader( this.gl, this.vert, this.frag );
    this.buffer = buffer( this.gl, [ -1.0, -1.0, 1.0, -1.0, -1.0,  1.0, -1.0,  1.0, 1.0, -1.0, 1.0,  1.0 ] );

    this.texture = texture( this.gl, window.TEST_SPRITE );
};

SpriteRenderer.prototype = {
    init: function () {
        this.shader.attributes.aPosition.location = 0;
    },

    render: function ( sprite ) {
        this.buffer.bind();
        this.shader.bind();

        this.shader.uniforms.uTexture   = this.texture.bind();
        this.shader.uniforms.uTransform = sprite.transform.array;

        this.shader.attributes.aPosition.pointer();

        this.gl.drawArrays( this.gl.TRIANGLES, 0, 6 );
    }
};