Friday, May 30, 2008

Involuntary language change in FlashDevelop

This is more of a reminder for myself, but can be useful if you're a non-english developer who uses FlashDevelop :)

Due to some networking updates, I had to update my FlexSdk3 to the nightly build.
After installing however, the compiler errormessages I got in FlashDevelop suddenly where partially Dutch instead of English.

It was quite a horrible combination and so I needed to change it back to English badly, but unfortunately could find no documentation about it.

After asking on Adobe forums the answer was provided:

Change the jvm.config file and alter the line java.args line to this:


java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.country=US

Thursday, May 22, 2008

3 x 3 ledcube simulator

A friend of mine is making a 3x3 ledcube (see video) and asked me to write a little routine to do a snake in a 3x3x3 matrix.

I came up with a quick 'n dirty random snake routine, which is kinda like the routine I used for my 3d cube demo

To see what it looks like, I've also thrown together a little 3x3 led emulator :)
3x3 ledcube snake

And you can check out the source if you want (nothing fancy) here

Friday, May 2, 2008

Render to Texture, or Texture baking in 3dStudio max for Papervision3d

Here's a small tutorial on how to Bake a texture in 3d studio Max (2009) for use with papervision3d.

Show the result

First off, let me state that I am not particularly skilled in 3dMax, I'm more of a lightwave person myself, but since Lightwave cannot produce content I can use in Papervision, 3dMax it is :)

This tutorial shows you how to do Texture baking very basically. It doesn't go into Mental Ray or Vray. It's just to show you how its done, so you can use it as a starting point for more detailed experimentation :)

I'll sum up the steps I do to make objects, light them and render them to texture. I've tried to use Mental ray and Vray too, but today for some reason 3dMax only wishes to spit out completely white texture maps, while it displays them correctly in the render preview window.

We'll be exporting our scene as a .3ds file, because I've tried using Collada export (using http://www.feelingsoftware.com/ 's Collada exported. But as soon as I started baking textures, my scenes won't render correctly.


Step 1 - make your model

I've created 3 boxes and an omni light. In this Tutorial I haven't given them a material, this will be automatically done when we're baking the texture. You can do this manually as well if you wish.

Step 2 - Set the filetype to PNG
You can skip this step if your 3dMax already renders to PNG, or if you like using .TGA's and arent using Papervision3d :)

In my setup, 3dMax automatically renders all files as Targa (.tga), but I want to use PNG's which Papervision can read so we need to change this.

I use the following method.
1 - select only 1 object in the scene.
2 - open the "Render to Texture" dialog (press 0)
3 - under "Output" Delete any entries if present.
4 - ADD a "Diffuse map"
5 - click on the dots-button to the right of "File name and Type"
6 - Select a filename, and select PNG as a filetype.
7 - After the file dialog is closed, you'll see that the file extension is .png now.
8 - Delete the output entry again, 3dMax will now save .png's as default when you create new Output maps.

In my case, 3dMax only goes back to saving .tga's after the program has quit/crashed and has been restarted. So If you clear your scene, and render to texture again, the output should still be .png and you can skil this step.

If there's a setting somewhere where you can change this in 3dMax, please let me know :)

Step 3 - Render to Texture dialog

Select all your objects on stage and press the 0 key, or use the menu "Rendering - Render to Texture" to bring up the "Render to texture" Dialog.
Here you can select where your textures will be saved.
Because you selected all your objects, they should all appear in the "Objects to bake" tab. If the list is empty, you apparantly havent selected any objects.


Make sure "Use Automatic unwrap" is selected. You can also use manually created UV-mappings if you wish (Make sure to set it to the correct channel if you do), but this example has no UVmapping yet, so we'll leave this to Automatic.


Step 4 - Selecting which type of map
Make sure "All selected" is checked, because we want to make a map for every object in the scene.
Click on the ADD button, and select "Diffuse map"

Since we'll be exporting to .3ds, you need to know that 3dMax automatically renames texture filenames to a 8.3 filename type. So that means 8 characters for the filename, 3 for the extention.
This is a problem, because our baked textures arent limited to that specification and will happily render out to filenames that won't fit in this scheme.
Result : Your 3ds file will want to open box01Dif.png while your texture was rendered to box01DiffuseMap.png.

To fix this we do the following :
1 - Make sure your object names are smaller than 8 characters.
2 - In the "Selected Element Common Settings"-tab, clear the "DiffuseMap" from the 'Name' inputbox.



So your window should look like this:


Select the map size you want, we'll use 256x256 in this tutorial.

Step 5 - preparing the render
Select "Output into Source" and "Keep Source Materials"

This will replace the material of your objects when you bake the textures. We need this because we'll be exporting this scene, with the baked materials for Papervision.

Also select "Lighting" and "Shadows" in the "Selected Elements Unique setting" tab.
This will enable the texture to be rendered with, you guessed it, shadows and lighting :)




Step 6 - Render the texture
This is the easiest step.
Click on "Render" and wait for 3dMax to finish.


Step 7 - Export to a .3ds file.

All done in 3dMax, if you take a look at your Materials editor, you can see that the materials now contain texturemaps with lighting and shadows.
If you dont see your materials, select an object in your scene and click on the eyedropper button to get the material from the object.




Finished.
You can now load your .3ds file into your Papervision flash, make sure it knows where to find the texture images, and it should work.

I've included a small example, made with FlashDevelop.
Click here to download it


I've found an error/missing feature in the 3dsParser in papervision. Apparantly a "LOAD_COMPLETE" event was missing from the 3dsParser, so I've added that.

To do this, edit org.papervision3d.objects.parsers.Max3DS.as

and change the OnFileLoadComplete function to :

private function onFileLoadComplete(event:Event=null):void
{
var loader:URLLoader = event.target as URLLoader;

parse(ByteArray(loader.data));
// added by whizzkid
var fileEvent:FileLoadEvent = new FileLoadEvent( FileLoadEvent.LOAD_COMPLETE, filename );
this.dispatchEvent( fileEvent );

}


And if you're not using FlashDevelop, manually add the following import as well:


import org.papervision3d.events.FileLoadEvent;



I've included this file in my example.



This is my first tutorial ever, so please let me know what you think about it, and if you find an error or have any suggestions, leave a message :)

Regards,
Martijn

Thursday, April 3, 2008

Texturemapping in Silverlight 2beta1

Click here if you want to see the example and skip my development log :)

A while ago I was asked the following: "Can you make a 360 degree panorama viewer in Silverlight?"
Naively I answered: "I think so, I have the sourcecode for a texturemap routine in Flash, and that should be reusable in Silverlight"

Sounded easy enough, but unfortunately I was wrong.

My colleague Rob Houweling helped me get started in Silverlight and helped me out when I got Stuck in C# and I set off to work in Silverlight 1.1a

Now Flash does not support texturemapping, but you can fake this with some clever routines. Seb Lee-Delisle explains how this works visually

I have Flash sourcecode that does just that. This code unfortunately uses 2 matrix calculations, Matrix.invert and a concatenate function which simply arent supported in Silverlight.
(Hmm, I also just discovered that there's a newer version of this class which does not use these calculations, and could have saved me a lot of work.. ahwell, live and learn.. Anyway, it still uses 2 matrices though)

After porting the code and adding my own invert functions, I discovered that the matrix transformations in Silverlight had a big bug. When using the exact same matrix that Flash uses, Silverlight didn't draw the transformation correctly, It seemed that matrix accuracy was completely incorrect. Using Javascript and silverlight, you apparantly don't have this problem. See Kit3d. But Javascript is a lot slower than c# so that was not an option.


Did you ever notice that several people started working on 3d engines in c#, got as far as flat-shading and then development halted? I think this is because of this lame Matrix-problem..:)


Anyway, we decided to wait 2 weeks until the release of Silverlight 2.0.
Now the matrix worked properly and I continued work on the texture mapper.
Unfortunately I couldn't get the function to work with 2 matrices. All the output was simply wrong. So I decided to try again and see if I could write the same code with only 1 matrix (inverting + concatenating 2 matrices also results in 1 matrix, so this should work)

I found some code that did exactly that, but the code was next to unreadable and had a weird coordinate space that was unusable for me so I simplified the heck out of it and modified it to suit my needs.
That worked!

I now had the correct output.

I could split up my texture in triangles, and plot them back to the screen, as long as I didn't rotate anything.
Which is not quite right.

This had to do with the way Silverlight draws out transformed bitmaps, it uses the topmost and leftmost pixel coordinate to start. Flash uses the first pixel you draw in your shape.

Luckily this was solveable by checking for this location and changing the texture's offset.

After this was done, creating a panorama viewer (a 3d cube with an observer in the middle) was quite easy.


Online Example
So Ladies and Gentlemen, without further ado I now present:

The (to our knowledge) first 3d texturemapper in Silverlight using C#

Panorama viewer in Silverlight 2.0

You need Silverlight 2beta1 get it here

I've also put up the sourcecode here.
(Mind you, the code is quite messy and not optimised.)

Please let me know what you think.

And to all 3d-engine coders out there, go on, add texturemapping!
(and fix my code, because its probably crap ;)


One problem still remains as you can see in the panorama viewer. Silverlight insists on anti-aliasing. This Cannot be switched off. So we're stuck with ugly white-ish lines around every triangle we draw.

I've tried fixing this by making the triangles overlap slightly, but havent pulled it off quite right, it distorts the rendered image, so I gave up that attempt.

Microsoft, please fix this, it's annoying.


Regards,

Martijn

Monday, February 25, 2008

3d Cube Space

Here's my second Papervision3d routine.

This is actually the first time since school that I used linked lists. wow.
My first attempt had a garbage collection problem, in that it didn't garbage collect, so the memory usage just kept growing, eventhough Flashplayer should've kept it in check. Gotta dive deeper into that, cuz this stuff is fun :)

I've solved it by recycling the objects in my list, works fine and is probably not as memory-fragmenting as the 'correct way'...

It's probably been done before, you know, snake, but now in 3d- whee... But it has not yet been done by me, unil now. :P

Click to view

Oh yeah, I've made this using FlashDevelop, and I like it, so I'm gonna use it more in the future :)

Let me know what you think

Thursday, February 21, 2008

Papervision test

For some reason I'm really crap at finding documentation about stuff online.

So it took me a while to download Papervision3d, and get started, but as soon as I got the sources installed I was ready to go to mess around a bit, and finally make this little test.

Simple papervision scene navigation

You can navigate around the scene using the cursor keys, press shift and left-right for strafing, and if you press space you go up :)

Unfortunately, after I made this, I found out that the source I downloaded from the papervision site was the OLD version of papervision. V1.5 or something, while 2alpha was already out. But for some reason, not available on the papervision site itself.

Or.. i was just looking in the wrong spot?

Anyway, I had to download the new version from Ralph's blog

Haven't been able to mess with it yet though, hopefully soon :)

I've setup FlashDevelop at home now, which looks promising, but haven't gotten round to using it yet.

Thursday, February 7, 2008

int bug

I found a little bug in actionscript 2, which apparantly has been fixed in actionscript 3 but which I found funny enough to show you guys.

Trying to fix a bug in an older source, where I took part of a symbolname "Button037", and cut out the 035 part as a substring, which I then used to flip to some page in a pageflipper component.
After the pageflipper bugged out (trying to add 5 to "037" which ended up with "0375" instead of 37 ..duh, I know) I put an int() around the value I got from the symbol name.
(Never having looked at the manual entry for int() but beeing used to its function from ASP/vbscript, I didn't know it was deprecated and I should use Math.floor() instead ...lesson learned :)

Anywho.

Whats the bug you ask?
Well.. If you use int() to convert a string to a number, it doesn't always work correctly in actionscript 2.0 if you have leading zero's.

trace(int("037")); returns 31 for example
I plotted the values out in a graph to see if there was some kind of pattern to it, and there was. Click here to see it

Sourcecode for that is:

_root.lineStyle(1,0x000000);
for (intT=0; intT<400; intT++)
{
trace(intT + " : " + int("0" + intT));
_root.moveTo(intT,0);
_root.lineTo(intT, int("0" + intT));
}

Anyway.. it's fixed in actionscript 3, and you shouldn't use int() anyway, but hey, it might come in handy to know this if you're still using int() in your code, and it doesnt work the way it should :)

Edit : My Collegue Hugo asked if Number() had the same bug. Apparantly it does, BUT. its not what I thought it was.

When you use Number() to convert a string to a number, you can use a leading zero to indicate you're using an OCTAL value just like 0x denotes a hexadecimal value.

So the bug actually isn't that int() works incorrectly, but that the manual doesn't say that you can use a leading 0 to indicate an octal value.
So why does it seem to be 'fixed' in as3.0? Well, you can use octal notation in as2.0, but this doesnt work anymore in as3.0.

Not sure why anyone would want to use octal notation, but to prove this, try this little example in as3.0 and as2.0


for (var intT=00; intT< 020; intT++)
{
trace(intT);
}


as2.0 will count to 15
as3.0 will count to 19