Question

我有一个旋转的3D字母“F”。出于某种原因，“F”未在画布的前20％中绘制。看到这个jsFiddle：http://jsfiddle.net/c948jos0/。

渲染功能：

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();

矩阵：

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
    ];
}

我一直关注http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html所以我认为我必须改变一些我不应该做的事情或写错字。问题是我无法弄清楚是什么。我认为它的make2DProjection矩阵没有将原点设置到画布的左上角，但是相同的代码在教程中工作，所以我不知道。

Answer 1

canvas元素初始化为300x150维度，视口也是如此。获取webgl上下文后更改画布大小时，还需要使用

设置viewport

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

我已调整your fiddle并添加了第二个带有轮廓的画布，以便您可以看到差异。

除非您特别需要仅覆盖部分画布，否则推荐的方法是这样做。

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

webgl不使用整个画布空间

1 个答案: