javascript - webgl not using the entire canvas space -
javascript - webgl not using the entire canvas space -
i have spinning 3d letter "f". reason, "f" not drawn in top 20% of canvas. see 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) { homecoming [ 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); homecoming [ 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); homecoming [ c, 0, -s, 0, 0, 1, 0, 0, s, 0, c, 0, 0, 0, 0, 1 ]; } function make2dprojection(width, height, depth) { // note: matrix flips y axis 0 @ top. homecoming [ 2 / width, 0, 0, 0, 0, -2 / height, 0, 0, 0, 0, 2 / depth, 0, -1, 1, 0, 1 ]; }
i have been next http://webglfundamentals.org/webgl/lessons/webgl-3d-orthographic.html figure must have changed shouldn't have or made typo. problem cant figure out what. think make2dprojection matrix not setting origin top left corner of canvas, same code working in tutorial dont know.
the canvas element initialized 300x150 dimensions , viewport. when changing canvas size after acquired webgl context need set viewport
using
gl.viewport(x, y, width, height)
i've adjusted your fiddle , added sec canvas outline can see difference.
unless have specific need cover part of canvas recommended way is.
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
javascript canvas webgl
Comments
Post a Comment