Question

我尝试使用WebGL和一些StackGL模块绘制转换后的图像。我有一个加载的图像及其mat3变换。着色器和纹理随时可用。

下面的代码绘制了一个拉伸图像，其尺寸与画布相同。它不适用Matrix转换。我认为图像因缓冲顶点而被拉伸。

我已经厌倦了使用code snipped found in the Pixi.js渲染器应用矩阵变换，但之后，没有渲染任何内容（并且没有抛出任何错误）：

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

问题：

如何使用原始宽度/高度绘制此图像？
如何将矩阵变换应用于图像？
有人可以在这里发布一个代码，用于在画布上移动一个简单的图像，即使没有这些转换吗？

我还没有找到任何教程，只是简单地展示了如何使用它的原始宽度/高度来绘制纹理（不是在...旋转立方体或基于三角形的金字塔上）。

片段着色器：

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]

此矩阵变换适用于Canvas2d API，setTransform()：它会根据需要旋转，缩放和移动图像。

Javascript代码：

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 );
    }
};

使用WebGL绘制转换后的图像

0 个答案: