Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

WebGL to add 3D hover effects to your website

glecollinet.github.io

Post reply on HN
Print view View original

81–90 of 115 posts

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

#81

Post by SnowProblem »

This is great. I also don't like when 3D is gimmicky, but I think a lot of that is because we haven't explore 3D design as much as 2D design. It'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's exciting.

By the way, I'm working on a open-source framework to make using 3D like this easier. It's called voodoo.js (http://www.voodoojs.com/), and helps you integrate 3D with 2D content easily. Check it out!

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

#82

Post by kalleboo »

skrebbel wrote: post #76
frozenport wrote: post #65

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

I don't uinderstand why you got downvotes. It's a fair, albeit somewhat misguided, comment. Basically, a lot more power will be consumed by downloading an animation and decompressing it, assuming it is shown at comparably high quality (no noticeable compression artefacts). On current hardware (a.k.a. the last 10 years or something), showing a flat picture or a rotating 3D object consisting of a small amount of vertic…

> On current hardware (a.k.a. the last 10 years or something), showing a flat picture or a rotating 3D object consisting of a small amount of vertices has no significant power usage difference.

In properly optimized software, yes. In current browsers? We're not there yet. In firefox I get maybe 10fps on these animations, and in all browsers it causes a minor temperature spike that h264 video does not.

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

#83

Post by kalleboo »

nwh wrote: post #11
ensmotko wrote: post #8

Earlier quoted context omitted.

Your might have a blacklisted gpu driver. Try running chrome with the startup flag --ignore-gpu-blacklist

Looks like the integrated GPU in the MacBooks are blacklisted.

MacBooks were manufactured from 2006 to 2011 with a wide range of GPUs.

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

#84

Post by alt_ »

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.

The effect conveys geometries and dimensions when activated that would otherwise require an animation. For simple objects this could save bandwidth and be resolution independent.

While I do not advise using it everywhere, it is just one use case that I do not have a problem with and that could be a useful part of a designer's toolset. Think of it as a 3D version of animated SVG. I only noted this because most other uses of WebGL are unnecessarily flashy and irritating.

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

#85

Post by yareally »

jlgreco wrote: post #74
JTon wrote: post #55

Earlier quoted context omitted.

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

How are they not? Seriously though, "irritating" is a matter of opinion. Explaining why something is irritating is like explaining why something tastes good.

Maybe my parents would think they're really neat and cool (as they have mentioned in similar things before to me), but I would object to that. While their claims of thinking that are perfectly rational from their own viewpoint (because they consider it novel and unique), I see it as an anti-pattern and distraction that gets in the way of productivity.

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

#86

Post by slacka »

ryansan wrote: post #53

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...

Tried it out on Firefox and it pegged one of my CPU cores to 100%. I hope this is not the future of the Internet.

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

#87

Post by w0utert »

mistercow wrote: post #45
w0utert wrote: post #15

Earlier quoted context omitted.

Yes, generic anti-aliasing for 3D graphics isn't as straightforward as modern desktop GPU's make it appear to be. The multi-sampling approach that desktop hardware uses is basically brute-forcing it, and doesn't work on mobile hardware that uses tile-based deferred rendering. Subpixel rendering only works for contours. Texture filtering requires you to model everything using bitmaps. Solutions that intelligently comb…

>Subpixel rendering only works for contours. That's simply not true. It works for any non-horizontal edge.

If you have touching faces rendered using different shaders, different lighting/material properties and/or different textures, internal edges rendered using subpixel antialiasing will look bad, which is why FSAA using multisampling is the preferred way to antialias on any system that has sufficient fillrate.

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

#88

Post by pbhjpbhj »

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/

FWIW that page crashed my browser, FF22 on Kubuntu.
Post reply on HN