

WebGL to add 3D hover effects to your website - sirbrad
http://glecollinet.github.io/webgl-demo/

======
ryansan
My gut reaction to this is that it takes me back to the old days of rainbow
dividers ([http://rainbowdivider.com/](http://rainbowdivider.com/)) and
animated gifs, a la Strongbad's site:
[http://www.homestarrunner.com/sbsite/](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...

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

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

~~~
hissworks
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](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.

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

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

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

~~~
jlgreco
How are they not?

Seriously though, "irritating" is a matter of opinion. Explaining why
something is irritating is like explaining why something tastes good.

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

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

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

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

------
GoNB
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
From the article linked on the page: [http://html5hub.com/using-webgl-to-
add-3d-effects-to-your-we...](http://html5hub.com/using-webgl-to-
add-3d-effects-to-your-website/#i.3lpdiy14g4frns)

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

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

~~~
warfangle
Try: [http://get.webgl.org/](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
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.

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

~~~
kleiba
Which GPUs would you recommend on Linux?

~~~
zurn
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](https://wiki.ubuntu.com/X/HybridGraphics)

------
ensmotko
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/](http://min.psywerx.net/)

~~~
bitteralmond
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?

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

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

------
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/](http://www.voodoojs.com/)), and helps you
integrate 3D with 2D content easily. Check it out!

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

------
islon
we are entering the 3D era of geocities

------
Trezoid
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
In Safari go to Preferences->Advanced and tick the, "Show Develop menu in menu
bar" option, then select Develop->Enable WebGL.

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

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

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

~~~
nekgrim
Mozilla might win :
[http://browserquest.mozilla.org/](http://browserquest.mozilla.org/)

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

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

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

------
nawitus
Crashes my Firefox 22.0 instantly.

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

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

------
waynecochran
Another WebGL example for my class server at

[http://ezekiel.vancouver.wsu.edu](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
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.)

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

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

~~~
anxious
Try "\--enable-webgl --ignore-gpu-blacklist "

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

------
cdekok
crashes my browser firefox 23 on ubuntu 13.04

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

    
    
        Error creating WebGL context.

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

~~~
nwh
Looks like the integrated GPU in the MacBooks are blacklisted.

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

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

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

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

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

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

------
jimmaswell
works surprisingly well on ff mobile on my S3

------
MatthewPhillips
Locked up Aurora, had to force quit.

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

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

------
sliverstorm
And it only took 30 seconds to load the _demo_!

~~~
ntumlin
It loaded nearly instantly for me.

~~~
sliverstorm
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?

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

~~~
untog
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?

~~~
djm_
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...](http://www.streetmap.co.uk/map.srf?x=531500&y=181500&z=120&sv=london&st=3&tl=Map+of+London,+City+of+London.+\[City/Town/Village\]&searchp=ids.srf&mapp=map.srf)

