Loading ...
Sorry, an error occurred while loading the content.

Re: [canvas-developers] Re: 3d canvas tutorial

Expand Messages
  • Matthew Westcott
    ... My Canvastastic library provides an API for doing low-poly 3D via the 2D canvas context, although it s a higher-level API than OpenGL:
    Message 1 of 5 , Feb 26 2:34 AM
    • 0 Attachment
      On 25 Feb 2007, at 04:23, lec_maj wrote:
      > I have not seen any tutorials, there is really no API yet for any of
      > this. Once we hear more about openGL ES like api then perhaps. I have
      > been trying to get in touch with folks at Mozilla developing this, but
      > no luck. For now everyone is on their own codding.
      My Canvastastic library provides an API for doing low-poly 3D via the
      2D canvas context, although it's a higher-level API than OpenGL:
      http://matt.west.co.tt/category/canvastastic

      Obviously, this is a very different beast to the native 3D support in
      Canvas which should be coming any month now...

      - Matt
    • Philip Taylor
      ... There s been some initial experimental code in the Mozilla tree for a while, at http://lxr.mozilla.org/mozilla/source/extensions/canvas3d/ - you have to
      Message 2 of 5 , Feb 26 5:36 AM
      • 0 Attachment
        On 26/02/07, Matthew Westcott <matthew@...> wrote:
        > On 25 Feb 2007, at 04:23, lec_maj wrote:
        > > I have not seen any tutorials, there is really no API yet for any of
        > > this. Once we hear more about openGL ES like api then perhaps. I have
        > > been trying to get in touch with folks at Mozilla developing this, but
        > > no luck. For now everyone is on their own codding.

        There's been some initial experimental code in the Mozilla tree for a
        while, at http://lxr.mozilla.org/mozilla/source/extensions/canvas3d/ -
        you have to compile it yourself but it does work for real (or it did
        when I last tried). I did a primitive example at
        http://canvex.lazyilluminati.com/3dmodel/example0.html [requires
        Firefox, since it uses E4X to load COLLADA models] which renders with
        Matt's Canvastastic by default but can also do fast textured models
        with the GLES extension.

        With a few modifications to the extension (particularly adding the
        copyTexImage2D function) it also did real-time reflections on animated
        bumpy water, which is quite nice. But it does take quite a bit of
        effort to write a rendering engine just with OpenGL - if/when this
        technology becomes usable on the web for real, I think it'd be
        necessary to have a fairly-standard high level library that people can
        program with, otherwise almost nobody will be able to write useful
        code with just the interface provided by the browser.

        (I expect it'd be fine to write that high level library in JavaScript
        using the browser's GL interface, which is nice since it gives
        ultimate control to the users if they want to modify the library or
        make a totally new one; the only real problem is that it takes a long
        time to load models (so an accelerated "download this file and load it
        as an array of floats" would be nice (and could be integrated with
        COLLADA easily), the same as how textures are already loaded as lumps
        of binary data), but otherwise performance doesn't seem to be a
        particular issue.)


        All the existing 3D-in-2D-canvas examples seem kind of unpleasantly
        hacky because of the limitations of the medium (affine transforms,
        linear gradients, etc) - there isn't a standard way to do things,
        because you have to make different tradeoffs depending on what you
        want to end up with (e.g. textureless true 3D vs textured raycasting),
        so there aren't really any guides to follow, and you just have to make
        it up as you go along :-)

        --
        Philip Taylor
        excors@...
      • Vladimir Vukicevic
        ... Hey, that s pretty awesome! That is, both your example and the fact that you were able to build the canvas3d extension :) Getting that out is sitting at
        Message 3 of 5 , Feb 28 9:36 PM
        • 0 Attachment
          Philip Taylor wrote:
          > On 26/02/07, Matthew Westcott <matthew@...> wrote:
          >> On 25 Feb 2007, at 04:23, lec_maj wrote:
          >>> I have not seen any tutorials, there is really no API yet for any of
          >>> this. Once we hear more about openGL ES like api then perhaps. I have
          >>> been trying to get in touch with folks at Mozilla developing this, but
          >>> no luck. For now everyone is on their own codding.
          >
          > There's been some initial experimental code in the Mozilla tree for a
          > while, at http://lxr.mozilla.org/mozilla/source/extensions/canvas3d/ -
          > you have to compile it yourself but it does work for real (or it did
          > when I last tried). I did a primitive example at
          > http://canvex.lazyilluminati.com/3dmodel/example0.html [requires
          > Firefox, since it uses E4X to load COLLADA models] which renders with
          > Matt's Canvastastic by default but can also do fast textured models
          > with the GLES extension.

          Hey, that's pretty awesome! That is, both your example and the fact
          that you were able to build the canvas3d extension :) Getting that out
          is sitting at around spot #3/#4 on my todo list.. unfortunately,
          something new that's more important has always come up in the past 4-5
          months. I suspect I'm going to have to go hide in the mountains for two
          weeks and get enough done to get an initial release out soon, in hopes
          of collecting enough feedback to be able to do a 1.0 in conjunction with
          Firefox 3 at the end of the year.

          The main issue blocking is an annoying linking one -- some of the
          symbols that the extension wants aren't exported in released builds, and
          I need to talk some sense into a few people until they agree with me
          that they should be. ;)

          > With a few modifications to the extension (particularly adding the
          > copyTexImage2D function) it also did real-time reflections on animated
          > bumpy water, which is quite nice. But it does take quite a bit of
          > effort to write a rendering engine just with OpenGL - if/when this
          > technology becomes usable on the web for real, I think it'd be
          > necessary to have a fairly-standard high level library that people can
          > program with, otherwise almost nobody will be able to write useful
          > code with just the interface provided by the browser.

          That's good to hear... I figure the final spec will be somewhere between
          OpenGL ES and full OpenGL; OpenGL ES was just a much cleaner starting
          point. And I agree with you -- this isn't going to be an API that you'd
          want to teach directly, but it is a flexible one on top of which more
          usable JS middleware packages can be written.

          > (I expect it'd be fine to write that high level library in JavaScript
          > using the browser's GL interface, which is nice since it gives
          > ultimate control to the users if they want to modify the library or
          > make a totally new one; the only real problem is that it takes a long
          > time to load models (so an accelerated "download this file and load it
          > as an array of floats" would be nice (and could be integrated with
          > COLLADA easily), the same as how textures are already loaded as lumps
          > of binary data), but otherwise performance doesn't seem to be a
          > particular issue.)

          Yep, I'd love to figure out what these performance pain points are, and
          then add native support for those. Some API for fast loading of data is
          pretty high on the list.

          - Vlad
        Your message has been successfully submitted and would be delivered to recipients shortly.