TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

WebGL to add 3D hover effects to your website

173 pointsby sirbradalmost 12 years ago

27 comments

ryansanalmost 12 years ago
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...
评论 #6207605 未加载
评论 #6208264 未加载
评论 #6207071 未加载
评论 #6209283 未加载
评论 #6207452 未加载
alt_almost 12 years ago
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.
评论 #6206463 未加载
评论 #6207250 未加载
评论 #6206402 未加载
评论 #6208951 未加载
评论 #6205980 未加载
frozenportalmost 12 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.
评论 #6207256 未加载
评论 #6207443 未加载
GoNBalmost 12 years ago
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.
评论 #6207193 未加载
sirsaralmost 12 years ago
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
评论 #6206594 未加载
评论 #6206789 未加载
评论 #6207218 未加载
评论 #6206622 未加载
ensmotkoalmost 12 years ago
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>
评论 #6206960 未加载
评论 #6208657 未加载
Zashalmost 12 years ago
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.
SnowProblemalmost 12 years ago
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!
评论 #6208890 未加载
islonalmost 12 years ago
we are entering the 3D era of geocities
Trezoidalmost 12 years ago
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...
评论 #6209184 未加载
twissalmost 12 years ago
The one on the left is amazing! It reminds me of Zelda.
评论 #6206497 未加载
danbergeralmost 12 years ago
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!
nitrogenalmost 12 years ago
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
nawitusalmost 12 years ago
Crashes my Firefox 22.0 instantly.
评论 #6206439 未加载
评论 #6208676 未加载
评论 #6206646 未加载
waynecochranalmost 12 years ago
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.
lbebberalmost 12 years ago
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.)
shdonalmost 12 years ago
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.
评论 #6206408 未加载
cdekokalmost 12 years ago
crashes my browser firefox 23 on ubuntu 13.04
nwhalmost 12 years ago
Doesn&#x27;t seem to do anything in Chrome&#x2F;OSX.<p><pre><code> Error creating WebGL context.</code></pre>
评论 #6206104 未加载
评论 #6206096 未加载
iambatemanalmost 12 years ago
This is broken on mobile for me. Cool demo, but what about devices other than a desktop browser?
评论 #6207039 未加载
tensaix2jalmost 12 years ago
So much PITA just to view a demo. Tried FF,Chrome,Safari none seems to work.
jimmaswellalmost 12 years ago
works surprisingly well on ff mobile on my S3
MatthewPhillipsalmost 12 years ago
Locked up Aurora, had to force quit.
viggityalmost 12 years ago
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.
coleiferalmost 12 years ago
Where can I find a spinning 3-d globe? You know, to symbolize the internet.
sliverstormalmost 12 years ago
And it only took 30 seconds to load the <i>demo</i>!
评论 #6207026 未加载
chasingalmost 12 years ago
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.
评论 #6206196 未加载
评论 #6209249 未加载