CODEWITHSUNDEEP
javascriptcanvaswebgl
WacławJasper
WacławJasper

Reputation: 3384

webgl not using the entire canvas space

I have a spinning 3D letter "F". For some reason, the "F" is not drawn in the top 20% of the canvas. See this jsFiddle: http://jsfiddle.net/c948jos0/.

The render function:

var rX = 0;
var rY = 0;

gl.enable(gl.CULL_FACE);
gl.enable(gl.DEPTH_TEST);
gl.canvas.width = 400;
gl.canvas.height = 200;
gl.clearColor(0.5,0.5,0.5,1.0);

function render(){
    rX += Math.PI/64;
    rY += Math.PI/128;

    var projection = make2DProjection(gl.canvas.clientWidth,gl.canvas.clientHeight,400);
    var translation = makeTranslation(200,50,0);
    var rotX = makeXRotation(rX);
    var rotY = makeYRotation(rY);

    var mat = matrixMultiply(rotX,rotY);
    mat = matrixMultiply(mat,translation);
    mat = matrixMultiply(mat,projection);
    uniforms["u_matrix"](new Float32Array(mat));

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES,0, 16*6);

    setTimeout(render,33);
}

render();

The matrices: 

function makeTranslation(tx, ty, tz) {
    return [
        1,  0,  0,  0,
        0,  1,  0,  0,
        0,  0,  1,  0,
        tx, ty, tz, 1
    ];
}

function makeXRotation(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);

    return [
        1, 0, 0, 0,
        0, c, s, 0,
        0, -s, c, 0,
        0, 0, 0, 1
    ];
}

function makeYRotation(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);

    return [
        c, 0, -s, 0,
        0, 1, 0, 0,
        s, 0, c, 0,
        0, 0, 0, 1
    ];
}


function make2DProjection(width, height, depth) {
    // Note: This matrix flips the Y axis so 0 is at the top.
    return [
        2 / width, 0, 0, 0,
        0, -2 / height, 0, 0,
        0, 0, 2 / depth, 0,
        -1, 1, 0, 1
    ];
}

I have been following http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html so I figure I must have changed something I shouldn't have or made a typo. The problem is I cant figure out what. I think its the make2DProjection matrix not setting the origin to the top left corner of canvas, but the same code is working in the tutorial so I dont know.

Upvotes: 1

Views: 251

Answers (1)

LJᛃ
LJᛃ

Reputation: 8153

The canvas element is initialized with 300x150 dimensions and so is your viewport. When changing the canvas size after you acquired the webgl context you also need to set the viewport using

gl.viewport(x, y, width, height)

I've adjusted your fiddle and added a second canvas with an outline so you can see the difference.

Unless you have a specific need to only cover part of the canvas a recommended way to do this is. 

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

Upvotes: 1

Related Questions