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
Post a Comment