Shader performance

[Milton]

Hi. I'm just playing around with the seascape shader and I made this very relaxing test page

Now this runs fine (even Fullscreen) on my Linux/FF. Chrome is slower. And anything on Windows is even slower.
I wonder if anyone has some performance tips. Is there a difference between shader engines? (this one uses three.js)

I was looking at this because I want water as the plane in my game. But maybe it's easier (and faster) to use animation (or even animated gifs or video via CSS)?

[mattstyles]

There should not be any noticeable difference with JS engines, all they do is push the shader program at the GPU, from there JS doesn't do anything.

My little work MacBook Air with its lack of dedicated graphics runs it really slow, I'm guessing of course but its looks <30 fps so its fairly choppy.

I'm a little surprised there is a difference between browsers as the program should be held in the GPU, if its the same machine and the same GPU then it should work just about the same. There will be a slight difference as the JS is probably updating a tick and passing that into the shader, or something, but thats a minimal amount of work. There will only be a difference between browsers and JS frameworks is you're asking the JS to do a lot, but, presumably almost all the calculations are on the GPU and, as far as I know, all browsers have the same access to it.

[Milton]

That is an excellent observation. Why does it differ per browser? I never thought of that. But I guess it does depend somehow on the HTML5 implementation. For instance, it doesn't run at all on the latest IE (don't know about Edge).

Maybe it is to do with the shader language compilation?

[mattstyles]

Yeah, I'm not sure, I think the JS just passes text as the shader program to the GPU but I'm a fair way out of my depth with all the mechanics.

Maybe it's something to do with how the JS passes the updating uniforms into the program. 

Could also be to do with how exactly each browser implements webGL, older versions of IE, for example, don't implement it at all so you dont have access to the gpu at all (I think), even though the browser does and can accelerate rendering via the GPU, you just don't have an interface to it.

There is, presumably, differences in how each platform also has access to the hardware.

[Fatalist]

It runs at 18fps(fullscreen) on my low-end gaming PC. The Average non-hardcore gamer has a weaker machine. And you probably need other things in your game as well...

You could try rendering it on lower resolution and decrease some of the constants like  NUM_STEPS,  ITER_GEOMETRY,  ITER_FRAGMENT. It will get less realistic but such realism is too much for a game anyway unless everything else in the game looks as realistic as this.

 

1 hour ago, Milton said:

Maybe it is to do with the shader language compilation?

Yeah, they probably do different kinds of optimizations to the code. And Chrome(and maybe FF as well) on Windows translate GLSL code and opengl calls to DirectX, that will also  bring in some unpredictability.

 

[Milton]

5 minutes ago, Fatalist said:

It runs at 18fps(fullscreen) on my low-end gaming PC.

How can you tell exactly? And could you try other Browsers/OS's?
I have a 4 year old HP (i5), with integrated Intel GPU, and it still gives me 30 FPS fullscreen on Linux/FF.

[Fatalist]

1 hour ago, Milton said:

How can you tell exactly?

On Chrome/Windows: Developer Tools->Console->Rendering->Show FPS meter (make sure you select "undock in separate window" in devtools)

Chrome on Linux:  enable "FPS counter" in chrome://flags/

Firefox: enable layers.acceleration.draw-fps;true in about:config

 

 

[Fatalist]

1 hour ago, Milton said:

And could you try other Browsers/OS's?

Sure:

Windows:

Chrome - 14fps(Initially I was measuring with devtools visible so it was not really fullscreen, that's why it reported 18fps)

FF: 12fps

IE 11: error - linkProgram: Complexity for at least one shader exceeds allowed limits

Ubuntu:

Chrome: 10fps

FF: 7fps

A10-5800k with integrated GPU, resolution - 1920x1080

 

I have a 4 year old HP (i5), with integrated Intel GPU, and it still gives me 30 FPS fullscreen on Linux/FF.

Screen resolution?

 

 

[Milton]

47 minutes ago, Fatalist said:

Screen resolution?

1366 x 768 on Ubuntu 15.10.

Maybe it has to do with the compilation stage? Maybe it runs best on the graphics driver it compiled on?

 

Anyway, I think I'll drop the shader idea.
CSS seems much faster, so I'll just use that.