StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy is WebGL render speed so inconsistent?
text
Body
copied!<p>In my application I plot about 8 million vertices with a single call to WebGL's drawarrays using the LINE_STRIP flag. I don't actually want one long line, I want about 200k short lines, so I cap all the short lines with extra vertices, and tell the vertex shader to "push" the line caps into negative z to create invisible bridges. The rendering is quasi-static (the user can click various things that trigger a re-render) so it doesn't have to be super-fast, but I'd really hoped it would take less than 200ms on modernish computers.</p> <p>On my laptop [<em>UPDATE:</em> which runs Win7 using a few Intel i7s as its CPU and an integrated HD Graphics 4000 for a GPU] I get around 100ms in Chrome, which is good. Oddly though, Firefox gets around 1-2 seconds. On my Samsung Chromebook 550 I get anything from 600ms to 2s, often it starts quick and then subsequent renders get slower but it can get faster too.</p> <p><strong>Questions:</strong></p> <ul> <li>What might be causing the change in render speed on my Chromebook?</li> <li>Why is Firefox so much slower than Chrome on my laptop?</li> <li>Is it worth spending ages trying to make it run faster (i.e. can I expect much improvement)? Any tips?</li> </ul> <p><strong>Notes:</strong></p> <ul> <li><p>For the Chromebook repeated rendering tests, the only thing happening between renders is a uniform is changed to toggle between color palettes (implemented as textures). Chrome dev tools doesn't seem to think there are any major changes in the page's memory usage during the testing. </p></li> <li><p>I'm using gl.finish and console.time to see how long the rendering is taking.</p></li> <li><p>Except during debugging, I render to an orphaned canvas and then copy sections of the result to various small canvases on the page <em>UPDATE:</em> using drawImage (with the webgl canvas as the first argument). This probably does take a bit of time, but the numbers reported above don't seem to change much with or without the copy operation and with or without the webgl canvas attached to the page body (and visible).</p></li> <li><p><em>UPDATE:</em> There is a limit to how many vertices my laptop will render in one go, but the limit seems to fluctuate from moment to moment, if you go over the limit then it doesn't render anything. The number is around the 8million mark, but sometimes it's happy to go over 11million. I've now set it to batch 2 million at a time. Interestingly this seems to make my Chromebook go faster, but I can't be sure as it's so inconsistent. </p></li> <li><p><em>UPDATE:</em> I've disabled DEPTH_TEST and BLEND as I don't need them. I'm not convinced it made any difference. </p></li> <li><p><em>UPDATE:</em> I've tried rendering with POINTS instead of LINES. On my Chromebook it seemed to take about 1s with 0 point size (i.e. rendering nothing), and then around 1.5-2s as I increased the point size through 1,2, and 5.</p></li> <li><p><em>UPDATE:</em> Keeping everything on the z=0 plane doesn't seem to change the speed much, maybe it goes a little slower (which I'd expect as there are a lot more pixels to get through the fragment shader, though the fragment shader is just funneling a varying straight into gl_FragColor).</p></li> </ul>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload