webgl不使用整個畫布空間

我有一個旋轉的3D字母「F」。出於某種原因，「F」未畫在畫布的前20％。看到這個jsFiddle：http://jsfiddle.net/c948jos0/。webgl不使用整個畫布空間

渲染功能：

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矩陣不是將原點設置在畫布的左上角，但相同的代碼在教程中工作，所以我不知道。

來源

2014-11-04 WacławJasper

畫布元素初始化爲300x150尺寸，所以您的視口也是如此。當改變畫布大小，你所獲得的WebGL的背景後，還需要使用

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

我已經調整your fiddle，並增加了第二畫布與輪廓，所以你可以看到不同設置viewport。

除非你有特定的需要只覆蓋畫布的一部分，否則建議這樣做。

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

來源

2014-11-04 14:13:01

啊我明白了。我有一種感覺，就是這樣的。你有什麼關於學習webgl的好源的建議嗎？現在我覺得我所看到的所有教程都沒有提到這個，所以我覺得自己受騙了。 – 2014-11-04 22:17:12

http://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html – gman 2014-12-01 08:11:15

webgl不使用整個畫布空間

回答

相關問題