Seb Lee-Delisle

UPDATE – HTML 5 Canvas version now online

During my session at the Flash Gaming Summit, I showed a very simple 3D particle renderer to attempt to demystify the process of converting 3D into 2D.

The actual code that converts from 3D to 2D is easy! First you have to figure out how much you have to resize things depending on how far away they are. (ie what their z position is).

newscale = f/(f+z);

Where f is a notional field of view. Changing this will change how wide the (virtual) camera is. A good starting point would be 250. Then you multiply the 3D x and y positions by the newscale to get their 2D x and y positions.

x2d = x3d * newscale; 
y2d = y3d * newscale;

So that’s where we put our particle, in this case represented by a MovieClip that we also need to resize by our new scale :

clip.scaleX = clip.scaleY = newscale;

And then the final thing we need to do is sort by the z position so that particles in front appear above particles in the background.

particles.sortOn("z", Array.DESCENDING | Array.NUMERIC); 
for(var i:int = 0; i< particles.length;i++)
{
	particle = particles[i];
	particleClip.setChildIndex(particle.clip, i); 
}

There’s some other stuff in there too, to create the depth of field blur and also the bitmap trails, but have a look and see what you can do with it.

Download the source code for simple 3D engine.

* I haven’t actually counted the number of lines. I’m guessing it’s about 10.

I’ve just finished my Brighton training courses which were seriously good fun, and everyone seemed to enjoy themselves, I’ve certainly got excellent feedback so far!

My next training course is short notice; it’ll be a Papervision course in San Francisco on the 9th March particularly aimed at 3D games. It’ll coincide with the Flash games summit so if you’re interested, let me know and I’ll make sure to get in touch with more information as I have it.

Then it’s on to Cologne for FFK in April, where I’m running both a Papervision3D course and a Flash games training course! More info on the FFK website.

And back to NYC for Flash and the City in May, and I’ll be running courses around the conference. Again, mail me if you’re interested and I’ll send you the details as they are announced.

And finally in FlashBelt in June, I’ll be teaching a one day Flash games workshop. Teaching you maths by stealth – who knew that you could learn trigonometry from Asteroids and vector maths from platform games? It’s a fantastic conference and I’m really looking forward to coming back for my fourth year in a row!

Can’t make any of these events? Then help me organise one near you! Mail me.

Back in my home town Brighton and my favourite venue the Lighthouse, I’m running another 2 day Papervision workshop on the 1st and 2nd February 2010.

As ever, I’ll be covering everything you need to know to get started with Papervision and then on to the cool stuff, games, skyboxes, augmented reality, interactivity and much, much more!

And looking at case studies, including BAFTA award winning* Big and Small!

There are limited early bird places at £249 and also 4 student places at £99, but please book early as space is very limited.

Click for more details and to book Papervision3D training in Brighton.

* well how could I resist that particular prefix?

UPDATE : Now you can learn everything I know about programming Flash games! More information.

I’m most passionate about hiding complexity with simple APIs, which is one of the reasons I’m so excited about Hype.

A few weeks ago Peter Elst told me that he was trying to find a simple way to draw 3D shapes, and so I helped him with a bit of code. He’d done some great work, and it really inspired me to continue to simplify things even more.

So I spent a couple of hours putting together an experiment to see whether I could build a simple 3D drawing API for Flash that works more or less exactly like the 2D Flash drawing API.

I’m not sure whether this was the right approach but I thought it would be a fun experiment nonetheless and a great way to canvas opinion and get some feedback and ideas!

So here it is FlashDraw3D. The first thing you do is create a Graphics3D object:

var g3d : Graphics3D = new Graphics3D(this);

As you can see you pass it through a reference to the DisplayObject that you want to draw into. Once you’ve made it you can then draw into it :

g3d.lineStyle(1, 0xff0000, 1); 
g3d.moveTo(-10, 0, -10);
g3d.lineTo(10, 10, 10);

With of course the same syntax as the 2D drawing API except with 3 (x, y, z) coordinates instead of 2 (x, y).

And just like the flash drawing API has a drawRect, we have a drawCube :

g3d.drawCube(0, 0, 0, 100, 100, 100);

I’ve also added a couple of extras :

g3d.rotateY();

Just to show that it’s 3D . I really should have added rotateX and rotateZ but hey I only did it in a couple of hours. I’ll add it soon I promise.

And also some handy 2D to 3D converting commands :

g3d.moveTo2D(mouseX, mouseY, 0);
g3d.lineTo2D(mouseX, mouseY, 0);

Where you can pass through 2D screen co-ordinates that are converted to a 3D position at the z depth you gave it. In the example that comes in the code base this is used to draw in 3D with the mouse.

Please note : it’s very much a rough prototype and it’s absolutely not optimised at all! It’s incomplete and poorly documented. I’m just putting it out there to see what you think.

Download the code at http://code.google.com/p/flashdraw3d/source/checkout and give it a try! I’d love to hear any suggestions you have. (Polite ones anyway )

Here’s the code for the above example :
(more…)

You’ve probably seen the official announcement on the Papervision3D blog already but I just wanted to summarise here and give my take on the situation.

Of course, Ralph has left, and i’ll miss him. But smart people like him need constant new challenges and I have no doubt that he will move on to bigger and better things! And I seem to be seeing him just as much as before!

Papervision3D 3.0
So we’re moving on with PV3.0, which will be our Flash Player 10 optimised version, rebuilt from scratch. Tim’s already making great headway with some of the core code such as how we handle rotations (with quaternions at the heart of every DO3D) and even some niceness with frustum clipping.

Openness
I think we’ve been guilty in the past of a lack of transparency in our process. When we all work hard for a living, it can be hard to make sure that we keep the community updated with what’s going on.

So we’ve decided this time to make the source code for 3.0 available on github as we’re working on it. If you have something to contribute, you can fork the code and have a go. If we like it, we’ll add it in!

New team members
Which brings us to the fact that we want new team members. If you do cool work with the code base we’ll most likely ask you to join us. Already we’ve enlisted Ben Hopkins who caught our attention with some crazy PixelBender experiments. Perhaps you could too?

Backwards compatibility
There are many things that need to be changed in the new version, so we’ve made a rule. That rule is that we’ll keep the API the same as PV2.0 unless there’s a very good reason to change it.

One of the more notable changes is that the axis system has changed, the z-axis now comes out of the screen rather than going into it. This is to bring PV3D in line with pretty much all the other serious 3D engines, and it should also make it easier to port code from OpenGL.

Papervision2.1 support
We realise there are some issues still to resolve in 2.1 and I for one, am going to continue using this branch for some time. So although there is a lot of energy and excitement around PV3, it doesn’t mean we’ve forgotten about the older code base.

I’m really really excited about these changes, and the renewed sense of energy that it brings. I believe the Papervision team members are among the best Flash programmers in the world, and it’s such a privilege to be a part of it.

Did I mention it before? I think I mentioned it

I really do hate to ask, but if you like Big and Small, please take the time to vote for us in the Adobe Max awards.

Just in case you missed it, there’s a 3 page article in this month’s .net magazine all about how we made Big and Small.

I’m so pleased that we’re starting to get some recognition for this site : we’ve just earned our very first FWA Site of the day award, and we’re also a finalist in the Adobe MAX awards!

And we’ve just won another project for BBC, and we went to Pinewood studios yesterday to check out the set. This will also be an immersive Papervision3D project, but we’re not allowed to talk about it yet.

You probably realise I’m a bit of a space nut. Could it be the cheesy pictures of me in mission control at the Johnson Space Center?

Or the fact that I dropped everything to see Buzz Aldrin speaking in London a couple of weeks ago?

Or perhaps the fact that my most prized possession is a commemorative edition of The Times from the Apollo 11 landings (and I believe the first ever edition printed in colour)?

Well whatever gave it away, I don’t care. I’m coming clean. I am mental about space. And I always have been. Ever since watching the first ever shuttle launch in the classroom when I was 9, right through to watching night after night to see the most recent shuttle launch.

And I get frustrated when my friends don’t share my excitement and wonder at the possibility of leaving the Earth. Not to mention the odd one or two people I encounter who still actually believe that we didn’t go to the moon! WTF!

The Apollo missions were an incredible achievement, I recently heard that there’s 10 times more computing power and 100 times more RAM in the chip on my credit card than there was in the Lunar Module! I have no idea if that’s true or not, but still, it’s pretty cool, right? Right?

And now it’s been 40 years since we landed on the moon, and I haven’t quite achieved my childhood ambition of becoming an astronaut. But instead, I’ve done what I can to excite people about the Apollo missions. I’ve rebuilt the 3D lunar lander from the 5K app competition into a special Apollo 11 commemorative edition!

Now with levels, one for each Apollo mission! With crew listings!

And actual quotes from each mission!

I have some more plans to make it a little slicker, and would like to add a high score table, but I had a bit of a tight deadline. Tomorrow at 8.17pm UTC. Exactly 40 years since Buzz and Neil landed.

So perhaps, as you’re enjoying the memories, you can now experience what it was like for Armstrong and Aldrin for yourself*. Play MoonLander3D here.

*Any similarities between this game and what it was actually like in the Lunar Module, are entirely coincidental.

I’m very pleased to be running a Papervision workshop at Flash on the Beach this year! What better excuse to come to my home town and learn everything you need to know about getting up and running with Flash3D!?

I’ll also be showing you how to use FLARToolkit, RenderLayers, and loads more. I may even share a few little tips and tricks from the epic Big and Small project! Read a full description of the Papervision3D training course at Flash on the Beach.

And I look forward to welcoming you to Brighton!

You may have noticed that I’ve been a little quieter than usual over the past few months. And for that, I’m sorry. But there’s a very good reason for that! Me and the my very talented colleagues at Plug-in Media have been hugely busy working on the biggest and most ambitious Papervision3D project we’ve ever attempted; Big and Small.

Big and Small from Plug-in Media on Vimeo.

Big and Small is a comedy TV show for kids (3 to 6) about a big character (called Big) and a small character (called Small) who, despite their differences, are the very best of friends.

There are so many details that I want to share, I’m not sure where to start! There’s the close collaboration with the BBC and Kindle (the TV show’s production company). And then there’s the studio sessions with Lenny Henry (famous UK comedian) who provided the voices, and the recording of Dom’s (Plug-in’s creative director) band for the music game. Not to mention all the incredible artists, coders and producers at Plug-in who all did an amazing job of bringing it all together.

But as the head geek at Plug-in I’ll concentrate on the technology.

The first hurdle was to recreate the Big and Small house in Papervision3D; tricky, given the cluttered, busy and warm look that Dom came up with (our creative director). We spent about a month just getting the model for the living room to look right.

Many things in the living room are point sprites; a 2D image of an object that looks the same no matter which way you look at it (like the flowers). We built our own PointSprite object that uses Papervision particles to render this.

Big looks 3D and changes as you move the camera around, but he’s also a 2D point sprite. Our animator Ben rendered him on the timeline spinning around, so we work out the angle of the camera and jump to the relevant frame.

We really wanted to make sure that any 2D graphics seamlessly fit in with the 3D world, not only stylistically but also technically. We created custom 3D mesh animation to make the bed spring up and down in reaction to a 2D Small jumping up and down.

There are many clever effects that took ages to program, and although you wouldn’t necessarily notice them, we like to think they add a certain quality to the project :

The mobile in the bedroom with a custom built verlet physics system:

A custom mesh animation system for the radio in the living room, allowing our designers to animate in 2D and apply it to a 3D mesh in real time.

The mirror in the bathroom with realtime reflections.

The toothpaste particles that collide with the walls and furniture.

The lighting that changes in the bedroom when the blind is closed.

It was a massive project, and phase one alone was over 200 days of coding, not to mention the artwork, 3D modelling, sound design and music.

And brilliantly, the BBC were so pleased that they’ve also commissioned phase 2 and we’re well underway with it. Phase 1 brought you into the house, but phase 2 takes you out into the garden, with magical plants, a reflective pond, and a Doom-style mysterious woods to explore!

You can see a little more in this (very rough cut) of a behind the scenes video, exploring the less geeky aspects of the project, including collaboration, concepting, and user testing.

Making of Big and Small Rough cut from Plug-in Media on Vimeo.

It’s been a brilliant experience, Rebecca at the BBC has been a joy to work with, and it’s been really exciting to stretch what is possible in Flash and Papervision3D. I’ll let you know when phase 2 is released.

Try out the site for yourself here.

And I really would like to give major kudos to everyone on the Plug-in team that worked on this, I’m very proud to work with such talented people :

Juliet Tzabar : Production Director
Dominic Minns : Creative Director
Alan Owen : Senior programmer
Jack Lang : Programmer
Sarah Bird : 3D Modeller
Ben Mantle : Artist / Animator
Cath Lloyd : Animator (lip synching)
Lee Needham-Park : Project Manager
Kate Fowler : Sound design / production assistant
Kirsty, Ellie, Bruce (and Dom!) : Musicians

(Well done guys, you all rock!) And this project will be finished in a few weeks so we’ll be open for more projects! Can you use some Plug-in magic for your project? Need some Papervision3D expertise? Drop me a mail. seb@pluginmedia.net.

PS There’s an easter egg somewhere in the Big and Small website… can you find it?