How to render the illumination to a texture for Papervision3D with 3D Studio MAX
Feb 21st, 2007
I'll declare myself Mr.Tutorial!
For the ones that doesn't have too much time and need to understand what's going on, this tutorial explains how to do this:
(This tutorial isn't just for Papervision3D, you can use it with any other 3D engine).
The point is that when you approach a realtime 3Dengine the best way to achieve good results is to think about how to use the resources you have. Papervision3D still doesn't have illumination, but it can render polygons with textures. So, why don't we render the illumination to the texture with our 3D package? This is exactly what I thought when I did this, this and this.
I'm afraid I've no idea of how to do this thing with any other package, but at least you will get the idea.
Ok, let's start...
Open 3D Studio MAX and all that, I believe the Render to Texture feature is there since the version 5 or 6... (I'm using 8).
Then we create a Torus and a Plane.
And we do an scene similar to this one:
The under the Lights tab we select the Skylight... er.. light, and with check the Cast shadows checkbox. The rays per sample parameter is the quality, if your machine is slow, put it to 5 or 10 just for testing, I usually do the tests with 5, and then when I go to do the render to texture I put it up to 30.
I'm don't thing the position of the light really matters, this is not one of those lights that you need to focus on something, just put it anywhere.
Half of the work done! If we do a Render right now, It should look like this:
Now, sometimes the 3D object we want to render the texture from is quite complex, so we need to Unwrap the mesh to a plane so we make things easier to the render to texture thing. (You'll understand what I mean in a sec). So, under the Modifiers tab, we select the Unwrap UVW from the Modifier List. And then we click on Edit.
A new window will appear with the mesh on a plane in wireframe. First we click on the 3rd option of the Selection Modes, and then We go to Mapping/Flatten Mapping.
On the new window that will appear we put the Spacing to 0.0 and we click OK, this will explode your mesh to the best (not always) way so the Render to Texture can put as much information as possible into the texture.
The end result should look something similar to this:
We close the window, and then with the Torus object stil selected we go to Rendering/Render To Texture.
On the new window, we scroll down to the Output part and we click on Add... to add a new texture you want to bake. This will prompt another window where we have to select CompleteMap.
If we scroll down that panel a bit, we will see the options for the final texture. If you want to save the texture in a different path, well... feel free. I usually do the renders to 1024, and in case isn't it can be reduced then I reduce them to 512 with Photoshop.
As the last thing, If you don't want MAX to change the texture of the Torus with the backed one, I recommend you to check the Render To Files only checkbox.
We click on Render and after we'll end up with a texture similar to this:
And that's all, I'm afraid I won't go into the part of doing the code with Papervision3D for loading all this, but I'm sure you know how to use this texture now ;)
Hope this is useful for someone
#permalink
For the ones that doesn't have too much time and need to understand what's going on, this tutorial explains how to do this:
(This tutorial isn't just for Papervision3D, you can use it with any other 3D engine).
The point is that when you approach a realtime 3Dengine the best way to achieve good results is to think about how to use the resources you have. Papervision3D still doesn't have illumination, but it can render polygons with textures. So, why don't we render the illumination to the texture with our 3D package? This is exactly what I thought when I did this, this and this.
I'm afraid I've no idea of how to do this thing with any other package, but at least you will get the idea.
Ok, let's start...
Open 3D Studio MAX and all that, I believe the Render to Texture feature is there since the version 5 or 6... (I'm using 8).
Then we create a Torus and a Plane.
And we do an scene similar to this one:
The under the Lights tab we select the Skylight... er.. light, and with check the Cast shadows checkbox. The rays per sample parameter is the quality, if your machine is slow, put it to 5 or 10 just for testing, I usually do the tests with 5, and then when I go to do the render to texture I put it up to 30.
I'm don't thing the position of the light really matters, this is not one of those lights that you need to focus on something, just put it anywhere.
Half of the work done! If we do a Render right now, It should look like this:
Now, sometimes the 3D object we want to render the texture from is quite complex, so we need to Unwrap the mesh to a plane so we make things easier to the render to texture thing. (You'll understand what I mean in a sec). So, under the Modifiers tab, we select the Unwrap UVW from the Modifier List. And then we click on Edit.
A new window will appear with the mesh on a plane in wireframe. First we click on the 3rd option of the Selection Modes, and then We go to Mapping/Flatten Mapping.
On the new window that will appear we put the Spacing to 0.0 and we click OK, this will explode your mesh to the best (not always) way so the Render to Texture can put as much information as possible into the texture.
The end result should look something similar to this:
We close the window, and then with the Torus object stil selected we go to Rendering/Render To Texture.
On the new window, we scroll down to the Output part and we click on Add... to add a new texture you want to bake. This will prompt another window where we have to select CompleteMap.
If we scroll down that panel a bit, we will see the options for the final texture. If you want to save the texture in a different path, well... feel free. I usually do the renders to 1024, and in case isn't it can be reduced then I reduce them to 512 with Photoshop.
As the last thing, If you don't want MAX to change the texture of the Torus with the backed one, I recommend you to check the Render To Files only checkbox.
We click on Render and after we'll end up with a texture similar to this:
And that's all, I'm afraid I won't go into the part of doing the code with Papervision3D for loading all this, but I'm sure you know how to use this texture now ;)
Hope this is useful for someone
#permalink
Designing websites efficiently with Photoshop CS2
Feb 20th, 2007
One of the things you can't do when you work on a team is to adapt the new technologies as fast as you can as when you work by your own.
This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well...
Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one.
When you design the flatscreens for a standard website, you end up doing it in 2 ways:
1st way:
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd
So each .psd has the content and layout for each section.
Benefits: You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast.
Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it.
2nd way:
projectname_design.psd (with folders inside it for each section)
Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part).
Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder.
Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see:
3rd way: (the good one)
includes/projectname_header.psd
includes/projectname_footer.psd
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd
The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;)
How-to:
1. Create a new file.
2. Add a text inside it.
3. Save it as footer.psd.
4. Create another file.
5. Create a layer (I named it footer container).
6. Draw anything inside the created layer.
7. Go to Image / Variables / Define...
8. On the layer selector, select the layer that you created.
9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is".
10. Click on next (Data sets), and then click on that little disk with an arrow pointing down.
11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button.
12. Select the file footer.psd
13. Click on Apply and then OK
At this point you should be seeing whatever content you had on that external file replacing the layer you created.
Clean, fast, and without duplications.
#permalink
This is just an example... when I was working for Spring Digital, we were a team of 6/7 designers. Since Photoshop CS2 was released I knew there was something called variables that could let us save a lot of time and HD space when designing flatscreens for websites. I tried it quickly and saw that it worked great, I tried to introduce it as a new way to design the sites but I failed. Also I wasn't able to use it because my flatscreens had to be easy to modify by the other designers, and none of them had Photoshop CS2 installed... Oh well...
Luckily I'm now working by my own and I can use that way of developing flatscreens. At this point you will be thinking, so what's that? Ok.. Developers will love this one.
When you design the flatscreens for a standard website, you end up doing it in 2 ways:
1st way:
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd
So each .psd has the content and layout for each section.
Benefits: You can save each file as a png for showing it to the client easily, the whole data is split in a couple of files, so loading/saving them should be fast.
Problems: If the client wants you to change the header or the footer of the site, you have to go flatscreen by flatscreen modifying it.
2nd way:
projectname_design.psd (with folders inside it for each section)
Benefits: If you do it properly, you should be have to modify only once if the client asks a change on the header/footer (or any other common part).
Problems: The file may get quite big with all the data inside, and if you're working against a server it can get annoying. You can only reuse the header, as the footer will be probably on different heights. Anytime you save the the files as png for the client you'll have to hide/unhide each folder.
Well, for a developer, this is like writting a code without writting functions, all the time duplicating the same code. Ugly, uh?! Here is what you want to see:
3rd way: (the good one)
includes/projectname_header.psd
includes/projectname_footer.psd
projectname_aboutus.psd
projectname_technology.psd
projectname_services.psd
projectname_contactus.psd
The good news with Photoshop CS2 (although it was released years ago) is that you have Variables, which basically lets you attach an external file to a normal layer. So any time you update that external file it will update it to the other files that are attaching that external file on-the-fly. Some people call this concept instances ;)
How-to:
1. Create a new file.
2. Add a text inside it.
3. Save it as footer.psd.
4. Create another file.
5. Create a layer (I named it footer container).
6. Draw anything inside the created layer.
7. Go to Image / Variables / Define...
8. On the layer selector, select the layer that you created.
9. Check the Pixel replacement checkbox, put a name to the variable (I called it "footer") and use the method "As is".
10. Click on next (Data sets), and then click on that little disk with an arrow pointing down.
11. If will probably autoselect the variable you created as its the only one, so then you only have to click on the RadioBox to enable the Select File... button.
12. Select the file footer.psd
13. Click on Apply and then OK
At this point you should be seeing whatever content you had on that external file replacing the layer you created.
Clean, fast, and without duplications.
#permalink
New mr.doob's website+ID!
Feb 16th, 2007
Right, maybe it needs a bit of extra work but I'm quite happy with it by now and need to keep working on other stuff. I believe the new ID is more friendly and attractive than the one before (I didn't really like it).
In order to 'celebrate' it I did another test with PV3D. Although whatever you do after Ralph's bump+reflection test will look cheap. Oh well.. here you have:
Well, took a while but it's finally done. Now I only have to do good enough works to populate the portfolio :)
#permalink
In order to 'celebrate' it I did another test with PV3D. Although whatever you do after Ralph's bump+reflection test will look cheap. Oh well.. here you have:
Well, took a while but it's finally done. Now I only have to do good enough works to populate the portfolio :)
#permalink
Oooh... Sandbox sandbox, what a shame...
Feb 11th, 2007
I've spent a lot of hours today trying to do something that I thought it was going to be quite easy. While I was doing the Effect01 of the audioVisualizations I realised that testing different mp3s on it just to see how the visuals were going to react was actually very fun. After a couple of mp3 tests I found out that there was something else, the experiment was showing me parts of the tune that I never paid attention before. So I had the idea to make it 'public', so anyone could test it with their own mp3s and have some fun too.
Easy concept, same experiment but with a inputBox where you paste the link to the mp3. Unfortunately I wasn't aware of flash sandbox limitations on that matter. Apparently you can't load mp3's from other servers that doesn't have the policyFile.xml.
I know that you could do a php script to jump the sandbox, but this would mean a lot of bandwidth on my server, which I don't fancy right now :P
This is how I left the project:
http://mrdoob.com/lab/PV3D/vis/effect01/custom/
In fact, if you try it with a link to some MP3 (you can find a lot here), the swf loads the tune, you can listen to it, but the ENTER_FRAME stops and if you're running the debug version of the player it warns you with the limitation.
Do you know any solution for this besides the php script?
#permalink
Easy concept, same experiment but with a inputBox where you paste the link to the mp3. Unfortunately I wasn't aware of flash sandbox limitations on that matter. Apparently you can't load mp3's from other servers that doesn't have the policyFile.xml.
I know that you could do a php script to jump the sandbox, but this would mean a lot of bandwidth on my server, which I don't fancy right now :P
This is how I left the project:
http://mrdoob.com/lab/PV3D/vis/effect01/custom/
In fact, if you try it with a link to some MP3 (you can find a lot here), the swf loads the tune, you can listen to it, but the ENTER_FRAME stops and if you're running the debug version of the player it warns you with the limitation.
Do you know any solution for this besides the php script?
#permalink
Weird bug in Flash player 9 for Firefox/Mac
Feb 9th, 2007
I've been having problems with this for a long time now. My experiments always use mouseX and mouseY for controlling the values (in instance, the camera position). So when you click outside the browser, clicking in another window for example, the player will still receive mouseX positions anytime you click.
The problem is that those mouseX positions are well far from real. 100,000px and stuff like that. So this means that when you click on a window outside the browser the 3D scene disappears. I thought that I was just that, just disappearing, but if you wait a bit (which I didn't until today), 5/6 seconds, you'll see how the 3dscene was really far that you weren't able to see it and it the camera will travel to the normal postion by itself, so you would see the scene again. Something similar happens when you click on the address bar from the browser.
This only happens with the Firefox/Mac version tho.
UPDATE: Some people of the flash player dev team approached me already about this bug and after helping them to reproduce it looks like they're already fixing it. I've also reported some other bugs, so don't expect any other bug report in this blog.
#permalink
The problem is that those mouseX positions are well far from real. 100,000px and stuff like that. So this means that when you click on a window outside the browser the 3D scene disappears. I thought that I was just that, just disappearing, but if you wait a bit (which I didn't until today), 5/6 seconds, you'll see how the 3dscene was really far that you weren't able to see it and it the camera will travel to the normal postion by itself, so you would see the scene again. Something similar happens when you click on the address bar from the browser.
This only happens with the Firefox/Mac version tho.
UPDATE: Some people of the flash player dev team approached me already about this bug and after helping them to reproduce it looks like they're already fixing it. I've also reported some other bugs, so don't expect any other bug report in this blog.
#permalink
Papervision3D + computeSpectrum = Nice audioVisualizations
Feb 8th, 2007
After checking Sephiroth's SoundMixer experiment I thought something nicer could be done working a little bit more on that field. Long time ago I did some Visualization system for r08028. With flash7/8 you weren't able to get even the volume of the Sound so I had to do a quick tool with C++ for generating .txt files with the data. Luckily with Flash9/AS3 you can get that data on-the-fly!!
So, this is how the experiments ended up like:
source file, music by Paniq (contemplation)
source file, music by Crankshaft (from the demo Ocean Machine)
source file, music by rydmlego (fire tree)
The source files won't work as it needs some custom objects I've done (cube, piramid), but at least you can get the idea of how everything works.
Enjoy!
UPDATE:
I've updated the files and source files with a better algorithm for showing the spectrum (well, better than nothing, and there wasn't any algorithm in place before :P)
UPDATE 2:
I've added a little bit of decay to the movements, now they look nicer.
#permalink
So, this is how the experiments ended up like:
source file, music by Paniq (contemplation)
source file, music by Crankshaft (from the demo Ocean Machine)
source file, music by rydmlego (fire tree)
The source files won't work as it needs some custom objects I've done (cube, piramid), but at least you can get the idea of how everything works.
Enjoy!
UPDATE:
I've updated the files and source files with a better algorithm for showing the spectrum (well, better than nothing, and there wasn't any algorithm in place before :P)
UPDATE 2:
I've added a little bit of decay to the movements, now they look nicer.
#permalink
Making the last experiment Useful
Feb 4th, 2007
I saw somewhere a comment from a guy saying that the pink ball, was cool but wasn't useful at all. I know that the stuff I usually do is too conceptual that is hard to see it being used on the real world. So, here it's another example with the same stuff but with more sense on the commercial world out there ;)
It is still having problems with some polygons, but, don't blame PV3D, blame me instead ;) I just optimised the 3dmodel a little bit, in case I had to create a model from scratch I will make sure it renders properly on the engine.
Well, enjoy the views, and don't look at the glitches ;)
#permalink
It is still having problems with some polygons, but, don't blame PV3D, blame me instead ;) I just optimised the 3dmodel a little bit, in case I had to create a model from scratch I will make sure it renders properly on the engine.
Well, enjoy the views, and don't look at the glitches ;)
#permalink
Another PV3D performance test
Feb 2nd, 2007
PV3D RC1 was released yesterday. Since yesterday I was planing to redo my 3dengine (kocka) with AS3, but after seeing how well PV3D is being developed I decided to stop my plans and use PV3D instead. It still needs a couple of things to be done, but by now I think I'll have more than enough.
Here it's another performance test to see how fast it goes and what can be done.
Grebble Ball with baked Ambient Occlusion
It's a shame those clipping issues, but hey, Playstation 1 had those issues too!
Hope you like it :)
UPDATE: For those people that want to try the model with their own engines (hello flash.fi ;)) and for the people that want more examples done with PV3D, here you have... the source files (PV3D classes not included).
#permalink
Here it's another performance test to see how fast it goes and what can be done.
Grebble Ball with baked Ambient Occlusion
It's a shame those clipping issues, but hey, Playstation 1 had those issues too!
Hope you like it :)
UPDATE: For those people that want to try the model with their own engines (hello flash.fi ;)) and for the people that want more examples done with PV3D, here you have... the source files (PV3D classes not included).
#permalink
flashscene.org 32k compo entries released
Feb 1st, 2007
It was supposed to be a 32kbytes compo, but only for the .swf. You was able to have an external .mp3. To be honest, I was expecting some prod with the music generated, but well, I guess the flashscene are now on the early days. Well, I know that Andre and other guy is working on this field these days, so maybe in a couple of months...
However, the quality of the releases is really good! Specially these ones:
* Beat
* Flint
* Alchemist
So, finally we're starting to see what Actionscript 3 is really able to do! After having said that I can say with any doubt... FUCK SDL! FUCK C++! AS3 IS MY PLACE! o/! ;)
#permalink
However, the quality of the releases is really good! Specially these ones:
* Beat
* Flint
* Alchemist
So, finally we're starting to see what Actionscript 3 is really able to do! After having said that I can say with any doubt... FUCK SDL! FUCK C++! AS3 IS MY PLACE! o/! ;)
#permalink
PV3D Acid Cubes
Jan 18th, 2007
Here you have another experiment with Papervision3D... Enjoy :D
(this time is only 19kbytes... :P)
Should I say anything else? What I did seems quite ovbious so.. well, that's it.
#permalink
Webs / Print / Logos... everything I do will be listed here.
If you're looking for my Actionscript experiments, here you have:
