3D on 2D HTML Canvas

http://gyu.que.jp/jscloth/touch.html

by fortes • 17 years ago

95 38 17 years ago

gyu.que.jp

joubert• 17 years ago

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

swombat• 17 years ago

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.

fortes• 17 years ago

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

gdee• 17 years ago

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

ph0rque2• 17 years ago

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.

est2• 17 years ago

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

felixmar2• 17 years ago

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

jacquesm2• 17 years ago

slow as molasses but impressive all the same.

bryn• 17 years ago

It BLAZES on Safari.

ahpeeyem3• 17 years ago

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?

jacquesm2• 17 years ago

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

TweedHeads• 17 years ago

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

flatline• 17 years ago

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.

est2• 17 years ago

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

ahpeeyem3• 17 years ago

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

c00p3r• 17 years ago

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

kragen4• 17 years ago

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

liuliu• 17 years ago

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.

wallflower• 17 years ago

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

arnorhs• 17 years ago

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

webjunkie01• 17 years ago

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

medearis2• 17 years ago

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.

kragen4• 17 years ago

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

tutwabee• 17 years ago

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.

kragen4• 17 years ago

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.

3D on 2D HTML Canvas

Related Stories