Display scene at lower resolution in three.js -


i looking way display three.js viewport @ half resolution (or double size depending on how @ it).

three.js documentation states

[y]ou can give setsize smaller values, window.innerwidth/2 , window.innerheight/2, half resolution. not mean game fill half window, rather bit blurry , scaled up.

the actual result, however, viewport sclaed half size.

this jsfiddle shows non-expected behaviour.

looking @ api there setsize , setviewport method, neither allows me have scaled viewport.

there question , answer here on gives 1 way of doing css, looking non-css related way if possible.

2pha's answer correct , has been implemented in threejs setpixelratio() method, can write fewer lines. main interest method is consistent window property window.devicepixelratio recalled in comment.

this important feature add boilerplate if care mobile / tablet devices. in html header should have meta tag : <meta name='viewport' content='width=device-width'/>.

  • if not have tag innerwidth , innerheight values bigger device needs, creating bigger framebuffer , can reduce framerate.
  • but @ opposite if have tag, without setting pixel ratio, framebuffer small... css pixel vs screen pixel story.

that why add line in javascript

renderer.setpixelratio( window.devicepixelratio ); 

it needs setsize called after :

renderer.setpixelratio( window.devicepixelratio ); renderer.setsize( innerwidth, innerheight ); 

Comments

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -