8 ms·
WebGL to add 3D hover effects to your website
- viggity 13y agoas 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_ 13y agoThis 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 13y agoAntialiasing 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...)
- w0utert 13y agoYes, 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 ;-)
- mistercow 13y ago>Subpixel rendering only works for contours. That's simply not true. It works for any non-horizontal edge.
- w0utert 13y agoIf 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.
- sgt 13y agoUsing 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 13y agoWhat? How is this possibly 'worthwhile'? All it does is add some irritating effects to logos on a webpage.
- JTon 13y agoHuh? How are the pop out effects shown on the demo page irritating?
- skrebbel 13y agoI can't tell whether you're being sarcastic.
- jlgreco 13y agoHow are they not? Seriously though, "irritating" is a matter of opinion. Explaining why something is irritating is like explaining why something tastes good.
- yareally 13y agoMaybe 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.
- alt_ 13y agoThe 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_ 13y agoAnd flatten the battery on my laptop/phone faster.
- eloff 13y agoIt'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.
- shurcooL 13y agoStrange, because anti-aliasing is clearly on for me by default. Chrome 28 on OS X.
- islon 13y agowe are entering the 3D era of geocities
- nwh 13y agoDoesn't seem to do anything in Chrome/OSX. Error creating WebGL context.
- ensmotko 13y agoYour might have a blacklisted gpu driver. Try running chrome with the startup flag --ignore-gpu-blacklist
- nwh 13y agoLooks like the integrated GPU in the MacBooks are blacklisted.
- ensmotko 13y agoMy 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 13y agoIt 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 13y agoI 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.
- kalleboo 13y agoMacBooks were manufactured from 2006 to 2011 with a wide range of GPUs.
- chasing 13y agoDear 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 13y agoThis 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 13y agoIt'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....
- terabytest 13y agoThat to me sounds like you're saying cars would be better off without wheels.
- untog 13y agoYeah, 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_ 13y agoAh, 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&sv=london&st=3&tl=Map+of+London,+City+of+London.+[City/Town/Village]&searchp=ids.srf&mapp=map.srf http://www.streetmap.co.uk/map.srf?x=531500&y=181500&z=120&s...
- 13y ago
- MatthewPhillips 13y agoLocked up Aurora, had to force quit.
- ensmotko 13y agoI 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 13y agoThis 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 13y agoThanks! 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).
- pbhjpbhj 13y agoFWIW that page crashed my browser, FF22 on Kubuntu.
- ensmotko 13y agoI'm sorry to hear that. Do you have the same issue on other sites that use WebGL or just mine?
- twiss 13y agoThe one on the left is amazing! It reminds me of Zelda.
- Arnor 13y agoChallenge: First HTML/WebGL/JS implementation of Zelda wins 1,000,000 nerd cred (or Rupees?).
- nawitus 13y agoCrashes my Firefox 22.0 instantly.
- reflectiv 13y agoI 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 13y agoit's your graphics card most likely crashing the browser.
- nawitus 13y agoI 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).
- pbhjpbhj 13y agoI was actually surprised that both it worked (well!) and it didn't crash for me - FF22 on Kubuntu using a ~7 year old system.
- shdon 13y agoWorks 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 13y agoUnsure 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 13y agoChrome 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.
- sirsar 13y agoHow 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 13y agoTry: 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 13y agoI 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.
- warfangle 13y agoFunky. Might be a compatibility issue with Three.js.
- McP 13y agoIntel 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.
- cdekok 13y agocrashes my browser firefox 23 on ubuntu 13.04
- jimmaswell 13y agoworks surprisingly well on ff mobile on my S3
- coleifer 13y agoWhere can I find a spinning 3-d globe? You know, to symbolize the internet.
- waynecochran 13y agoAnother 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 13y agoVery 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 13y agoThis is broken on mobile for me. Cool demo, but what about devices other than a desktop browser?
- timothyb89 13y agoIt 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 13y agoMy 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...
- xradionut 13y agoI 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 13y agoThat 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.
- hissworks 13y agoMy proudest moment on the internet was submitting the email that led to the creation of Strongbad's website.
- karlmdavis 13y agoAs it should be! You have more of an explanation anywhere?
- hissworks 13y agoI 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.
- sliverstorm 13y agoAnd it only took 30 seconds to load the demo!
- ntumlin 13y agoIt loaded nearly instantly for me.
- sliverstorm 13y agoThat 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 13y agoWhile 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 13y agoFrom the article linked on the page: http://html5hub.com/using-webgl-to-add-3d-effects-to-your-website/#i.3lpdiy14g4frns 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 13y agoI 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 13y agoI 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 13y 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 13y 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 13y agoThis 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 13y agoThis reminded me of voodoojs which I've come across earlier. I came here to post about it.
- danberger 13y agoLove 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 13y agoNice 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.
- Trezoid 13y agoInteresting. 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 13y agoIn Safari go to Preferences->Advanced and tick the, "Show Develop menu in menu bar" option, then select Develop->Enable WebGL.
- Trezoid 13y agoWhich 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 13y agoNobody'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 13y agoSo much PITA just to view a demo. Tried FF,Chrome,Safari none seems to work.