3D on 2D HTML Canvas | Hacker News Reader

3D on 2D HTML Canvas

gyu.que.jp

95 pointsfortes38 comments

Open articleView on HN

With cloth animations too! (demo 1)

Quite impressive... does use up a fair bit of cpu and is still quite slow.... and doesn't work in IE7.

I think Flash still has many happy days ahead of it, but this is still rather cool.

For the record, it appears to be using a javascript version of Papervision, the fairly widespread 3D library for Flash.

FYI -- it's significantly faster in Chrome than FF3, work a look.

At least the third demo has better visual quality in FF3 than in Chrome though.

That's awesome, and a great demo of just how fast Chrome's V8 Javascript VM is! Wow.

thank to x86 native code generation, the very smart idea behind V8.

V8 has a lot of good ideas in it; compiling to native code is one of them but far from the only important one.

It's been a dream of mine (currently beyond my hacking capability) to build a really simple 3D CAD app using JS on an HTML canvas (optimized for Chrome, since V8 compiles JS down to bytecode). This, along with several other 3D Canvas implementations, are a good step forward.

DirectAnimation was an interesting technology, but Microsoft droped it for Silverlight.

Silverlight 3 will have 3D support with hardware acceleration. This is one area where i see Microsoft taking the lead on Adobe.

Macromedia (before the Adobe takeover) had hardware 3D support years ago with their Shockwave plugin, yet its install base never got close to Flash which is installed on the vast majority of browsers.

There have been countless other plugins that have tried and failed to get critical mass, but Flash is the only one that's made it. Adobe Reader and Java are the nearest competitors and the install base is much lower.

Why? Initially - download size. For several years (while most people were still on dial-up) the Flash plugin was kept under 200K. Macromedia deliberately kept the plugin as small as possible so that it wasn't a burden to install it. They did internal testing where they artificially increased the size of the plugin and there was an immediate drop in download numbers. At some point as the size increased, the numbers would drop dramatically and they'd know that was the limit they had to work to when adding new features. Upgrades and installation was always kept as easy as possible.

They then cemented the install base with video playback that didn't act like it was stapled onto the browser. Prior to Flash with video, all the web based video options were clunky and almost completely closed to customization. Until there is an open standard for video playback, supported across all browsers, I think Flash will remain ubiquitous.

I can't see Silverlight taking over. It's not cross platform for a start. 3D isn't enough reason for people to install it and, other than Microsoft, no self respecting web site wants to risk alienating users by forcing an install.

Disclosure - I used to work for Macromedia. So I'll freely admit some bias!

While silverlight fights flash and viceversa over 3d support, google has a fast js virtual machine already implemented and delivered. With it you can do 3d directly from js. I dont know why google dont push a bit more with this killer feature. Are they avoiding 'browser war II'?

> google has a fast js virtual machine already implemented and delivered. With it you can do 3d directly from js. I dont know why google dont push a bit more with this killer feature. Are they avoiding 'browser war II'?

Maybe they're waiting to implement Chrome in Linux first?

V8 isn't hardware accelerated, and probably won't ever be. That won't matter in every case, but there will always be situations in which V8 is not a valid substitute for Flash or Silverlight.

If V8 gets threading support and auto-vectorization, then if processors-graphics cards ala Intel's Larrabee take off, it may be a non-issue. Developers can just do a 3d engine in pure javascript and get roughly the same order of magnitude of performance as a GPU.

All true, but that's a lot of ifs.

Maybe take a lead in ability, but in an install base? I'm not sure. Even .NET has trouble with having a large enough install base (on Windows machines of course).

I meant in technical ability. Silverlight's install base is difficult to predict, although having a killer feature could help a lot. That said, i prefer open standards based solutions like Mozilla's Canvas 3D project.

Flash does have hardware acceleration (Direct and GPU)

This is very impressive indeed. My own efforts from a few years back (http://canonical.org/~kragen/sw/torus.html) are very primitive by comparison.

However, you can still see the effects of Canvas's stupid approach to rendering antialiased filled polygons.

I think this dude ported papervision from AS3 to javascript. Really awesome!.

Agreed. Very cool: http://gyu.que.jp/jscloth/parpevision.js

Even on my relatively beefy comp, though, the miku animation was enough to get my fan going full blast. Papervision otoh has the potential to build a real, high-quality, 3d game. I don't see JS getting there any time soon, but nevertheless an interesting proof of concept.

What are the problems you see, and why do you think they're hard to solve?

I don't see any "hard barriers" but a lot of soft issues that will take time to overcome. As of now, there isn't even a uniform event handling framework in JS. So, first, we'd need a good generic 3d framework. Next, we'd need a significant speedup in performance across the major browsers. If OpenGL is a model, there would probably have to be some graphics-specific optimizations made, which might be difficult to get everyone on board for. Third, I'd either need to buy a new computer or JS would need gpu access, because ATM this site brought my relatively face computer to a grinding halt... and I don't think I'm going to have money for a new comp for at least a year or two :).

You could tell people "download Firefox to use my spiffy 3D site" (or download Chrome or whatever) just like people now tell them "download Flash Viewer 9". Does Papervision in Flash take advantage of 3-D acceleration hardware? In those ways I'm not sure there's so much of a difference between JavaScript in browsers and ActionScript in Flash.

Graphics-specific optimizations are probably going to happen, if by that you mean "fixing Canvas so it isn't painfully slow".

slow as molasses but impressive all the same.

It BLAZES on Safari.

Hey you're right, I can't notice a difference in speed/responsiveness between Safari on OS X and Chrome on XP inside Parallels, whereas it's painfully slow on Firefox both on OS X and XP+Parallels.

Does this mean Firefox is slow because of its Canvas implementation, and not the Javascript?

Firefox has not enabled by default "tracemonkey" yet. If you get one of the beta or nightly builds it should be turned on.

But Safari doesn't have its own new, fast JS interpreter (Squirrelfish) yet either - I'm only using v3.2.1 (http://en.wikipedia.org/wiki/Safari_(web_browser)#Mac)

Interesting! Unfortunately I've borrowed my mac to someone so I can't see that right now...

Opera 9 seems to render this much faster than Firefox 3 on Linux, but it's still not nearly as fast as Chrome on Vista.

Just WOW. Miku (demo 2) is my fav.

Wow. How is that even possible? Is there a Javascript port of openGL in the works?

It's a bit slow on firefox 3, but on chrome it's very nice :)

Animated ads should be based on canvas or svg, not on flash or gifs.

I disagree. Flash might have some optimization on AVM, and some audio processing dark magic using tools like HaXe.

Flash is like GDI+ or Cairo for the Web. And it may extend to many other capabilities such as webcam, microphone, Argumented Reality, etc.

And RIA should get a nice authoring tool like Adobe Flash IDE or Flex.

Flash is not just graphics

Because...neither will work in IE, and this demo slows FF3 to a crawl? I do think this demo shows a lot of potential but several major issues keep these (IMO) superior formats from wide adoption. It has taken flash years to become ubiquitous, and there is still scant support for apng over gif. I honestly think that silverlight/moonlight will take off before, and possibly in lieu of, svg or canvas.

cool though. But still cheated. Like flash, there is no project transformation here. They use two affine transformation to cheat. Silverlight seems to be the only practical solution for 3d experience in browser.

Reply on news.ycombinator.com