Papervision Ribbon3D

There’s been some great experimentation with 3d lines and ribbons in Papervision3D, notably Felix Turner’s Ribbon3D and of course the Audi A5 website.

A project I’m currently working on requires the drawing of ribbons in 3D space, and it’s such a simple yet beautiful effect that I thought it was time to have a quick go at it myself.

Looking at some of the available source code though, I felt that there was a slight lack of simplicity, but more importantly a clear API. This no doubt is due to the fact that the aforementioned experiments were just that, experiments, and therefore not built with usability in mind. None-the-less, I wanted a Ribbon3D class which shared a similar looking constructor to that of the native Papervision classes, and which could easily be used in projects and manipulated in the same intuitive manner as the other 3D objects in the Papervision library.

There are some unused methods which I have kept in the source code, as they can create some great effects with pseudo depth of field and colour, but were somewhat processor intensive for the sake of the demo.

As I mentioned, the API is simple and I hope makes sense. The constructor looks like that of any other DisplayObject3D; you pass in a material of your choice, the width of the ribbon and the length (how many segments can be added before the oldest is removed)

var ribbon:Ribbon3D = new Ribbon3D( material, width, length );
scene.addChild( ribbon );

One point of contention was how to make the ribbon grow. I wanted to be able to draw the ribbons using tweens, and so using a method such as addSegment or growTo seemed unnecessarily cumbersome as it would involve using a callback whenever the tween progresses. So too did using alternative members, such as tx, ty, tz etc, as again this would diverge from the standard DisplayObject3D API.

I eventually decided to override the getters and setters for the x, y and z properties, meaning that you can tween an instance of the Ribbon3D class as you would any other DisplayObject3D (including bezier tweens as in the example above) and it will grow to follow the tween. I was hesitant to implement this, as it means that moving or shifting the ribbon as a whole cannot be done in the normal way, however I concluded that the normal use of such a class would be to create trails or patterns, and so moving the whole ribbon around would rarely be required. That said, I have included a moveTo(x,y,z) method if this needs to be done.

So making an instance of Ribbon3D grow is as simple as:

TweenEngine.tween( ribbon, 2, { x:100, y:100, z:100, bezierThrough:yourBezier } );

Because the x, y and z properties can be set separately, you have to call the draw method manually, from within the Timer or EnterFrame event you are using to render your Papervision viewport, for example:

private function render3D ( e:Event ):void
{

	// Tell the Ribbon3D to update it's mesh
	ribbon.draw();
	// Render the Papervision scene
	renderer.renderScene ( scene, camera, viewport );
}

I have also left the material property open, so instead of passing in a colour and therefore having to use a ColorMaterial, you can use any of the wonderful Papervision materials, such as the FlatShadeMaterial, which I’ve used in the demo to give the ribbons a bit of extra depth.

I’m looking forward to playing with physics and collision detection in Papervision, as a swarm of boids with ribbon trails that don’t intersect (you can see the clipping sometimes in the demo) would be good to see. I’m slowly building a library of 2D steering behaviours so when and if I get round to learning the math required to port them to 3D I’ll have a stab at it and post the results.

Download: Ribbon3D Class Download: Ribbon3D Demo

Note: I have included the build of Papervision3D GreatWhite (rev 682-14.2.08) that I used, as the SVN repository is being updated frequently and may temporarily have adverse effects on the demo. Not included in the zip is the tweening engine I used, TweenMax, which you can read about and download here.

Posted on 12 Aug 2008
45 Comments
15 Trackbacks

Meta

3D Ribbons in Papervision was posted on August 12th 2008 in the category Code / Actionscript 3.0, Flash, Open Source and tagged; , , , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 410 Gone in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

57 Responses to 3D Ribbons in Papervision

1 3 4 5

Leave a Reply

Pingbacks / Trackbacks

  1. 8 years ago Recent URLs tagged Boids - Urlrecorder

    [...] Recent public urls tagged “boids” → 3D Ribbons in Papervision [...]

  2. 7 years ago Pv3d News #1 - Nohama napevno v oblacich | Feet firmly on the cloud

    [...] Zajímavý zdroj informací a novinek blog Exeje z Ruska zveřejnil bezier křivku i s detekcí nárazu. Dokážu si představit využití v jednoduchých 3D hrách prolnuté s třídou 3D Ribbons..  [...]

  3. 7 years ago Top Gossips » Blog Archive » Free Flash Menus & Animations From SoulWire

    [...] 3D Ribbons In Papervision [...]

  4. 7 years ago FLARToolKit demo “Rasengan” from NARUTO « flash.tarotaro.org.blog

    [...] is my new FLARToolKit demo, Rasengan from NARUTO . This demo uses Ribbon3D very exciting [...]

  5. 7 years ago AS3 Dynamic Generative Music Visualisations on Bandcamp

    [...] 3D Ribbons in Papervision 7% similar Ribbon3D class for 3d lines and ribbons in PV3D [...]

  6. 7 years ago onebyoneblog » JG Ballard in Augmented Reality

    [...] rotate the image of Ballard using your arrow keys. The little animated ribbon things are courtesy Soulwire. [...]

  7. 7 years ago 3D Ribbons in Papervision | Papervision Tutorials

    [...] reading this tutorial you will be able to create colorful 3D ribbons. You can download the complete class and source code [...]

  8. 7 years ago 有米啦 » Blog Archive » Papervision 3D 教程收集

    [...] 3D Ribbons in Papervision [...]

  9. 7 years ago 3D, ribbons, vertices, uv coordinates | Rozengain.com - Creative Technology Blog

    [...] was using the Ribbon3D class which is based on Papervision3D. Instead of using a color material he wanted to use a bitmap [...]

  10. 6 years ago 3D Ribbon class for Flash Player 10 « Matt Eley | Labs

    [...] demo was my attempt at creating a version of Soulwire’s Papervision3D Ribbon class using native Flash Player 10 code, and while the demo doesn’t support the more advanced [...]

  11. 6 years ago i-create | therefore-i am » Blog Archive » Kuler-Splash with Flex

    [...] have modified this Ribbon Class form Papervision3d to accept kuler colors. Papervision3d Ribbon Class. Notice how I am using local connection to [...]

  12. 6 years ago Away3D Ribbons | silverbase.net

    [...] Here is my Away3D version of flying ribbons. The code is based on PaperVision3D version of 3D ribbons by Justin Windle [...]

  13. 5 years ago Away3D Ribbons | shiftArray()

    [...] Here is my Away3D version of flying ribbons. The code is based on PaperVision3D version of 3D ribbons by Justin Windle [...]

  1. Izaias 6 years ago

    Hey Justin,

    First of all, thanks and congrats for all this great stuff!

    I’ve decided to take sometime to play around with your Ribbon class, which is really nice, and I’m trying to make it work on a transparent background, but I can’t figure out why it just doesn’t work properly if I comment the background.draw() code piece and take the layer out. Could you give me a clue please? I’ve uploaded my testing file to http://www.izaias.com/download/Ribbon3dDemo.zip. It’s not that clean but it’s hopefully understandable.

    Much appreciated.

    Reply to this comment

  2. Izaias 6 years ago

    Hey Justin, nevermind. I’ve got it.

    Reply to this comment

  3. Zeta 6 years ago

    I am working on a version of your script that allow the ribbons to follow a defined path, and to do so I need to understand your code. There is a thing that I cannot understand in this code, starting at line 174 in Ribbon3dDemo.as

    [code]
    for (var i:int = 0; i < d * .6 << 0; i++)
    b.push( {
    x:random( -UNIVERSE, UNIVERSE ),
    y:random( -UNIVERSE, UNIVERSE ),
    z:random( -UNIVERSE, UNIVERSE )
    } );

    [/code]

    I have some truble trying to understand that bitwise shift operator, since I know that the second parameter of that operator state the number of position of the shift, but you use 0, so I cannot understand. Perhaps it is something related to the 0-based system, so that is a 1 position shifting?

    Anyway thank you for sharing!

    Reply to this comment

    1. Soulwire 6 years ago

      Hi Zeta.

      The 0 bitwise shift simple floors the number, so it is the same as Math.floor() but faster to compute. You could also cast the number to an integer, which is also fast:

      for (var i:int = 0; i < int( d * .6); i++)

      However looking at this code now, it is foolish to evaluate this expression at every iteration, so perhaps you should use:

      var n : int = d * .6;
      for (var i:int = 0; i < n; i++)
      [...]
      

  4. fred 6 years ago

    what have i forgot? i import the classes, then this is my code:

    var material:FlatShadeMaterial = new FlatShadeMaterial( light, 0x98014E, 0×333333);
    material.doubleSided = true;

    var light:PointLight3D = new PointLight3D();
    scene.addChild( light );

    var ribbon:Ribbon3D = new Ribbon3D( pretoMaterial, 500, 100 );
    container.addChild( ribbon );
    ribbon.draw();

    scene.addChild(container);

    then i render this, but nothing happens.
    what i forgot to do?

    Reply to this comment

    1. Soulwire 6 years ago

      Are you remembering to call

      ribbon.draw();

      before every render cycle?

  5. 3d scanning 6 years ago

    I really like the colours you have used with your 3d ribbons

    Reply to this comment