WebGL to add 3D hover effects to your website

http://glecollinet.github.io/webgl-demo/

by sirbrad • 13 years ago

173 112 13 years ago

glecollinet.github.io

viggity• 13 years ago

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.

alt_2• 13 years ago

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.

kevingadd• 13 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...)

w0utert2• 13 years ago

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 ;-)

sgt• 13 years ago

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.

richardwhiuk• 13 years ago

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

JTon• 13 years ago

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

alt_2• 13 years ago

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.

voltagex_• 13 years ago

And flatten the battery on my laptop/phone faster.

eloff• 13 years ago

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.

shurcooL2• 13 years ago

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

islon• 13 years ago

we are entering the 3D era of geocities

nwh2• 13 years ago

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

    Error creating WebGL context.

ensmotko6• 13 years ago

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

nwh2• 13 years ago

Looks like the integrated GPU in the MacBooks are blacklisted.

wmil• 13 years ago

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

chasing2• 13 years ago

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.

moldycricket• 13 years ago

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.

nfoz• 13 years ago

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

chasing2• 13 years ago

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

sirkneeland• 13 years ago

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

MatthewPhillips• 13 years ago

Locked up Aurora, had to force quit.

ensmotko6• 13 years ago

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/

bitteralmond• 13 years ago

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?

ensmotko6• 13 years ago

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

pbhjpbhj2• 13 years ago

FWIW that page crashed my browser, FF22 on Kubuntu.

ensmotko6• 13 years ago

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

twiss• 13 years ago

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

Arnor• 13 years ago

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

nekgrim• 13 years ago

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

shdon3• 13 years ago

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.

alexfringes• 13 years ago

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

shdon3• 13 years ago

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.

nawitus2• 13 years ago

Crashes my Firefox 22.0 instantly.

reflectiv• 13 years ago

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

taf2• 13 years ago

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

nawitus2• 13 years ago

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

pbhjpbhj2• 13 years ago

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.

sirsar2• 13 years ago

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

warfangle2• 13 years ago

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?

anonymouz• 13 years ago

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.

coldtea2• 13 years ago

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

sirsar2• 13 years ago

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

mike-cardwell• 13 years ago

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

cdekok• 13 years ago

crashes my browser firefox 23 on ubuntu 13.04

jimmaswell• 13 years ago

works surprisingly well on ff mobile on my S3

coleifer• 13 years ago

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

waynecochran• 13 years ago

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.

lbebber• 13 years ago

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

iambateman• 13 years ago

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

timothyb89• 13 years ago

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.

ryansan• 13 years ago

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

xradionut• 13 years ago

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.

ehmuidifici• 13 years ago

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.

hissworks2• 13 years ago

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

karlmdavis• 13 years ago

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

slacka• 13 years ago

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.

SimHacker• 13 years ago

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"

sliverstorm2• 13 years ago

And it only took 30 seconds to load the demo!

ntumlin• 13 years ago

It loaded nearly instantly for me.

sliverstorm2• 13 years ago

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?

GoNB• 13 years ago

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.

Laremere• 13 years ago

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

frozenport• 13 years ago

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.

skrebbel2• 13 years ago

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.

kalleboo2• 13 years ago

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.

pedrocr• 13 years ago

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.

SnowProblem• 13 years ago

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!

shurcooL2• 13 years ago

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

danberger• 13 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!

Zash• 13 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.

Trezoid2• 13 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.

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

aardvark179• 13 years ago

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

Trezoid2• 13 years ago

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.

nitrogen• 13 years ago

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

tensaix2j• 13 years ago

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

WebGL to add 3D hover effects to your website

Related Stories