WebGL中的额外空间尽管具有相同的维度

时间:2011-12-30 12:48:01

标签: javascript opengl-es-2.0 webgl

简而言之,我在填充视口的四边形上渲染2D图像。在Firefox中它看起来很好,但Chrome的右侧和底部间距为1px。我所做的是将画布和视口的尺寸设置为图像的大小。我做错了吗?

Screenshot of problem

这是我的代码,以防你想看到它。

function initShaders() {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

    //create the program
    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        console.error("Could not initialise shaders");
    }
    gl.useProgram(shaderProgram);

    //standard
    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
    shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
    gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
    shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");

    //custom uniforms
    shaderProgram.brightnessUniform = gl.getUniformLocation(shaderProgram, 'brightness');
    shaderProgram.saturationUniform = gl.getUniformLocation(shaderProgram, 'saturation');
}


var neheTexture;

function initTexture(callback) {
    neheTexture = gl.createTexture();
    neheTexture.image = new Image();
    neheTexture.image.onload = function () {
        var width = neheTexture.image.width, 
        height = neheTexture.image.height,
        offsetLeft = canvas.offsetLeft, 
        offsetTop = canvas.offsetTop;

        gl.viewportWidth = canvas.width = width;
        gl.viewportHeight = canvas.height = height;
        canvas.addEventListener('mousemove', function (e) {
            drawScene((e.pageX - offsetLeft) / width, (e.pageY - offsetTop) /  height);
        }, false);

        gl.bindTexture(gl.TEXTURE_2D, neheTexture);
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, neheTexture.image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.bindTexture(gl.TEXTURE_2D, null);

        callback();
    }
    neheTexture.image.src = 'test.jpg';
}

var cubeVertexPositionBuffer;
var cubeVertexTextureCoordBuffer;

function initBuffers() {
    cubeVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    var vertices = [
    -1.0, -1.0, //bl
    1.0, -1.0, //br
    -1.0,  1.0, //tl
    1.0,  1.0, //tr
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    cubeVertexPositionBuffer.itemSize = 2;
    cubeVertexPositionBuffer.numItems = 4;

    //texture
    cubeVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    var textureCoords = [
    0.0, 0.0, //bl
    1.0, 0.0, //br
    0.0, 1.0, //tl
    1.0, 1.0, //tr
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    cubeVertexTextureCoordBuffer.itemSize = 2;
    cubeVertexTextureCoordBuffer.numItems = 4;
}


function drawScene(b, s) {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    //texture
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, neheTexture);
    gl.uniform1i(shaderProgram.samplerUniform, 0);

    //custom uniforms
    gl.uniform1f(shaderProgram.brightnessUniform, b || 0.5);
    gl.uniform1f(shaderProgram.saturationUniform, s || 0.5);

    //draw
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, cubeVertexPositionBuffer.numItems);
}

0 个答案:

没有答案