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.
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?
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.
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.
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...
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, 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.
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.
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.
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.
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.
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.
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.
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.
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.
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 ;-)
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.
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.
"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."
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.
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).
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.
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.
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.
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
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!
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!"
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!
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).
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
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.
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.
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.
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.
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.
