Sign in to follow this  
dario

WebGL performance (three.js) on fullscreen

Recommended Posts

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!

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.