7 ms·

3D on 2D HTML Canvas

95 points by fortes 18y ago

webjunkie01 18y ago
I think this dude ported papervision from AS3 to javascript. Really awesome!.
- deleted 18y ago
  [deleted]
- medearis 18y ago
  Agreed. Very cool: http://gyu.que.jp/jscloth/parpevision.js 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.
  - kragen 18y ago
    What are the problems you see, and why do you think they're hard to solve?
    - medearis 18y ago
      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 :).
      - kragen 18y ago
        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".
joubert 18y ago
Just WOW. Miku (demo 2) is my fav.
swombat 18y 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 18y ago
  FYI -- it's significantly faster in Chrome than FF3, work a look.
  - gdee 18y ago
    At least the third demo has better visual quality in FF3 than in Chrome though.
ph0rque 18y 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.
- est 18y ago
  DirectAnimation was an interesting technology, but Microsoft droped it for Silverlight.
  - felixmar 18y ago
    Silverlight 3 will have 3D support with hardware acceleration. This is one area where i see Microsoft taking the lead on Adobe.
    - MrRage 18y ago
      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).
      - felixmar 18y ago
        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.
    - raphar 18y ago
      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'?
      - 18y ago
jacquesm 18y ago
slow as molasses but impressive all the same.
- bryn 18y ago
  It BLAZES on Safari.
  - ahpeeyem 18y 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?
    - jdavid 18y ago
      Firefox has not enabled by default "tracemonkey" yet. If you get one of the beta or nightly builds it should be turned on.
      - ahpeeyem 18y ago
        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 http://en.wikipedia.org/wiki/Safari_(web_browser)#Mac)
  - jacquesm 18y ago
    Interesting! Unfortunately I've borrowed my mac to someone so I can't see that right now...
TweedHeads 18y ago
Animated ads should be based on canvas or svg, not on flash or gifs.
- flatline 18y 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.
- est 18y 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
ahpeeyem 18y ago
That's awesome, and a great demo of just how fast Chrome's V8 Javascript VM is! Wow.
- c00p3r 18y ago
  thank to x86 native code generation, the very smart idea behind V8.
  - kragen 18y 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 18y 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 18y ago
Wow. How is that even possible? Is there a Javascript port of openGL in the works?
arnorhs 18y ago
It's a bit slow on firefox 3, but on chrome it's very nice :)
tutwabee 18y 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.
kragen 18y ago
This is very impressive indeed. My own efforts from a few years back (http://canonical.org/~kragen/sw/torus.html 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.

95 points by fortes 18y ago

webjunkie01 18y ago

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

deleted 18y ago
[deleted]
medearis 18y ago
Agreed. Very cool: http://gyu.que.jp/jscloth/parpevision.js 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.
- kragen 18y ago
  What are the problems you see, and why do you think they're hard to solve?
  - medearis 18y ago
    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 :).
    - kragen 18y ago
      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".

joubert 18y ago

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

swombat 18y 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 18y ago
FYI -- it's significantly faster in Chrome than FF3, work a look.
- gdee 18y ago
  At least the third demo has better visual quality in FF3 than in Chrome though.

ph0rque 18y 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.

est 18y ago
DirectAnimation was an interesting technology, but Microsoft droped it for Silverlight.
- felixmar 18y ago
  Silverlight 3 will have 3D support with hardware acceleration. This is one area where i see Microsoft taking the lead on Adobe.
  - MrRage 18y ago
    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).
    - felixmar 18y ago
      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.
  - raphar 18y ago
    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'?
    - 18y ago

jacquesm 18y ago

slow as molasses but impressive all the same.

bryn 18y ago
It BLAZES on Safari.
- ahpeeyem 18y 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?
  - jdavid 18y ago
    Firefox has not enabled by default "tracemonkey" yet. If you get one of the beta or nightly builds it should be turned on.
    - ahpeeyem 18y ago
      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 http://en.wikipedia.org/wiki/Safari_(web_browser)#Mac)
- jacquesm 18y ago
  Interesting! Unfortunately I've borrowed my mac to someone so I can't see that right now...

TweedHeads 18y ago

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

flatline 18y 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.
est 18y 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

ahpeeyem 18y ago

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

c00p3r 18y ago
thank to x86 native code generation, the very smart idea behind V8.
- kragen 18y 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 18y 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 18y ago

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

arnorhs 18y ago

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

tutwabee 18y 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.

kragen 18y ago

This is very impressive indeed. My own efforts from a few years back (http://canonical.org/~kragen/sw/torus.html 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.