3DEverywhere

March 28, 2012 12:41 PM

WebGL, the 3D technology that's associated with HTML5, continues to make giant strides in diverse areas:

Exploration of human anatomy: Zygote Body, released yesterday, and BioDigital Human, the successors to Google Body (previously)

World Visualisation: WebGL Earth, Nokia's 3D Map of the entire earth (previously). WorldWeather and The WebGL Globe, a Google project that displays all kinds of data. Also: Where Does My Tweet Go?

Games: browser ports of Team Fortess 2, Quake 3 and Rage (a developer’s diary). SkidRacer, an entire game in WebGL. Mini Mass Effect (not yet playable, sadly).

Musicals: Lights.

Tools: 3Notes.js, a visual scene editor. Developer documentation. More resources.

The majority of these projects are open source; recent browsers are required for all links. If the ocean is more your thing, you might want to check out Chrysaora or the WebGL Fishtank

posted by Bora Horza Gobuchul (27 comments total)

Water Simulation
posted by East Manitoba Regional Junior Kabaddi Champion '94 at 12:56 PM on March 28, 2012

Whatever happened to VRML?
posted by empath at 1:03 PM on March 28, 2012 [3 favorites]

Sorry, your graphics card doesn't support WebGL

I guess that I'll stick to Flash for now.
posted by octothorpe at 1:09 PM on March 28, 2012

Sorry, your graphics card doesn't support WebGL

I've had this message come up before and it was actually the browser (Safari). Try it in Firefox. Terrible coding to incorrectly blame the graphics card, and so likely to be believed.
posted by iotic at 1:18 PM on March 28, 2012 [1 favorite]

Steps to enable WebGL in Safari:

1. Open Safari preferences.
2. Click the Advanced tab.
3. Check the "Show Develop menu in menu bar" checkbox.
4. From the Develop menu, select "Enable WebGL".

posted by RichardP at 1:23 PM on March 28, 2012 [5 favorites]

I've had problems since forever trying to webgl working in chrome. Seems like it shouldn't be so hard...
posted by dave78981 at 2:12 PM on March 28, 2012

I love how much faster and smoother it has made Google Maps.

How much longer until we see all the Tower Defense games made with this?
posted by mccarty.tim at 2:20 PM on March 28, 2012

On some google sites you also have to send your browser agent as something other than Safari (follow RichardP's directions above, then go to Develop > User Agent). I'm sure this is an oversight and not on purpose. I usually select "Chrome" and I can see whatever I want in Safari.
posted by cjorgensen at 2:29 PM on March 28, 2012

I've had problems since forever trying to webgl working in chrome. Seems like it shouldn't be so hard...

WebGL heavily depends on the underlying OpenGL implementation of your video driver, hardware and OS.

Unlike Flash, there is no software rendering to fall back on. This is probably the right decision for the future, but means that us folks with older integrated and business centric video cards do not get a great experience.
posted by PissOnYourParade at 2:35 PM on March 28, 2012 [2 favorites]

Home now and some of them sort of work on my laptop. Laggy and jumpy and the CPU is pinned but better than nothing.
posted by octothorpe at 2:54 PM on March 28, 2012

Oh. My. Word.

The Quake 3 demo is truly impressive, and only requires a little extra (players, portal/pad physics, guns) to be a straight up business opportunity.
posted by jaduncan at 3:13 PM on March 28, 2012

(All running utterly silkily on an Nvidia card on Ubuntu).
posted by jaduncan at 3:22 PM on March 28, 2012

Can they turn the iPad3 into the next hot gaming platform with this tech? I might pick one up, because I noticed that the iPad3 is almost the exact same price as an LCD monitor alone with equivalent resolution (which pisses me off for no rational reason).
posted by BrotherCaine at 3:23 PM on March 28, 2012

I have an old, er ancient Thinkpad T30, I'm sure if tweaked settings to get these to run I might see a frame quite briefly before the blue screen of death or a reboot. Some older video chips just do not do well.
posted by sammyo at 4:00 PM on March 28, 2012

Can they turn the iPad3 into the next hot gaming platform with this tech?

In iOS WebGL is currently supported in iAds (Apple's ad platform for IOS devices) and will probably be fully supported in Safari before long. There's video of webGL running smoothly on a hacked iPad2 floating around so it should run well on the 3 too. WebGL aside the iPad is already a huge gaming platform but that's a subject for another thread.
posted by Blue Meanie at 4:12 PM on March 28, 2012

Mini Thane needs a hug!
posted by sendai sleep master at 4:48 PM on March 28, 2012 [1 favorite]

Thanks for posting this- I've been getting into WebGL in a big way, making 3 different visualization proofs-of-concepts using three.js (and GraphGL as well) to showcase:

• User locator in 3D space: Taking a nightly dump of LDAP- including office information and the binary field for thumbnail badge photo- and the floor plan PDFs (converted to png's, then used in Blender to help construct a rough 3D model of the various buildings for our company, for export into three.js), along with a web service to query/expose the historical LDAP information as node/adjacency json objects... you search on a user and see where in the building they are. You can also show their entire org tree and their locations as well, or just walk through the virtual building and have the badge photos showing up in the appropriate x/y/z of people's offices.
• Network graph visualization: I already have systems management I wrote to run things on remote machines easily; I use this to gather tcp connection information on each node locally, and then send UDP packet(s) to central servers to update their connections. This webservice then builds an in-memory linking, so that for a given IP, or IP:Port, or server, or farm, you can see the servers, their running processes, the connections between them, etc as a 3D graph of interconnections. This was partly for fun, and partly to prove it could be done- and as a way of troubleshooting the "Is my server misconfigured?" when you can see that one errant connection line out of group of nodes in a farm representing a likely mis-wiring in some properties file. At present, it collects the network TCP connection "snapshot" every two minutes, for about 2,000 machines, 80,000 processes, and about 700,000 connections.
• Workflow engine: I've written a custom workflow engine we dubbed "Hive", as a generic method to move towards a more continuous deployment/continuous delivery model. I'd been working with the clunky thejit.org to have some visualization of the workflows that were AJAX up-to-date, but am moving towards either three.js or GraphGL to display the "tasks", and the parent workflow orchestration (and since my workflow engine is intentionally simplistic, we can have workflows of workflows to define pipelines) in 3D space. I'd like to evolve this to the point where you can have a search bar, and see all matching workflows as 3D graph objects hovering in space.

These are in various states of success at present, and I'm still learning how to use three.js to its fullest, but this shit is UNBELIEVABLY COOL, and it blows people away to see our systems and software development so... viscerally.
posted by hincandenza at 5:24 PM on March 28, 2012 [2 favorites]

Excellent post.
posted by huckleberryhart at 6:25 PM on March 28, 2012

Apparently I need to upgrade the graphics driver on my iPad. Sigh...
posted by blue_beetle at 6:41 PM on March 28, 2012

WebGL is cool, but it's really little more than JavaScript bindings to openGL (like many other languages already have). Writing webGL in JavaScript does not really look much different than writing openGL in C, it just runs in a browser. This is neat because now you can run run openGL in a browser, but since the underlying technology is the same, 3D programming is still just as slow and difficult as it always was. This is why I sort of find the HTML5 canvas element more exciting - it doesn't do as much as webGL, but what it does do can be done with so much less effort.
posted by tylerkaraszewski at 6:49 PM on March 28, 2012

I’m personally most excited about the potential of WebGL for 2D graphics.
posted by migurski at 6:52 PM on March 28, 2012

The Quake 3 demo is truly impressive, and only requires a little extra (players, portal/pad physics, guns) to be a straight up business opportunity.

QuakeLive already exists, and is dedicated to sucking money out of people who -- like me -- think that Q3 was the pinnacle of deathmatch and -- unlike me -- think that id's cynical monetization of an 11-year-old game is worth supporting.
posted by stavrosthewonderchicken at 7:33 PM on March 28, 2012 [1 favorite]

I looked at the BioDigital Human thingy at home with my daughter, and we never got any further. Excellent FPP!
posted by Harald74 at 11:58 PM on March 28, 2012

The technology is awesome; but as a tool to learn anatomy, these are pretty incomplete. The Zygote Body one, maddeningly so--for example, the bones of the head, according to this app, include mandible and "skull exterior" and that's it (!?); and the sternum is undifferentiated into manubrium, sternal body, and xyphoid process. Not very useful for someone trying to learn bones. Biodigital human is better on bones, but still neglects some, including that pesky xyphoid process (and it mislabels the manubrium "maunubrium"), and the integumentary system only includes skin and hair! I can click on the model's nails and get shown the label for "skin". Some muscles are actually not only incomplete but incorrect; for example the sternocleidomastoid is shown a. not attaching to the clavicle at all but going under it, and b. without two clear heads.

I am hoping some folks who are passionate about anatomy work on these projects. These could be unbelievably excellent learning tools if they were done better. Right now, it's sort of like serving lukewarm gruel on fine china.
posted by parrot_person at 5:02 AM on March 29, 2012

A late breaking update to my original post. Yesterday I stated -

WebGL heavily depends on the underlying OpenGL implementation of your video driver, hardware and OS.

Unlike Flash, there is no software rendering to fall back on. This is probably the right decision for the future, but means that us folks with older integrated and business centric video cards do not get a great experience.

And today, what do I read on the Chromium blog -

WebGL enables compelling 3D content on the web, so we want to ensure that as many users as possible have access to this technology. That’s why we’ve enabled SwiftShader, a software rasterizer licensed from our friends at TransGaming, for users with older configurations. Keep in mind that a software-backed WebGL implementation is never going to perform as well as one running on a real GPU, but now more users will have access to basic 3D content on the web.

Sigh, guess that's the problem with technology that evolves so rapidly. Even if you swear you remember something, go back and find the source and check, yes indeed, you remembered correctly, you can still be wrong. (Or out of date in this case)
posted by PissOnYourParade at 6:07 AM on March 29, 2012

Just saw this: CSS3D Clouds and WebGL Clouds.
posted by Memo at 6:47 PM on March 29, 2012

The three.js samples are a good look into the future.

The GLSL Sandbox gallery is full of awesome stuff that can be done with only a single quad drawn with a fragment shader. Also, the code is editable in real time. A couple spheres, lots, water at sunset, and an apple are some samples.

WebGL Playground is the same sort of thing but without the single fragment shader limitation.
posted by Gary at 2:41 PM on April 9, 2012