WebGL to add 3D hover effects to your website(glecollinet.github.io) |
WebGL to add 3D hover effects to your website(glecollinet.github.io) |
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...
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.
I can't wait.
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.
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.
Of course there are. But no-one has really articulated an alternative vision. That post certainly doesn't.
What are your arguments against plugins? I'm curious.
On the other hand, as with many web technologies, used judiciously this could be cool for interactive infographics and things like that...
http://www.calormen.com/applesoft/index.htm
5 FLASH
10 PRINT "HELLO WORLD"
It's just a shame that anti-aliasing isn't forced on by default; jagged edges should really have been left behind years ago.
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.
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 ;-)
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.
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.
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.
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.
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.
"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."
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
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?
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.
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
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).
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!
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...
If your (usually not technical) users have to go through two different menus just show your fancy icons you're doing it wrong.
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
it works great...I was actually quite surprised as this PC usually runs most sites and effects like ass...
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.
(Didn't work on OS X for me, though.)
[EDIT: Also see wmil's comment below.]
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.
Error creating WebGL context.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.
Seriously though, "irritating" is a matter of opinion. Explaining why something is irritating is like explaining why something tastes good.
That's simply not true. It works for any non-horizontal edge.
Not fast, certainly, but solid.
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