在webGL画布中移动视口

Question

我正在制作一个游戏，其中用户使用WASD键移动视口以查看游戏世界。截至目前，仅渲染视口中的初始精灵。我能够通过更新其x和y来通过gl.viewport（x，y，width，height）移动视口，但是当我将视口移到不同的世界空间时，屏幕为黑色，应该有精灵。日志和更新中没有错误正在计算。我清除了每个图形的屏幕，然后

private drawSprite( webGL : WebGLRenderingContext,
    viewport : Viewport, 
    sprite : AnimatedSprite) : void {

        let canvasWidth : number = webGL.canvas.width;
        let canvasHeight : number = webGL.canvas.height;
        let spriteType : AnimatedSpriteType = sprite.getSpriteType();
        let texture : WebGLGameTexture = spriteType.getSpriteSheetTexture();

        let spriteWidth : number = spriteType.getSpriteWidth();
        let spriteHeight : number = spriteType.getSpriteHeight();
        let spriteXInPixels : number = sprite.getPosition().getX() + (spriteWidth/2);
        let spriteYInPixels : number = sprite.getPosition().getY() + (spriteHeight/2);
        let spriteXTranslate : number = (spriteXInPixels - (canvasWidth/2))/(canvasWidth/2);
        let spriteYTranslate : number = (spriteYInPixels - (canvasHeight/2))/(canvasHeight/2);
        this.meshTranslate.setX(spriteXTranslate);
        this.meshTranslate.setY(-spriteYTranslate);

        let defaultWidth : number = canvasWidth;
        let defaultHeight : number = canvasHeight;
        let scaleX : number = 2*spriteWidth/defaultWidth;
        let scaleY : number = 2*spriteHeight/defaultHeight;
        this.meshScale.set(scaleX, scaleY, 0.0, 0.0);//1.0, 1.0);

        let rotation: Vector3 = sprite.getRotation()
        this.meshRotate.setThetaZ(rotation.getThetaZ())

        MathUtilities.identity(this.meshTransform);
        MathUtilities.model(this.meshTransform, this.meshTranslate, this.meshRotate, this.meshScale);

        // FIGURE OUT THE TEXTURE COORDINATE FACTOR AND SHIFT
        let texCoordFactorX : number = spriteWidth/texture.width;
        let texCoordFactorY : number = spriteHeight/texture.height;
        let spriteLeft : number = sprite.getLeft();
        let spriteTop : number = sprite.getTop();
        let texCoordShiftX : number = spriteLeft/texture.width;
        let texCoordShiftY : number = spriteTop/texture.height;

        webGL.bindBuffer(webGL.ARRAY_BUFFER, this.vertexDataBuffer);
        webGL.bindTexture(webGL.TEXTURE_2D, texture.webGLTexture);

        let a_PositionLocation : GLuint = this.webGLAttributeLocations.get(this.A_POSITION);
        webGL.vertexAttribPointer(a_PositionLocation, this.FLOATS_PER_TEXTURE_COORDINATE, webGL.FLOAT, false, this.TOTAL_BYTES, this.VERTEX_POSITION_OFFSET);
        webGL.enableVertexAttribArray(a_PositionLocation);
        let a_TexCoordLocation : GLuint = this.webGLAttributeLocations.get(this.A_TEX_COORD);
        webGL.vertexAttribPointer(a_TexCoordLocation, this.FLOATS_PER_TEXTURE_COORDINATE, webGL.FLOAT, false, this.TOTAL_BYTES, this.TEXTURE_COORDINATE_OFFSET);
        webGL.enableVertexAttribArray(a_TexCoordLocation);

        let u_MeshTransformLocation : WebGLUniformLocation = this.webGLUniformLocations.get(this.U_MESH_TRANSFORM);
        webGL.uniformMatrix4fv(u_MeshTransformLocation, false, this.meshTransform.getData());
        let u_SamplerLocation : WebGLUniformLocation = this.webGLUniformLocations.get(this.U_SAMPLER);
        webGL.uniform1i(u_SamplerLocation, texture.webGLTextureId);
        let u_TexCoordFactorLocation : WebGLUniformLocation = this.webGLUniformLocations.get(this.U_TEX_COORD_FACTOR);
        webGL.uniform2f(u_TexCoordFactorLocation, texCoordFactorX, texCoordFactorY);
        let u_TexCoordShiftLocation : WebGLUniformLocation = this.webGLUniformLocations.get(this.U_TEX_COORD_SHIFT);
        webGL.uniform2f(u_TexCoordShiftLocation, texCoordShiftX, texCoordShiftY);

        webGL.drawArrays(webGL.TRIANGLE_STRIP, this.INDEX_OF_FIRST_VERTEX, this.NUM_VERTICES);
}

顶点着色器

uniform mat4 u_MeshTransform;
uniform vec2 u_TexCoordFactor;
uniform vec2 u_TexCoordShift;
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main() {
    gl_Position = u_MeshTransform * a_Position;
    vec2 tempTexCoord = a_TexCoord * u_TexCoordFactor;
    v_TexCoord = tempTexCoord + u_TexCoordShift;
}

FragShader

precision mediump float;

uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main() {
    gl_FragColor = texture2D(u_Sampler, v_TexCoord);
}

关于为什么移动视口不能在该空间渲染精灵的任何想法。我很肯定所有值都已更新。 TIA。

Answer 1

gl.viewport仅设置从规范化设备坐标到像素空间的转换。它不会帮助您移动视图。

如果要移动视图，通常可以在Java数学中计算meshTransform或通过向着色器添加另一个矩阵来添加视图矩阵。>

gl_Position = u_viewProjectionTransform * u_MeshTransform * a_Position;
或

gl_Position = u_projectionTransform * u_viewTransform * u_MeshTranform * a_Position;
然后您将投影设置为u_projectionTransform（perspective或orthographic，然后将u_viewTransform设置为camera