Дополнительное пространство в WebGL, несмотря на то же измерение - PullRequest
0 голосов
/ 30 декабря 2011

Короче говоря, я рендеринг 2D-изображения на квад, который заполняет область просмотра.В Firefox это выглядит хорошо, но Chrome имеет интервал в 1 пиксель справа и снизу.Я установил размер холста и область просмотра в соответствии с размером изображения.Я что-то не так делаю?

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