简而言之,我在填充视口的四边形上渲染2D图像。在Firefox中它看起来很好,但Chrome的右侧和底部间距为1px。我所做的是将画布和视口的尺寸设置为图像的大小。我做错了吗?
这是我的代码,以防你想看到它。
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);
}