WebGL performance (three.js) on fullscreen

[dario]

Hi All!, I am looking for a method to get a dramatic performance increase (frame per second) on fullscreen with webGL (I am working now with three.js framework)

This is my game: http://tario.github.io/quadnet

 

I made it adapt to window size on browser resize events, so, you can test reducing the window to tiny size to get huge performance, and setting the window to great size (e.g. fullscreen) will make the game VERY SLOW, ok , this make sense since a small enough window will set the resolution to 640x480 or whatever, and (in my case) setting the window to fullscreen will set the resolution to 1600x900... Of course I know render the game in higher screen resolution will be make it slow since there is much more fragments to process by GPU (640x480 -> about 307200 fragments, 1600x900 -> about 1440000 fragments).

 

But now, I am looking a way to render the game smooth (near 60fps) on fullscreen, even sacrifying quality, one approach I tried is to set the resolution of canvas (and rendering) to half widht, half height, (e.g. 800x450) and using CSS to stretch the canvas to cover all the window (all of this on fullscreen), and it didn't improve

 

I hear about methods of postproessing via scaling (e.g. rendering on 800x450, then doing an scale) but I don't know how to use them

 

Thanks in advance!

 

[hyperionlord]

did you find any tips or hints in this regard? I also found Three.js to run slowly in fullscreen.. also, did you find a way to prevent the tearing that occurs?

[Sebi]

I have started a pull request some time ago for the Threex extention WindowResize.

https://github.com/jeromeetienne/threex.windowresize/pull/4

http://mokgames.com/threex/WindowResize.js

The idea:

var windowResize = new THREEx.WindowResize(renderer, camera, {  maxWidth  : 1024,  maxHeight : 756});windowResize.trigger(); 

You simply defined a maxWidth/maxHeight for your game, if the screen size is bigger than the max size, the canvas will be scaled.

Other than that:

Keep track of changes. If you don't change anything at all during 1 rendering loop, then you don't have to render at all.

And keep the garbage collection low.

[lo.th]

you have also one option in devicePixelRatio set 0.5 and your resolution is divide by two 

new THREE.WebGLRenderer({ precision: "mediump", devicePixelRatio:1, antialias:false });