Our panocube component is now featured in the dutch Webdesigner magazine (although, it might appear in english too, keep me posted if you find it ;)
Rob has a picture up on how it looks :)
Check it out
Get the magazine if you want the full tutorial!
Tuesday, July 22, 2008
Tuesday, July 15, 2008
360 degree Panorama tutorial
I've been asked how I made the pictures for the PanoCube, so I've thrown together a short tutorial.
For the example image in the panocube demo I used a tripod and a normal digital camera on which I could lock the exposure time.
This is important because ground and air, or if you’re inside, the walls and windows/lights, differ quite a lot there.
If your camera automatically adjusts the exposure, the stitcher tool will have a hard time understanding this. (Autostitch doesn't handle this too well, autopanopro is more powerful in this respect, but if you can use the same exposure for every picture, you'll get better results)
Take pictures, rotating the camera a little after each one, make sure you have about 1/3 or 1/4 overlap with the previous picture. It takes me about 30 pictures to make 1 rotation.
When you’ve done a 360 degree turn, tilt the camera up a little (again 1/3 or 1/4 overlap), make pictures all around and repeat until you’re pointing all the way up.
Go back to the very first position and repeat that again, but this time tilting the camera down every round.
After you’re done, stitch them together with autostitch (free http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html ) or autopano pro (better than autostitch, but not free http://www.autopano.net/) this will save the file as pano.jpg.
Be sure to set the rendering options (resolution etc) before you load the pictures, because autostitch will start rendering immediately)
When the stitcher has finished, you’re got yourself a nice 360 degree panorama image. (Autostitch doesn't ask for a filename to render to, it will just create 'pano.jpg' in the same folder as where your original pictures are)
You can use this picture as-is in most panorama viewers (like PTViewer) but for our Silverlight Panocube, we need cubic projection images.
Don’t worry too much if you’ve got ‘holes’ in your picture right now, they’re hard to fix in this format.
As said, we need to convert it to a cubic projection format. I did this using Bixorama, you can download a trial here http://www.outerspace-software.com/bixorama.html
In bixorama, import the pano.jpg file as a ‘latitude longtitude’ file.
Press f6, or ‘view – single files’ and you should see the 6 sides of the cube.
Export these as ‘single files’ and you’re done.
The exported files are easier to fix if you have holes because now there’s no spherical distortion.
You can use these images in the example provided in the panocube post.
Have fun, and let me know what you think.
I'd love to see some examples of what you guys are doing with PanoCube :)
For the example image in the panocube demo I used a tripod and a normal digital camera on which I could lock the exposure time.
This is important because ground and air, or if you’re inside, the walls and windows/lights, differ quite a lot there.
If your camera automatically adjusts the exposure, the stitcher tool will have a hard time understanding this. (Autostitch doesn't handle this too well, autopanopro is more powerful in this respect, but if you can use the same exposure for every picture, you'll get better results)
Take pictures, rotating the camera a little after each one, make sure you have about 1/3 or 1/4 overlap with the previous picture. It takes me about 30 pictures to make 1 rotation.
When you’ve done a 360 degree turn, tilt the camera up a little (again 1/3 or 1/4 overlap), make pictures all around and repeat until you’re pointing all the way up.
Go back to the very first position and repeat that again, but this time tilting the camera down every round.
After you’re done, stitch them together with autostitch (free http://www.cs.ubc.ca/~mbrown/autostitch/autostitch.html ) or autopano pro (better than autostitch, but not free http://www.autopano.net/) this will save the file as pano.jpg.
Be sure to set the rendering options (resolution etc) before you load the pictures, because autostitch will start rendering immediately)
When the stitcher has finished, you’re got yourself a nice 360 degree panorama image. (Autostitch doesn't ask for a filename to render to, it will just create 'pano.jpg' in the same folder as where your original pictures are)
You can use this picture as-is in most panorama viewers (like PTViewer) but for our Silverlight Panocube, we need cubic projection images.
Don’t worry too much if you’ve got ‘holes’ in your picture right now, they’re hard to fix in this format.
As said, we need to convert it to a cubic projection format. I did this using Bixorama, you can download a trial here http://www.outerspace-software.com/bixorama.html
In bixorama, import the pano.jpg file as a ‘latitude longtitude’ file.
Press f6, or ‘view – single files’ and you should see the 6 sides of the cube.
Export these as ‘single files’ and you’re done.
The exported files are easier to fix if you have holes because now there’s no spherical distortion.
You can use these images in the example provided in the panocube post.
Have fun, and let me know what you think.
I'd love to see some examples of what you guys are doing with PanoCube :)
Thursday, June 19, 2008
Panoramacube for Silverlight 2beta2
Rob and I have cleaned up the Panorama viewer code and made it into a Silverlight Component which can now be easily used in your projects.
The antialias lines have been removed using overlapping, which I've wanted to do for my first version, but hadn't gotten it right quite yet.
After seeing that Florian Krüsch pulled it off in his texture triangle control, I decided to give it another try myself and it worked!
Also added are camera and zoom functions so you can control the panorama from c#
Go to the project page on Codeplex
View the example if you have Silverlight 2beta2 installed.
Have fun!
The antialias lines have been removed using overlapping, which I've wanted to do for my first version, but hadn't gotten it right quite yet.
After seeing that Florian Krüsch pulled it off in his texture triangle control, I decided to give it another try myself and it worked!
Also added are camera and zoom functions so you can control the panorama from c#
Go to the project page on Codeplex
View the example if you have Silverlight 2beta2 installed.
Have fun!
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:
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
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 if you're not using FlashDevelop, manually add the following import as well:
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
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
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
Subscribe to:
Posts (Atom)