In this two part, Blender 2.5 tutorial we will be creating a sci-fi panel. This series includes modeling of the high and lowpoly objects, baking the normal maps and other various maps and texturing the panel. We will then show you how to bring these textures into Unity 3d to be used as a custom material.
Part two we will be covering how to create the color, specular, and emitter maps; how to apply them in Blender, and how to make them into a material for Unity 3d.
FIRST!
Second!
Yeah but, I don’t have photoshop ;~; so I was wondering if I could do the same thing with blender or you could post the textures onto somewhere for me and others in my situation to get.
The textures are all included in the source files, which are available free to all Citizen members or available for $4 each. You could then take those textures into Blender no problem.
-Jonathan
You can do the same thing with Gimp. No Photoshop needed.
high five Geoff!
Awesome tutorial, very educative and well explained!
A question, at around 27:10 you mentioned that PNGs don’t have alpha channels, while in fact it does. I’m not familiar with the Photoshop PNG exporter, but in The Gimp, you just have to make sure to check “Save color values from transparent pixels” while exporting to include the color map where the alpha = 0. Is there any specific Unity 3d-related reason why PNG was not used? (PNG compression is superior to that of Targa’s) Otherwise, I guess this serves as a tip
PNGs actually don’t handle alpha in the same way as Targas. A PNG has transparency not an alpha channel( I don’t know why its different). Also for game engines PNGs are way too slow and costly to decompress. In this case Unity actually compresses any image file to its own file format( a version of DDS probably).
Targa’s main benefit is that it is, mostly, uncompressed so that it takes no time to load and decompress. I think there is also no built in color space so that is useful for compositing.
The transparency is an alpha channel, and 256 range same as with tga tiff or any other format that supports alphas. As for compression, all compressed files are decompressed when textures are loaded to memory.
PNG don’t have to compress if you wish, and there are 0-9 compressing levels. Sometimes is faster load small compressed textures from hard drive or dvdrom and decompress it on CPU than load bigger uncompressed files.
It is true that PNGs store a 256 transparency “channel” but i don’t think that it stores the color information underneath it. That is the compression. An Alpha channel in a TGA is just a “transparency” overlay where as in a PNG it seems to act like a color information replacement. This is all based on file size and creation process in PhotoShop so I may be mistaken, but in my experience you can’t store information in alpha channels, not related to opacity, using a PNG.
Very cool. I think I may have to spend some time and learn Unity soon
Again, great tutorial, will help me alot
Seventh!
A lot of work but a great result!
Thanks, great tutorial. We need tutorials like this, about creating environment game assets. If you plan to release other tutorials like this, I suggest to make one (or severals) about rocks, foliage and other natural environment stuff and insist on texturing stuff because it’s a really important part and I can’t find much detailled tutorials about this.
Killer stuff!
@Andy Pace
You were the 9th to comment this time around… everything okay?
Just joking, I am glad you liked it; and would encourage you to learn at least some of the basics of Unity 3d. It helps open doors, and is fun to boot.
@ED
I don’t know how much I can say… but… you might be getting you wish here soon…
@Aaron Symons
Yeah it is a bit of work, but well worth it. Thanks for you comment.
@Everyone else
Thanks for your support and comments; I hope this tutorial helped and that you keep showing your support.
Is it possible you could make a tutorial for importing the material into the UDK?
Only reason i’m asking is, UDK will be my go to game engine as it seems easier to use, well for me anyway.
You can count on a UDK tutorial before too much longer!
-Jonathan
This was a great tutorial for me personally, would love to see more of these!
By the way, in the Unity’s material preview window, there is a small icon in the upper right corner that looks like a ball. If you click on it, you can preview the material on a different mesh than a sphere. There’s a cube, a torus, and a cylinder.
great tutorial! we need more of those to be able to export Blender assets and animated characters to Unity. It would be great if you can produce some basic tutorials before Jonathan finishes his new training series
Thanks for this one, really excellent.
All this can be done in GIMP, pretty much all the layer effects can be done with layer masks(right click layer, add layer mask, then paint in black or white with different brushes to show or hide the different parts of the layer).Then use different layer blend modes to get appropriate effect.
Loved this edge scratch technique, the best I have ever seen!
Way cool, magnificent tut!
Thanks Porter and the guys at Blendercookie.
Great education. Just need more UV unwrapping complicated objects
Just a thought on last comment. Maybe a section on UV wrapping would go down well, from unwrapping a simple primitive for beginners to the more complicated for imtermedite/advanced Blender users.
Here are a few tutorials on UV unwrapping that may help you:
Intro to UV Unwrapping: http://www.blendercookie.com/2011/01/21/intro_uvmapping/
Modeling and Unwrapping a Lowpoly Concrete barrier: http://www.blendercookie.com/2011/06/08/creating-a-lowpoly-concrete-barrier-part-01/
UV Unwrapping a Female character: http://www.blendercookie.com/2010/03/02/unwrapping-a-female-character/
Cheers!
-Jonathan
You are a star Jonathan.
Maybe a dedicated UV wrapping section might be a good idea.
Just some navigation linking would probably do trick Jonathon
Ie: included in Tutorial drop down menu was a UV unwrapping link taking you to those to those kind of tuts.
Just an idead to make things easier to find.
I was missing a piece of the jigsaw until Introduction of UV unwrapping.
Thank you Blendecookie. It’s all up to me now.
Hi,
Porter Nielsen,
thanks.Very good tutorial.Good information,Good end result.
Here is my link
http://browse.deviantart.com/?q=gallery%3Ahaqzaf%2F9410305&loggedin=1#/d41y4aj
This image is a default render image from Blender.
Unity result was not achieved as expected especially when you decided to add alpha channel with normal map and illumination map on RGB Glossy channel.
and alpha channel adding specular map.Will recheck to know the cause.
Great tutorial, Porter!
Good tutorial! But you should probably try to use adjustment layers and mask as they’re non-destructive and give you more freedom (especially with pattern adjustment layers).
At the risk of bringing down the usual wrath of Photoshop users, I would just like to offer my personal comment that this tutorial was just a bit /too/ Photoshop specific. I have some experience with the GIMP, but in this case I couldn’t really get the same effects as described in the tutorial.
I’d like to see a *lot* more of this kind of tutorial, but based on the GIMP.
I know, I know, it’s been said before and it’s been repeatedly rained on, but if you don’t ask …
Part 1 was brilliant. I finally get normal maps
@ Jim
I actually really like Gimp, prefer PS because I need CYMK, but I like Gimp and am quite familiar with its use. What part of the tutorial were you not able to duplicate in Gimp and I should be able to briefly explain how to do it in Gimp for you.
@ Haqzaf
Very cool.
That is awesome, it turned out really good. At first I thought I was looking at my panel.
Hi Porter. Thanks for the reply. I … er … made a bit of a gaff right at the start, so everything sort of fell apart after that. I haven’t used “burn” before, but I knew there wasn’t “linear burn” in the GIMP menu, so I assumed you probably just meant burn. But it didn’t work and just made a mess of the image. With your further references to specific PS keypresses and menu options, I lost heart a bit.
The good news is that when I was trying to reproduce the problem I found out what I did wrong. My panel shading layer and my metal image (from CG textures) were the wrong way round, so my burn was horribly inverted
I’m trying to find some time to repeat the whole tutorial now because I want to see this in Unity!
Thanks again.
Rather than saving the selection and loading it again and all that hassle, copy your metal texture, hit Q for quick mask, paste (or fill) and hit Q again. Selected, and much quicker than the demonstrated method.
Super stoked as a user of both Blender and Unity. Need more of these!
Unfortunately my Photoshop at work doesn’t have the refine edges option. o_O Need to continue at home. So far great tutorial again!
The tutorials are the best.
- Michael Glen Montague
Awesome! I love it that you guys are making tutorials with Unity, I hope you keep doing more ’cause with no hesitation I can say they’re gonna be a huge success! I have learned so much from this site and I hope to learn some more for my game dev profession! Thanks for all your hard work!
Had a problem with the self illum map mixed with the normal map. I don’t think it’s possible to have a normal map with an alpha component in Unity. Or, at least not possible to make it work with the built in shader.
Looking at the tutorial again, it looked like after he added the self illum to the alpha of the normal map, and exported it as a new file, and then assigned it to the illum channel of the shader, he still had the original normal map assigned to the normal map in the material.
So the shader worked because it was pulling the illum from the alpha channel of the normal/illum map (which was being imported/processed as a regular texture, and the rgb component wasn’t being used by anything), and the older normal map without the illum alpha (which was being imported/processed as a normal map) assigned to the normal map channel.
Anyway, mine worked once I wasn’t trying to share the same texture between the normal map channel and the selfillum channel, and moved the self illum to its own texture. I didn’t have any idea what to do with the rgb component of that texture, though, so I went back to the original self illum texture, and changed it to an advanced import, set it to generate alpha from grayscale, and set the texture format to alpha 8. Now when Unity cooks it, it’s just the alpha component the shader uses.
I enjoyed this tutorial and hope there are a lot more coming! Especially if they deal with Unity3D. I was able to successfully make a model and import it into Unity3D. I had to consult your seamless texture tutorial because I couldn’t remember how to clone the seams out exactly. Now I just need to get better with Unity to make better use of those models.
Anyone that is interested in getting better with Unity search for “Tornado Twins” on Youtube. They had a series making a basic game in Unity. I watched it awhile ago so nothing has really stuck with me but remember they start with the basics and continually add to the same game. Good luck to all!
hey im having trouble with the photoshop part?, how did you get all the images into the layers section?
“What part of the tutorial were you not able to duplicate in Gimp and I should be able to briefly explain how to do it in Gimp for you.”
first thanks for awesome tutorial, i try to do in gimp, and i think the big problem is to make the specular/ilumination map, in gimp cant (or i cant find the way) copy and paste in alpha channel the greyscale map, i look harder to find a solution, and find this http://www.youtube.com/watch?v=pGPJhT5lUpE but i think this no good, the difuse part loose colors and information, and its look like in unity forum a lot of people cant find a good solution, so please help us with that.. thanks again
Hi, Porter Nielsen
I, found the problem in unity 3d.
It was neither related to unity nor the way you describe it in your tutorial.
It was my fault.
In unity 3d, there are three channels to complete the impoted texture.
first channel-Color map with specular map added in Alpha channel.
Second channel-normal map with illuminated map to be in alpha channel.(my illuminated map fail to apply in alpha channel).I re-apply the illumination map and reasonable result achieved.
Third channel is simple normal map.
My link, to show the result in unity 3d
http://browse.deviantart.com/?q=gallery%3Ahaqzaf%2F9410305#/d42b6ze
http://browse.deviantart.com/?q=gallery%3Ahaqzaf%2F9410305#/d42b7nf
@Danny
Under file go to place, then select the file you want to place. It will place the file as a new layer.
@wicked208
The illumination map should be easy enough, just select the lights and use a white fill; then fill everything else with black. Most of the tools I use in photoshop for the spec map are found in gimp under a different heading, namely color. For example to change the saturation and lightness of the map go to colors>hue saturation and that alone lets you do everything I did in photohsop for the spec map.
i cant apply textures, how do i do it?
Which part of applying the textures is not working?
-Jonathan
Playing around with Unity some more this week I found that for the illumination map you have to put it as an alpha of its own separate texture file; not on the normal map. Unity reference lead me to believe that the alpha should be on the normal map; but it actually doesn’t work that way.
So why did mine work in the tutorial? Because the normal map I applied to the illumination was not the same normal map that I was using for the normals; hence I unwittingly avoided the issue.
So in short, save your illumination map as an alpha to a different texture.
Same as the first part. The result look really professional. It give to me, one billions ideas about some of my projects.
forty-seventh
cool tut i love how low poly this panel is but so much detail!! thank you for it. only prob i have is for some reason when i try to put the spec map and emitter map on my panel goes black im using 2.57 i got it to work in 2.49 but then when i reloaded the 2.49 one the other day its all black again with the spec and emit map on, so idk what im doing wrong. If i do a render it looks good though but showing up black on screen and in bge. also i followed the paint part in gimp had to figure a few things out on my own but prob cuz im still new to gimp but helped me learn how to use it a lil better. thanks again for the low poly high detail tut, ill prob try to do the tut again to see if i can get around the black thing unless anyone knows a quick fix or something easy i missed/messed up on. keep blending; cya
Do you have GLSL enabled and are you in Textured view mode (ALT + S)?
-Jonathan
ya its kinda weird I triple checked the settings and they were all good, but today when i loaded it up again to check the settings it works in 2.57 and 2.49 so i did a resave and hopefully its all good. Not sure still why it wouldnt work at first, it was like it was trying to read the spec map and emitter maps as color maps even though I didnt have color checked. thanks for fast response cya
Great, but now that we are in the sci-fi mood, It would be great if you made a tutorial on how to model, animate and render a transformer! I have been searching for something like this for a while, and now that blender has an integrated camera tracker and a lot of cool new fearures, and with the new movie coming up it would be great if you made a tutorial for that.
Why you dont explain that for GIMP?
Photoshop is pretty expensive… :-/
you can do it in gimp also not sure what part you are having trouble with but I put the panelshading map on Burn in layer mode and i think i messed with the colors threshold a little to darken it a bit. to make the spec map just merg the two metal layers like the tut and then go to colors threshold and adjust the slider to get it how you want it. I had a little trouble with the selection but i just selected the slower way. also I was lazy and didnt do the dirt map but will try next time. I just used stock brushes the caligraphy and mess with spacing and size till u get it cutting in the edges how you like for the not perfect paint edges. keep blending cya
@Julius
I hear you, Photoshop is very expensive. In my future tutorials I try to do a more comprehensive approaches of all software; so for example one coming down the pipe I explain how to do the texture work in both gimp and Photoshop; but only where the two programs diverge in functionality, and it is actually interesting to see the differences.
@Cas
More Sci-Fi on the way
You can rename objects on Unity by hitting the F2 key.
I can’t get past the first part in Photoshop. When I do linear burn my image looks horrible compared to yours. The diamond pattern in the middle is almost completely blurred out. I followed part 1 to the letter so I don’t know why my detail sucks compared to yours. When baking the shading map & fake lighting panels the diamond pattern was very blurry and had no “pop” using hemis like you did. I tried a sun lamp and it seemed to work but when I apply a linear burn to the layer in Photoshop the metal base bleeds through too much. The diamond pattern pops well in GLSL shading mode in the 3D viewport, it just turns to garbage after being baked for some reason.
Replying to my own problem, in case it helps anyone.
I used an opacity of 40% for the pattern fill in the “metal base” layer and that helped a lot. I wasn’t able to cover up the big scratches using the method you used (because of the lowered opacity) so I just clone brushed them out. But in the end it came out looking pretty good.
Forgot to say thanks for this awesome tut, so thanks!
hi guys, i need a hand here : i’m using gimp(there’s no way to get PS) but the problem is i can’t found anything called linear burn and the burn function looks not the same.. would someone help?
I had this problem too and after much googling all I found was this:
http://noldo-icons.livejournal.com/16629.html
I just used Photoshop though in the end.
i don’t understand what they mean in the page you mentioned, otherwise i’m downloading a trial vesrion of Photoshop …
Man, thanks so much for this tut, it helps a LOT!
Hey man thanks for this! I did a slight variation as far as how the texture is made in photoshop.(Mainly because I used GIMP.) I’m gonna post my final render in a little bit.
Porter Nelson is my hero
sorry, Nielsen*
i have a question i do not want this to be used in unity3d, id like to make a “3d mesh” out of it but flat (make sense?) do i still follow the same way but just bake it all as a texture inside blender? im quiet baffled im fairly new to blender and making meshes and texture files within blender so not sure what to do.
If you create one texture with the normal map (With normal influence of course.) that we made in the previous tutorial, and use the actual texture image from this one as a second texture with all the same mapping settings only with color influence, then you should get the result I got on the image at the far right In the user submitted images. Of course I also used a point lamp for each light on the texture. Hope this helps.
i am newbie in 3d and just started blender This tutorial is great and helps me but one problem is happened during this I can’t able to see texture and shading map n blender workspace so every time i check it in render
I have done everything same as glsl shading and tick in texture solid (in display setting) but it never shown
Don’t know why it not showing in workspace
save it and restart blender this worked for me. i noticed on a not so high end pc (maybe also on high end ones though) blender starts a little to act up.
hope this helps otherwise i wouldnt really know what to do.