HTML5 WebGL Benchmark

Post by **Remus** » 15 Mar 2015, 16:16

Aloha,

No sign of life from Adobe in the past 6 months, so the Hopeless 3 development is "on hold".
I'm in process of changing the game environment and I have 3 options at this moment:
HTML5, Unity3D and Unreal Engine 4.
There are pros and cons in every case, but we're going to talk about them later.
Today we'll start with a HTML5 WebGL benchmark:

http://necromanthus.com/Test/html5/

HTML5-WebGL.jpg

Use the left mouse button to move forward and the right mouse button to move backward.
You can also use the Cursor and the WSAD keys.

Please provide feedback with the following infos:
1) medium FPS value after 2-3 minutes
2) processor and graphics card
3) OS and browser
4) do you like the image quality or not?

p.s.1
HTML 5 WebGL does not need a browser plugin and "should work" on any platform: Windows, Mac, Android, iOS, etc
However, on mobile devices you might need a browser update.

p.s.2
This is a rendering benchmark only (without collisions), so you can walk through walls.

p.s.3
I was a Firefox fan from the very beginning, but this time (HTML5 WebGL) I get the best results with Google Chrome.

Post by **gmi** » 15 Mar 2015, 18:04

1) FPS 59
2) Quad core AMD A8-5600K / AMD Radeon HD 7560D
3) Win7 / Firefox (with chrome also 59 FPS)
4) I like hl2 as it is and hope hl3 will not replace it, but this update looks AWESOME!!!

Post by **juan507** » 15 Mar 2015, 21:30

1. 59 fps
2. Intel core i7-4770-CPU@3.40GHz, AMD Radeon R7 200 series
3. Windows8/64 bits, Google Chrome
4. It looks good

Post by **freekarol** » 16 Mar 2015, 14:40

Remus wrote:No sign of life from Adobe in the past 6 months

Flash is almost dead. Android, Mac or Youtube usually don't use it. Actually, when I see how often the flash has vulnerabilities I'm not suprised by it's coming end.

Remus wrote:HTML 5 WebGL does not need a browser plugin and "should work" on any platform: Windows, Mac, Android, iOS, etc
However, on mobile devices you might need a browser update.

Keep in mind that is seems that plugins in web browsers could be killed too.

Remus wrote:I was a Firefox fan from the very beginning, but this time (HTML5 WebGL) I get the best results with Google Chrome

I did just a quick test: Firefox=9 FPS, Chrome Based Opera=56 FPS

But I will stick with Firefox. I don't want to invest my time in searching Firefox add-ons alternatives for Chrome. Chrome or another version of a Chrome based web browser that is is lighter than Google Chrome will be use just for playing this game.

HTML5, Unity3D or Unreal Engine 4?
I think you could also consider support of their developers. I think nobody wants support similar to Adobe.

Post by **slapshot** » 18 Mar 2015, 01:03

Windows 7 64-bit
Intel Core i3 CPU 550 @ 3.20GHz
8.0 GB RAM
ATI Radeon HD 5670

Chrome: fps: 56-57 Image: excellent
Firefox: fps 4

Image: excellent

Post by **chirolaq** » 18 Mar 2015, 17:50

1) FPS 9

2)AMD Atholn II X2 240 Processor, 3,0 GB RAM, NVIDIA GeForce 9400 GT
3)Windows XP Professional SP3. Google Chrome
4)Excellent image.

Post by **ridikk** » 19 Mar 2015, 23:28

Ala shit browser or computer what you want is a new hopelees in we weigh from scratch with this new hopelees remus friend will be very grateful for what you're grasping for the game and for us players

Post by **Remus** » 21 Mar 2015, 10:37

Thank you all for feedback.
Now to gmi (59), juan507 (59), freekarol (56), slapshot (57) and chirolaq (9):
please tell me if you get a (significant) FPS drop in the second test (two new models, one of them animated):

http://necromanthus.com/Test/html5/test2.html

p.s.
60 FPS is the max theoretical value, so 59 FPS (after 2-3 minutes) is the perfect result.
I get 58-59 FPS with Google Chrome and 52-53 FPS with Firefox.
But it's not only that.
I get the best results with Google Chrome from another point of view:
the smoothest movement (especially when you turn left and right).

Post by **gmi** » 21 Mar 2015, 12:59

Firefox:
I get the same results for both tests, this time 58 fps. But it takes maybe 1-2 minutes longer to reach this value for test2 (i start with 40 fps). This values are constant (no fps drop), but when i turn around, the background trembles, blurs and i get streaks around the models.

Chrome:
i reached 59 fps and everything is smoother but still a bit blurry especially around the models.

IE:
20 fps, jerky graphic, very bad!

Post by **Remus** » 21 Mar 2015, 14:47

gmi wrote:I get the same results for both tests, this time 58 fps. But it takes maybe 1-2 minutes longer to reach this value for test2 (i start with 40 fps).

I've updated the FPS counter routine and now it's lightning fast.
You need only 2-3 seconds (instead of 2-3 minutes) to get the accurate result.
Thanks for feedback.

Post by **freekarol** » 22 Mar 2015, 10:33

Remus wrote:
gmi wrote:I get the same results for both tests, this time 58 fps. But it takes maybe 1-2 minutes longer to reach this value for test2 (i start with 40 fps).
I've updated the FPS counter routine and now it's lightning fast.
You need only 2-3 seconds (instead of 2-3 minutes) to get the accurate result.
Thanks for feedback.

Yes, much faster. Firefox now has 44-47 fps, Opera 60 fps.

Post by **slapshot** » 22 Mar 2015, 11:48

Test 2 holds a steady 59 after several minutes

Graphics are beautiful!

Post by **juan507** » 22 Mar 2015, 15:39

59-60 fps, but I see the lines of the structures moving

Post by **Remus** » 22 Mar 2015, 20:39

OK folks, the 3rd benchmark is a "heavy" one: real-time shadows!

http://necromanthus.com/Test/html5/test3.html

With Firefox I get 49-51 FPS and choppy motion.
With Chrome I get 59 FPS and smooth motion.

Post by **freekarol** » 22 Mar 2015, 22:29

Remus wrote:OK folks, the 3rd benchmark is a "heavy" one: real-time shadows!

http://necromanthus.com/Test/html5/test3.html

With Firefox I get 49-51 FPS and choppy motion.
With Chrome I get 59 FPS and smooth motion.

I had the same results. By the way, don't try it with IE. Or you can but won't be surprised about what you will see...

Post by **gmi** » 23 Mar 2015, 18:36

I tested several times to be sure because this time i couldn't see a big difference between chrome and firefox.
With both i reached 59-60 fps after a few sec., graphic slightly jerks. I think with chrome it's a bit smoother.

By the way, i tried it with IE on another PC (not my):
I reached 64-65 fps!

with firefox 59
8 core Xeon CPU E3-1275 v3 @3,5 GHz
16 GB RAM
Nvidia quadro K2000
Win7 (64 bit)
However the graphic is still very choppy.

Post by **Remus** » 23 Mar 2015, 18:59

gmi wrote:I tested several times to be sure because this time i couldn't see a big difference between chrome and firefox.
With both i reached 59-60 fps after a few sec., graphic slightly jerks. I think with chrome it's a bit smoother.

Do you get choppy motion for "test3" or for all of them?

Post by **gmi** » 23 Mar 2015, 19:44

With firefox i get choppy motion for all tests.
I don't see performance differences, FPS always between 57-60.

With chrome it's the same, no differences between test 1-3, FPS 58-60.
But motion is smoother with chrome.

Edit:
I was wrong, 4 cores and 8 threads.

Post by **Remus** » 23 Mar 2015, 19:52

gmi wrote:With firefox i get choppy motion for all tests.
I don't see performance differences, FPS always between 57-60.

With chrome it's the same, no differences between test 1-3, FPS 58-60.
But motion is smoother with chrome.

58-60 FPS for all the tests is awesome (especially for real-time shadows).
But with Google Chrome I get VERY smooth motion in any test.

Do you have open other browser windows or tabs?

Post by **gmi** » 23 Mar 2015, 20:20

No I have nothing else open. Yes it is smoother with chrome but still a bit choppy.

Post by **Remus** » 23 Mar 2015, 20:36

gmi wrote:No I have nothing else open. Yes it is smoother with chrome but still a bit choppy.

I get the best results (very smooth motion and 59-60 FPS) with Google Chrome 26 only!

Post by **Remus** » 24 Mar 2015, 22:30

The 4th benchmark comes with dynamic lighting, real-time shadows, lens flares and ... smarter dog

http://necromanthus.com/Test/html5/test4.html

Please tell me if you get a significant FPS drop.

Post by **freekarol** » 24 Mar 2015, 22:54

Firefox
34-44 FPS
It's not smooth.

Chrome
57-60 FPS
It's smooth.

Warning: the dog bites.

Post by **gmi** » 25 Mar 2015, 10:03

I get the same results for all tests. Choppy motion with firefox 57-60 fps, smoother motion with chrome 59-60 fps.

With the other pc i get very smooth motion with firefox (59-60 fps) even when i have many tabs and programs open.

Post by **slapshot** » 25 Mar 2015, 12:32

Ditto - Firefox was 38-42 not smooth, Chrome was beautiful and steady 58

Post by **Remus** » 25 Mar 2015, 14:11

Excellent results guys!
Thanks for feedback.

gmi wrote:With the other pc i get very smooth motion with firefox (59-60 fps) even when i have many tabs and programs open.

That's impressive!
Please give me more details about that computer: processor, graphics card, OS and Firefox version.

Post by **chirolaq** » 25 Mar 2015, 15:23

worst,Remus,6 FPS

(with Chrome)

Post by **gmi** » 25 Mar 2015, 16:30

Remus wrote:Excellent results guys!
Thanks for feedback.

gmi wrote:With the other pc i get very smooth motion with firefox (59-60 fps) even when i have many tabs and programs open.
That's impressive!
Please give me more details about that computer: processor, graphics card, OS and Firefox version.

PC: Fujitsu celsius w530
processor: Intel Xeon CPU E3-1275 v3 @ 3,5 GHz / 16GB RAM
graphic card: Nvidia Quadro K2000
Win 7 professional SP1
Firefox 36.0.4
It's not allowed to install chrome

Post by **slapshot** » 26 Mar 2015, 00:22

slapshot wrote:Ditto - Firefox was 38-42 not smooth, Chrome was beautiful and steady 58

Sorry, re-tested both test 3 & 4 tonight, and both Chrome & Firefox produce steady, smooth 59 fps under any condition.

Post by **Remus** » 26 Mar 2015, 08:49

slapshot wrote:re-tested both test 3 & 4 tonight, and both Chrome & Firefox produce steady, smooth 59 fps under any condition.

Excellent result!
Now you can try "test4" in Full Screen mode:

http://necromanthus.com/Test/html5/test4fs.html

Press F to switch to full screen (and ESC to get back).

Windows XP
With Firefox 36 I get very good image quality, choppy motion and 35 FPS in Full HD (1920 x 1080).
With Chrome 26 I get very good image quality, smooth motion and 59 FPS in Full HD.

Windows 7 and 8
With Firefox 36 I get very good image quality, smooth motion and 59 FPS in Full HD.
With Chrome 41 I get very good image quality, smooth motion and 59 FPS in Full HD.

Post by **freekarol** » 26 Mar 2015, 10:08

gmi wrote:
Remus wrote:Excellent results guys!
Thanks for feedback.

gmi wrote:With the other pc i get very smooth motion with firefox (59-60 fps) even when i have many tabs and programs open.
That's impressive!
Please give me more details about that computer: processor, graphics card, OS and Firefox version.

PC: Fujitsu celsius w530
processor: Intel Xeon CPU E3-1275 v3 @ 3,5 GHz / 16GB RAM
graphic card: Nvidia Quadro K2000
Win 7 professional SP1
Firefox 36.0.4
It's not allowed to install chrome

Try portable Chrome. No installation is needed. You can also have the Chrome on your flash drive.
http://portableapps.com/apps/internet/g ... e_portable

Post by **freekarol** » 26 Mar 2015, 10:19

Remus wrote:
slapshot wrote:re-tested both test 3 & 4 tonight, and both Chrome & Firefox produce steady, smooth 59 fps under any condition.
Excellent result!
Now you can try "test4" in Full Screen mode:

http://necromanthus.com/Test/html5/test4fs.html

Press F to switch to full screen (and ESC to get back).

Windows XP
With Firefox 36 I get very good image quality, choppy motion and 35 FPS in Full HD (1920 x 1080).
With Chrome 26 I get very good image quality, smooth motion and 59 FPS in Full HD.

Windows 7 and 8
With Firefox 36 I get very good image quality, smooth motion and 59 FPS in Full HD.
With Chrome 41 I get very good image quality, smooth motion and 59 FPS in Full HD.

Firefox=47-53
Chrome=49-59

Both browsers are in default settings.

Post by **Remus** » 26 Mar 2015, 11:35

freekarol wrote:Firefox: 47-53
Chrome: 49-59

Both browsers are in default settings.

In full screen?
And your monitor resolution is set to ...
Still smooth motion with Chrome?

Post by **freekarol** » 26 Mar 2015, 11:42

Remus wrote:
freekarol wrote:Firefox: 47-53
Chrome: 49-59

Both browsers are in default settings.
In full screen?
And your monitor resolution is set to ...
Still smooth motion with Chrome?

Yes, in full screen. The screen resolution is set to maximum=1366x768. Chrome is a little smoother than Firefox.

Post by **gmi** » 26 Mar 2015, 18:25

Test4 full screen
My pc, monitor resolution is 1280x1024:
firefox - good image quality, a bit choppy motion and 59-60 fps,
chrome - better image quality, smoother motion and 59-60 fps.

Not my pc, monitor resolution is 1920x1200:
firefox - good image quality, very smooth motion and 59-60 fps,
IE - good image quality, choppy motion but 63-65 fps!

Post by **slapshot** » 26 Mar 2015, 22:47

Remus wrote: Excellent result!
Now you can try "test4" in Full Screen mode:

http://necromanthus.com/Test/html5/test4fs.html

Press F to switch to full screen (and ESC to get back).

Windows XP
With Firefox 36 I get very good image quality, choppy motion and 35 FPS in Full HD (1920 x 1080).
With Chrome 26 I get very good image quality, smooth motion and 59 FPS in Full HD.

Windows 7 and 8
With Firefox 36 I get very good image quality, smooth motion and 59 FPS in Full HD.
With Chrome 41 I get very good image quality, smooth motion and 59 FPS in Full HD.

Once again, both Chrome & Firefox produce the same results:

59-60 and holding after 3 minutes.

P.S. nice flare!

Post by **gmi** » 28 Mar 2015, 10:46

gmi wrote: IE - good image quality, choppy motion but 63-65 fps!

To the 65 fps with IE: Remus, you said that 60 fps is the max. theoretical value. Is it because the monitor is usually set to 60Hz? What i didn't mention is that i also have a screen tearing issue. Somebody in a forum wrote that this occurs when the graphics card generates more fps than the monitor can show. I have no idea of all this, it's just a theory why i get more than 60 fps...
Sorry i didn't mention this effect in my first post because it occurs even just when i scroll a web page...
However, with firefox it's perfect.

Post by **Remus** » 28 Mar 2015, 11:22

gmi wrote:To the 65 fps with IE: Remus, you said that 60 fps is the max. theoretical value. Is it because the monitor is usually set to 60Hz?
What i didn't mention is that i also have a screen tearing issue.
Somebody in a forum wrote that this occurs when the graphics card generates more fps than the monitor can show.
I have no idea of all this, it's just a theory why i get more than 60 fps...
Sorry i didn't mention this effect in my first post because it occurs even just when i scroll a web page...
However, with firefox it's perfect.

I do not limit the FPS value (for now), but in Firefox and Chrome is capped at 60.
I don't know about Internet Explorer.
In any case, 60 FPS is the best value because most of the monitors cannot draw more than 60 frames per second at full resolution.
In Hopeless 2 the FPS is capped at 50.

And yes, tearing occurs when the GPU sends more frames the monitor is capable to draw.
A workaround is to turn ON the V-Sync (vertical sync).

Post by **Remus** » 29 Mar 2015, 09:46

I'm sure you'll like the 5th benchmark:

http://necromanthus.com/Test/html5/test5.html

P = Pause
Enter = Play
R = Rewind

p.s.
I thought the video texture will kill the global performances, but with Chrome I get the same smooth motion and 59 FPS

Post by **gmi** » 29 Mar 2015, 12:20

Same as before, 59-60 fps with firefox and chrome, a bit choppy with firefox smoother with chrome.
I will test tomorrow with the other pc - thanks for the tip!

Post by **freekarol** » 29 Mar 2015, 19:34

Remus wrote:I'm sure you'll like the 5th benchmark:

http://necromanthus.com/Test/html5/test5.html

P = Pause
Enter = Play
R = Rewind

p.s.
I thought the video texture will kill the global performances, but with Chrome I get the same smooth motion and 59 FPS

It seems that my hardware likes more Chrome than Firefox:
Firefox=40-44 fps
Chrome=59-60 fps

And just Chrome was smooth as hell.

Post by **gmi** » 30 Mar 2015, 18:17

2nd pc:
Still 59-60 fps with firefox, but now it's a bit choppy.
IE: i switched ON vsync but it didn't help. FPS 66, sceen tearing and very choppy. The video did not work at all, only black screen and no sound... I think i stop testing with IE.

Post by **Remus** » 30 Mar 2015, 19:45

gmi wrote:IE: i switched ON vsync but it didn't help. FPS 66, sceen tearing and very choppy. The video did not work at all, only black screen and no sound... I think i stop testing with IE.

It was MP4 vs OGG and the winner was OGG

Here is why:

MP4: Chrome = yes, Firefox = no, IE9 = yes, Opera = no
OGG: Chrome = yes, Firefox = yes, IE9 = no, Opera = yes.

Post by **Remus** » 01 Apr 2015, 14:58

Are you a plumber?
There is a leak in "test6" !!

http://necromanthus.com/Test/html5/test6.html

Post by **slapshot** » 01 Apr 2015, 19:13

Remus wrote:Are you a plumber?
There is a leak in "test6" !!

http://necromanthus.com/Test/html5/test6.html

Initial test with my boss's P.O.S. PC gave

results of 15fps. (maybe I should play from this PC!) Let me test this at home on a real PC.

Post by **slapshot** » 01 Apr 2015, 23:01

Ok, at home on both Chrome & Firefox steady 59. Firefox seemed like the graphics were slightly sharper. 3D sound worked great on both.

Post by **gmi** » 02 Apr 2015, 10:56

Okay today my firefox seems to have some problems. Test 5 and 6 are a lot more choppy than last time but still 55-60 fps.
With chrome it's almost perfect (59-60 fps), i only notice a very slight twitching.

Post by **Remus** » 02 Apr 2015, 13:36

Excellent results folks!
The 7th benchmark is for all the Hopeless 2 fans:

http://necromanthus.com/Test/html5/test7.html

What do we have so far:
- 120,000 polygons
- dynamic lighting
- realtime shadows
- particles (steam)
- video texture
- lens flares
- animated skinned mesh
- HUD weapon

With Chrome I get the same smooth motion and impressive 59 FPS.
I'm waiting for your results.
In any case, all of these make HTML5 WebGL a real candidate for Hopeless 3.

Post by **freekarol** » 02 Apr 2015, 14:40

Remus wrote:Excellent results folks!
The 7th benchmark is for all the Hopeless 2 fans:

http://necromanthus.com/Test/html5/test7.html

What do we have so far:
- 120,000 polygons
- dynamic lighting
- realtime shadows
- particles (steam)
- video texture
- lens flares
- animated skinned mesh
- HUD weapon

With Chrome I get the same smooth motion and impressive 59 FPS.
I'm waiting for your results.
In any case, all of these make HTML5 WebGL a real candidate for Hopeless 3.

Opera= 58-60 FPS
Firefox=14-20 FPS

Post by **Remus** » 02 Apr 2015, 16:21

freekarol wrote:Opera= 58-60 FPS
Firefox=14-20 FPS

I get 59 FPS with Chrome (very smooth motion) and around 40 FPS with Firefox (choppy motion).
In Firefox be sure this setting is enabled:
Tools / Options / Advanced / Use hardware acceleration when available