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

Popular posts from this blog

php - How to pass multiple values from url -

php - How to pass multiple values from url - i'm trying pass textbox , 1 select result value 1 page page.using url.but it's display error message. "parse error: syntax error, unexpected '' (t_encapsed_and_whitespace), expecting identifier (t_string) or variable (t_variable) or number (t_num_string) in c:.." while($value= mysqli_fetch_assoc($result)){ $apid=$value['apid']; echo("<tr> <td>". $value['apid'] ."</td> <td>".$value['email']."</td> <td>".$value['comments']."</td> <td>".'<input type="text" name="payment"/>'."</td> <td>"."<input type='text' name='apid' value='".$apid."' style='visibility:hidden' size='2'>"."</a>"."<a hre...
Read more

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* - i've inherited doc publishing process takes docbook , builds html , pdf output, using apache fop both. project had been started, never completed. lots of tweaking, i've able of doc sets build (20+), except handful, , fail severe code 1 of these 2 conditions: "fo:flow" missing kid elements. required content model: marker* "fo:block" not valid kid of "fo:root" the xml output comes out of docbook , docbook-fop checks out well-formed. the fop error in 1 book, "endecagloss", example, points end of string: <fo:flow flow-name="xsl-region-body" start-indent="4pc" end-indent="0pt"/> here’s log output in case: [java] severe: javax.xml.transform.transformerexception: file:/scratch/publishing/hudson/jobs/build-main-endeca-documentation/workspace/serverdoc/w...
Read more

database - php search bar when I press submit with nothing in the search bar it shows all the data -

database - php search bar when I press submit with nothing in the search bar it shows all the data - the search fusion works correctly if press submit nil in search bar shows data. how message show saying nil has been entered search bar ?.i new php. <?php $mysql_host="host"; $mysql_database="database"; $mysql_user="username"; $mysql_password="password"; $dbconnect=@mysql_connect($mysql_host, $mysql_user, $mysql_password); // trys connect database if (!$dbconnect) { exit("an error has occurred - not connect database."); // if couldn't connect, allow user know } if(!mysql_select_db($mysql_database)) { exit("an error has occurred - not select database."); //if couldn't select db, allow user know } $output = ''; //collect if(isset($_post['search'])...
Read more