WebGL to add 3D hover effects to your website • Hacker News Board

Re: WebGL to add 3D hover effects to your website

#51

Post by iambateman » Tue, Aug 13, 2013, 5:03 PM UTC

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

Re: WebGL to add 3D hover effects to your website

#52

Post by McP » Tue, Aug 13, 2013, 5:10 PM UTC

anonymouz wrote: post #40

warfangle wrote: post #34

Earlier quoted context omitted.

Try: http://get.webgl.org/ Check and make sure your 3D drivers are up to par. Make sure webgl is enabled in chromium flags. Are you really that surprised that 3D is flaky on linux?

I have the same problem: Firefox 23 on Debian; Intel GPU (so pretty solid drivers), get.webgl.org works fine and I can't remember when I last had trouble with 3D, but the OP's site crashes my browser. Then again "in the wild" I wouldn't enable WebGL anyway for most sites. Edit: I think it's a Firefox problem. Works in Chromium for me.

Intel GPUs != solid OpenGL drivers. I do a lot of work in OpenGL and I curse Intel almost daily for the multitude of bugs in their OpenGL implementations. The GPUs' only saving grace is their ubiquity so at least I get a bug report quite quickly when a work-around is required.

Re: WebGL to add 3D hover effects to your website

#53

Post by ryansan » Tue, Aug 13, 2013, 5:20 PM UTC

My gut reaction to this is that it takes me back to the old days of rainbow dividers (http://rainbowdivider.com/) and animated gifs, a la Strongbad's site: http://www.homestarrunner.com/sbsite/

On the other hand, as with many web technologies, used judiciously this could be cool for interactive infographics and things like that...

Re: WebGL to add 3D hover effects to your website

#54

Post by bitteralmond » Tue, Aug 13, 2013, 5:21 PM UTC

ensmotko wrote: post #12

I really like coupling html and webgl, but thus far I'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's possible to render text within webgl it's messy, especially if you want bold or italic text, different fonts, colors etc. [1] http://min.psywerx.net/

This is pretty cool! Even as simple as this is, it shows how pretty webGL can be, and how it can play nice with DOM elements. Did you have much trouble getting the text to look right?

Re: WebGL to add 3D hover effects to your website

#55

Post by JTon » Tue, Aug 13, 2013, 5:21 PM UTC

richardwhiuk wrote: post #27

alt_ wrote: post #3

This is the first use case of 3D/WebGL for actual web sites that I'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. It's just a shame that anti-aliasing isn't forced on by default; jagged edges should really have been left behind years ago.

What? How is this possibly 'worthwhile'? All it does is add some irritating effects to logos on a webpage.

Huh? How are the pop out effects shown on the demo page irritating?

Re: WebGL to add 3D hover effects to your website

#56

Post by Wilya » Tue, Aug 13, 2013, 5:23 PM UTC

randomdata wrote: post #26

nfoz wrote: post #16

Earlier quoted context omitted.

It's a reason to proclaim that the people deciding on web standards are doing a horrible job. Scripting should be removed from the web, not made ever more powerful....

It is a long term evolution. Eventually, application developers will build directly atop the accelerated graphics layers, freeing the browser to be just a basic virtual machine, and leaving HTML rendering to be just another app built atop that machine. But these things take time and there is a lot of legacy cruft that needs to work in the meantime.

Just like native apps, except the end-user no longer has control over anything.

I can't wait.

Re: WebGL to add 3D hover effects to your website

#57

Post by sliverstorm » Tue, Aug 13, 2013, 5:30 PM UTC

And it only took 30 seconds to load the demo!

Re: WebGL to add 3D hover effects to your website

#58

Post by ntumlin » Tue, Aug 13, 2013, 5:33 PM UTC

sliverstorm wrote: post #57

And it only took 30 seconds to load the demo !

It loaded nearly instantly for me.

Re: WebGL to add 3D hover effects to your website

#59

Post by timothyb89 » Tue, Aug 13, 2013, 5:35 PM UTC

iambateman wrote: post #51

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

It actually works great for me using the current Chrome Beta on Android, and I've heard Firefox might have started supporting WebGL on mobile as well, though a lot of platforms are still left out... iOS comes to mind.

Re: WebGL to add 3D hover effects to your website

#60

Post by GoNB » Tue, Aug 13, 2013, 5:36 PM UTC

While modern web browsers today may support WebGL, there'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.

On-hover WebGL effects only work if you fallback to a static image (an image of the non-hover state) for browsers that don't support it.