WebGL to add 3D hover effects to your website

My gut reaction to this is that it takes me back to the old days of rainbow dividers (<a href="http://rainbowdivider.com/" rel="nofollow">http:&#x2F;&#x2F;rainbowdivider.com&#x2F;</a>) and animated gifs, a la Strongbad&#x27;s site: <a href="http://www.homestarrunner.com/sbsite/" rel="nofollow">http:&#x2F;&#x2F;www.homestarrunner.com&#x2F;sbsite&#x2F;</a><p>On the other hand, as with many web technologies, used judiciously this could be cool for interactive infographics and things like that...

This is the first use case of 3D&#x2F;WebGL for actual web sites that I&#x27;ve found worthwhile. I could even see myself using a stereoscopic screen to browse sites like these. No flashy fullscreen effects or epilepsy-inducing adverts, just clean 3D pop-ups to highlight content.<p>It&#x27;s just a shame that anti-aliasing isn&#x27;t forced on by default; jagged edges should really have been left behind years ago.

I wonder if WebGL is a cause of global warming?<p>Instead of creating a server side animation and serving it in compressed format you force every single web-browser to render it.<p>Also nice work, because it looks good. I wonder if we will see the development of OpenGL caching techniques.

While modern web browsers today may support WebGL, there&#x27;s far too many computers not using a GPU that supports WebGL. For example, my 5 year old business workstations that run the latest Ubuntu.<p>On-hover WebGL effects only work if you fallback to a static image (an image of the non-hover state) for browsers that don&#x27;t support it.

How do I run it?<p>Crashes Firefox 23<p>No effects on Chromium 28.0.1500.71<p>&gt;Error creating WebGL context. three.min.js:412<p>&gt;Uncaught TypeError: Cannot call method &#x27;getExtension&#x27; of null<p>Linux Mint 15 x64

I really like coupling html and webgl, but thus far I&#x27;ve only done it the other way round: adding html on top of webgl. I did this in my last LudumDare game jam [1]. I used html to render nice looking text on top of webgl. Although it&#x27;s possible to render text within webgl it&#x27;s messy, especially if you want bold or italic text, different fonts, colors etc.<p>[1] <a href="http://min.psywerx.net/" rel="nofollow">http:&#x2F;&#x2F;min.psywerx.net&#x2F;</a>

Nice effect. I really like how it made the sound of a fan spinning up, and then showing me my desktop and an application crash notification.

This is great. I also don&#x27;t like when 3D is gimmicky, but I think a lot of that is because we haven&#x27;t explore 3D design as much as 2D design. It&#x27;s young. If 3D takes off like it has for movies and games, think of all the new business opportunities that will be created around 3D web design. It&#x27;s exciting.<p>By the way, I&#x27;m working on a open-source framework to make using 3D like this easier. It&#x27;s called voodoo.js (<a href="http://www.voodoojs.com/" rel="nofollow">http:&#x2F;&#x2F;www.voodoojs.com&#x2F;</a>), and helps you integrate 3D with 2D content easily. Check it out!

we are entering the 3D era of geocities

Interesting. On a haswell i5 with an intel 5000 series GPU it works reasonably on Chrome without any noticeable CPU or memory impact, Firefox stable works pretty well with only slightly more load, Firefox 26.0a1 dies instantly and completely.<p>The fact that it kills browsers for so many people so completely is a very good indication that this is in no way ready for use by anyone for anything other then &quot;look at this shiny demo!&quot;<p>Edit: Opera and Safari show nothing at all...

The one on the left is amazing! It reminds me of Zelda.

Love that WebGL is getting attention. Native browser support is gorgeous and becoming more available as people continue to upgrade. We at Social Tables (socialtables.com) been using it with three.js to do real-time rendering of floor plans and events!

Nobody&#x27;s mentioned phones, so I&#x27;ll point out that this works fine on the native browser of the Galaxy S 2. If you&#x27;re having problems with WebGL, complain to your PC manufacturer.<p>That said, I hope we have a CanvasBlock extension to sit alongside FlashBlock. There are uses of WebGL that don&#x27;t involve gimmicky animations or games (shameless plug: shaders for image demosaic; see my profile), but the option should belong to the users

Crashes my Firefox 22.0 instantly.

Another WebGL example for my class server at<p><a href="http://ezekiel.vancouver.wsu.edu" rel="nofollow">http:&#x2F;&#x2F;ezekiel.vancouver.wsu.edu</a><p>Seems fine under Safari (enable Web GL), and FireFox. Loops endlessly in Chrome (will hopefully fix soon). Please feel free to make fun of -- its just distracting eye candy I know.

Very nice, as a demo, I just hope that no webpage ever uses WebGL this way.<p>(Didn&#x27;t work on OS X for me, though.)

Works nicely on Windows and on Firefox 23&#x2F;Mac OS X. Other browsers (Chrome, Safari and Opera) on OS X show nothing at all for me. OS X 10.6.8 on a 3.06GHz Intel Core 2 Duo iMac.

crashes my browser firefox 23 on ubuntu 13.04

Doesn&#x27;t seem to do anything in Chrome&#x2F;OSX.<p><pre><code> Error creating WebGL context.</code></pre>

This is broken on mobile for me. Cool demo, but what about devices other than a desktop browser?

So much PITA just to view a demo. Tried FF,Chrome,Safari none seems to work.

works surprisingly well on ff mobile on my S3

Locked up Aurora, had to force quit.

as cool as it is to have this ability, just because you can doesn&#x27;t mean you should. Lest your site look like the 2013 equivalent of 1998 geocities.

Where can I find a spinning 3-d globe? You know, to symbolize the internet.

And it only took 30 seconds to load the <i>demo</i>!

Dear Jesus: We survived animated gifs. We found our way through the &quot;blink&quot; tag with a limited number of lives lost. Please give us the clarity of mind to wield this great new power with discretion and aplomb. Amen.