WebGL to add 3D hover effects to your website | Hacker News Reader

WebGL to add 3D hover effects to your website

glecollinet.github.io

173 pointssirbrad112 comments

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

I agree. It may be useful in certain web applications, but chances are it will end up being used for advertising and "effects" that are annoying and unwanted.

That was my first impression, too. And I bet that 90% of "webdesigners" will use these effects massively oh webpages, just as we saw on the 90's.

My proudest moment on the internet was submitting the email that led to the creation of Strongbad's website.

As it should be! You have more of an explanation anywhere?

I should write it up. The short story is that I was losing my mind in an "Interactive Fiction" course I took as an elective within my major (Fiction Writing... I know, I know). I was self-taught in CSS, HTML, JavaScript but had never used Flash, which at the time was still fairly new. However, everything we were being exposed to in Flash was difficult for me to work through to do even the most basic action, so while I was particularly stumped on an issue I wrote the email (http://www.homestarrunner.com/sbemail51.html), intentionally using the word "website" in every sentence because I just thought it'd be funny.

Didn't occur to me til just now the irony of struggling with Flash and then writing to Strongbad, which was all done up in Flash.

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.

The cool way to implement the BLINK tag in HTML5 is to run an Apple ][ emulator written in JavaScript, and use AppleSoft's FLASH command.

http://www.calormen.com/applesoft/index.htm

5 FLASH

10 PRINT "HELLO WORLD"

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.

Antialiasing is actually the default for most WebGL implementations I've tested, but it's not possible to turn it on everywhere. There are still lots of devices out there too weak to actually do antialiasing for everything, along with buggy drivers that crash or produce garbled output in some scenarios with AA on. AA can also introduce artifacts into certain rendering algorithms designed for use without AA (it produces some really strange inputs in your pixel shaders...)

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 combine different techniques to get antialiasing without requiring MSAA have to be implemented manually because AFAIK OpenGL does not have any API's to do anything other than full-scene antialiasing using multisampling (GL_POLYGON_SMOOTH is basically useless, if it even exists in OpenGL ES).

Antialiasing is actually a pretty hard topic unless you have lots of fillrate ;-)

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

Using Chrome 28 - shouldn't the anti aliasing work out of the box? This demo looks very jagged for me as well, to the point I'm sure people will react negatively to it.

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?

I can't tell whether you're being sarcastic.

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.

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.

And flatten the battery on my laptop/phone faster.

It's lame, bring in a whole bunch of heavyweight javascript for some annoying hover effects (the demo page is more than half a MB of JS, with threejs minified being 400K by itself.) There's no way that's a smart business move by any means, when we know that load time is inversely proportionate to sales.

Strange, because anti-aliasing is clearly on for me by default. Chrome 28 on OS X.

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 vertices has no significant power usage difference.

In fact, there's a fair chance that what you're looking at right now is in fact a 3D-rendered rectangle positioned in front of the camera precisely such that it looks flat and fills the screen (it's a bit different than that, because there's not really a camera but that's just nitpicking), mapped with a texture containing whatever pixels the OS wants you to see.

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

>creating a server side animation and serving it in compressed format

What compressed format would that be? WebGL code+textures is a pretty compressed way of transmitting and the dedicated 3D hardward that WebGL interfaces to is probably the most efficient available on the target to put the bits on the screen. The fact that WebGL punches through directly to hardware certainly makes it seem less inefficient than your typical web stack.

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.

From the article linked on the page: http://html5hub.com/using-webgl-to-add-3d-effects-to-your-we...

"Note that, in this demo, I assume the visitor is using a WebGL-enabled browser. A better practice would have been to first implement the page with static images to ensure basic functionality for everyone, then add the 3D effects as a progressive enhancement for advanced browsers."

How do I run it?

Crashes Firefox 23

No effects on Chromium 28.0.1500.71

>Error creating WebGL context. three.min.js:412

>Uncaught TypeError: Cannot call method 'getExtension' of null

Linux Mint 15 x64

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.

Funky. Might be a compatibility issue with Three.js.

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.

Which GPUs would you recommend on Linux?

The pendulum has certainly swung away from ATI/AMD.

Very latest Intel is ok, older are pretty slow. AMD hardware that works with the Mesa drivers is nearly as solid as Intel, but their proprietary drivers are a disaster (kernel crashes etc). Nvidia has decent proprietary drivers for desktop stuff.

On laptops, dual graphics (Nvidia calls it "Optimus", don't know about AMD) doesn't work right so Intel and Mesa-supported integrated AMD graphics are the best choices on laptops currently. There's some light at the end of the tunnel for Nvidia: https://wiki.ubuntu.com/X/HybridGraphics

Are you specifically talking about the Linux drivers for Intel GPUs? Their OpenGL implementation is based on the open-source Mesa project, which, while not perfect, has been worked on steadily for over a decade, and has been pretty solid in my experience.

Not fast, certainly, but solid.

But I was told Linux was ready for the Desktop...

OK, fixed.

I use an Optimus laptop (yeah, bad decision) which Chromium doesn't support. The solution is to tell it to support it anyway:

$ optirun chromium-browser --ignore-gpu-blacklist

Now it works fine.

Edit: fixing the problem on firefox:

$ optirun firefox

Crashes Firefox 23 on Debian Jessie here. Chromium on the same machine copes fine.

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?

Thanks! I had no trouble at all with the text. I just created a centered div above the webgl canvas and loaded a custom font from google fonts. I believe I used jquery to accomplish all of this.

It felt like cheating because there was no way I could make the text look this good within webgl under the time constraint (I only had 48 hours for the whole thing).

FWIW that page crashed my browser, FF22 on Kubuntu.

I'm sorry to hear that. Do you have the same issue on other sites that use WebGL or just mine?

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'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!

This reminded me of voodoojs which I've come across earlier. I came here to post about it.

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.

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 "look at this shiny demo!"

Edit: Opera and Safari show nothing at all...

In Safari go to Preferences->Advanced and tick the, "Show Develop menu in menu bar" option, then select Develop->Enable WebGL.

Which is just further proof that this is in no way ready for any mainstream use.

If your (usually not technical) users have to go through two different menus just show your fancy icons you're doing it wrong.

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

Challenge: First HTML/WebGL/JS implementation of Zelda wins 1,000,000 nerd cred (or Rupees?).

Mozilla might win : http://browserquest.mozilla.org/

that was a super fun little game, with TONS of pop-internet-culture references...

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's mentioned phones, so I'll point out that this works fine on the native browser of the Galaxy S 2. If you're having problems with WebGL, complain to your PC manufacturer.

That said, I hope we have a CanvasBlock extension to sit alongside FlashBlock. There are uses of WebGL that don'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.

I am at work, on a really shitty computer and restricted to an old v10.0 of Firefox...

it works great...I was actually quite surprised as this PC usually runs most sites and effects like ass...

it's your graphics card most likely crashing the browser.

I know. It's pretty easy to crash browsers these days with WebGL. I'm not sure if the hover effect contains invalid WebGL code. (My browser plays the Epic Citadel HTML5 demo well).

I was actually surprised that both it worked (well!) and it didn't crash for me - FF22 on Kubuntu using a ~7 year old system.

Another WebGL example for my class server at

http://ezekiel.vancouver.wsu.edu

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.

(Didn't work on OS X for me, though.)

Works nicely on Windows and on Firefox 23/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.

Unsure what the Chrome support is like for 10.6 but current Chrome has WebGL enabled by default. In Safari, you can manually enable it through Preferences>Advanced>Show develop menu in menu bar. Then check "Enable WebGL" in the Develop menu.

[EDIT: Also see wmil's comment below.]

Chrome is at the latest version. Even adding the "--ignore-gpu-blacklist" flag doesn't make it work. It does output some debugging info: "(0) : fatal error C9999: marking a sampler that is not a scalar Cg compiler terminated due to fatal error"

Enabling WebGL in Safari has bugger all effect. Well, not entirely nothing... it keeps refreshing, freezes while loading or displays the message that "Safari can't display this webpage", reinforcing my very negative opinion of that browser.

Try "--enable-webgl --ignore-gpu-blacklist "

WebGL was already enabled. I doubt the Cg compiler would have thrown an error if it weren't, anyway!

crashes my browser firefox 23 on ubuntu 13.04

Doesn't seem to do anything in Chrome/OSX.

    Error creating WebGL context.

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.

My drivers (older ATI card) are blacklisted as well, but starting chrome with the ignore-gpu-blacklist flag works fine. WebGL also works fine within Firefox, so I really don't understand why Chrome keeps blacklisting the drivers...

It may be for security reasons if there are known flaws in those drivers. That it "works" at first glance isn't the only thing to consider here. I wouldn't advise turning off the blacklist for day-to-day browsing: those drivers are black listed for a reason.

I agree, and I don't run chrome with the flag for day-to-day browsing. I'd still like to know what that reason is though and how come Firefox doesn't have the same issue.

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

Works fine for me. Try going to chrome://gpu/ to see if you can spot the problem.

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.

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'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 demo!

It loaded nearly instantly for me.

That means little. If I was on the same local network as the CDN, would "it loads fast for me" make it load fast for everyone?

Dear Jesus: We survived animated gifs. We found our way through the "blink" 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.

This is just a sample of what is possible. There will always be people who use the wrong tool for the job, but that is not a reason to dismiss this.

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

That to me sounds like you're saying cars would be better off without wheels.

Yeah, god, I long for the days before Google Maps, too. Who needs that slick slippy interface when you can endlessly click arrows at the corner of a static image?

Ah, true nostalgia. Making the click, waiting for the image to download over 56k..only to realise you've loaded the wrong tile.

If anyone wants to recreate the experience, Streetmap.co.uk [1] is still going (somehow).

[1] http://www.streetmap.co.uk/map.srf?x=531500&y=181500&z=120&s...

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.

Care to elaborate? That is not the direction I pictured at all. The open standards of the web should have the opposite effect, allowing anyone to build a computer that can run the major software offerings of the time.

I do not see it really any different to how web applications are developed today, just throwing out the needless overhead. If your concerns are to be realized, it has probably already happened a long time ago.

Why people keep saying this kind of stuff?

For one, whatever Tim Berner's Lee envisoned, the web is not the simple mostly textual medium it was in 1993. Get over it.

Second, for people to love reading text on the web, there was never a better time than the present. Lots of long form text by bloggers and content providers like Medium etc, combined with a widespread interest in improved readability and good typography. Plus, the fashion/preference for "minimalist" designs also helps putting emphasis on the content, even better than some 1997 site with animated gifs and black text on grey.

The universal reply to "get over it" is "if it's a problem for me, then it's a problem". Are you sure there's no grain of truth in the complaints about today's dynamic Web? How about this critique, which is hopefully more articulate? http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-Nov...

Are you sure there's no grain of truth in the complaints about today's dynamic Web?

Of course there are. But no-one has really articulated an alternative vision. That post certainly doesn't.

That post's alternative vision is something that already existed not so long ago, you can learn about it in as much detail as you want...

So we throw away all scripting? No more Google Maps? Doesn't sound very realistic to me.

IMO, browser plugins were the way forward. You can have all the fancy stuff that modern computers can do, like Google Maps or even Quake Live, and at the same time most of the web can stay simple.

Well, that's a terrible idea. Why do you think so many plugins are being phased out?

Well, the Flash plugin has become less popular because many developers disliked it and decided to bet on the open web instead. IMO that was for shortsighted ideological reasons. As far as I know, browser plugins are the only way to have truly decentralized innovation on the Web. Anyone can make a plugin and offer it to users. If plugins are discouraged, then a handful of browser makers become gatekeepers of all new functionality. It may seem okay now because some browser makers are seen as good guys, like Mozilla and Google, but we all remember the time when the biggest browser maker wasn't seen as a good guy, and that can happen again.

What are your arguments against plugins? I'm curious.

Primary argument against plugins is that they have to be remade for every platform. See: the iPhone not having Flash.

What? If you want to expose new rich functionality to web apps, you need to do it separately on each platform anyway, whether it's in a plugin or in the core browser. Plugin developers seem to be okay with paying that price. The iPhone doesn't have Flash because Apple doesn't want web developers to make rich apps and divert users from the app store, not because of implementation difficulties.

Suppose that's what they did with HTML5. What would happen then?

Nobody would use it. Proprietary solutions to do what WebGL and other HTML5 features do would pop up, and people would use those.

Instead, what we've got is a situation where you can actually turn off Flash and use the majority of websites without any degradation.

Who's dismissing? I love it -- and this example looks great.

I was actually kind of hoping someone would use this to recreate the blink tag...

Reply on news.ycombinator.com