« Posts tagged texure

[Game] Snowy Turn Table Final

Freshly fallen snow on a grave

Another day and another piece done :) I had a great time putting together this snowy turn table and trying out all sorts of different methods in ZBrush for creating snowy surfaces. For some extra fun I even threw in some “Matinee” animations using Unreal’s animation system.

The snow covered assets in the scene use what is basically a layered material to map the snow, ice, and base materials over their surface. This is done through using the “Lerp” node in the material editor. If you’ve ever tried to create a layered material in Mental Ray you will appreciate what the lerp node does. Using an 8 bit (gray scale) map the Lerp node transitions values. Think of it like a mask. You can use a bunch of these Lerp nodes in a single material to create a layered shader. There are other ways of getting more than one material on an asset in the UDK though.

When exporting your assets as “FBX” files in Maya you can assign up to six (as of Unreal Engine 3.0) different materials per mesh. This is done through simply creating up to six different Lambert materials and applying them on a per face basis. This is a very convenient way to assign materials to your meshes, but it does have it’s downsides. Firstly, you are adding extra draw calls for each new material you assign your asset. This differs from using the Lerp node because with Lerp method all your different surface types are constructed within a single Unreal material and consequentially, a single draw call. Secondly, the borders of your materials must lye along the edges of their assigned faces. This can end up giving you abrupt transitions that won’t look as smooth as painting a mask for a Lerp node. Going forward I would like to expand on what I’ve done in Matinee and produce an animated character with some dynamically driven accessories.

Oh yeah, I almost forgot to mention that I’m moving to Montreal Canada. I’ll be heading out November 5th and my first stop will be their Independent Game Developers Association. I’m super excited to meet fellow developers and check out all the wonderful studios in Montreal.

 

 

[Game] Snowy Turn Table WIP 2

Freshly fallen snow on a grave

Here is an update on my snowy turn table I’ve been putting togeather. I’ve added some animated lighting and given most of the meshes another iteration of detailing and fixes. The next thing I have to do is finish the snowy bushes and make the ice on all the meshes more obvious. As a final touch I might at a sun and a moon togeather with the proper positioning of those respective lights. So have a look :)

[R&D] Grey Packing

Grey Packing Method

Whaa, hugh? What the heck is it? Well grey packing refers to creating textures in photoshop that in and of themselves are not particularly useful, but each channel of colour, and possibly even an extra alpha channel contain useful grey-scale textures.

Think of the complete texture as a container or vehicle for getting as many materials as you can into your game or application as efficiently as possible.

A lot of materials use grey-scale textures for values. If you create a 32 bit image (targa for UDK) you can stack 4 grey-scale images into your file and that’s decreasing your memory usage by 300%! and using one quarter of the draw calls for those materials.

Grey Packing Method (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2013/04/graypacking2 NULL.jpg)

To do this just go into your channel tab (next to layer) in Photoshop and you’ll see your four channels and their composite channel at the top. This is where you are going to copy and paste your grey images into. If you want another channel just create one with the new layer button. By default this channel is called “Alpha”.

Don’t forget to export as 32bit otherwise you’ll lose that extra alpha channel.

Cheers

Breakfast Still Life – Final

Final Post Edited Render

I finished the still life from my last post and then went ahead and did some post work in Fusion. All the major elements in the scene were rendered out on separate render layers in Maya. At first render layers seemed like a lot of work, but after setting them up the benefits are awesome. As always if you have any questions about the work flow feel free to leave a comment or email me. For those hoping to see pastries in the foreground… I’m sorry. I didn’t have enough time to give those croissants the care they needed. GG pastries in Mental Ray. GG.Below are my rough draft and raw render along with the final image. Next time I do a light setup I’m going to try and use the light fog in Maya instead of relying on Fusion. This is the first time I’ve ever used film grain in post and I think it may be a little heavy handed, but in my defense shooting in that low light would give you some strong grain.

Glass Render from Mental Ray (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/10/PrePostStillGlass NULL.jpg)

Glass render untouched from Mental Ray

Early Test Render (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/10/glassesRough NULL.jpg)

Rough Render for 3D Still

Final Post Edited Render (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/10/TerryMatthe_GlassFinal NULL.jpg)

Breakfast Still Life – Rough

Rough Render for 3D Still Life involving glass

This image was created for my rendering class in college. We were given the objects and asked to properly light and render them. The style of render was left up to us. The challenge with this assignment is to get the glass looking right. Most of the objects needed to be unwrapped so that’s the first thing I did. Unlike my last apartment render (http://www NULL.terrymatthes NULL.com/general/news/apartment-final-render-thoughts/) this piece can contain no global illumination or final gather. Any bounced light is simulated with secondary light sources. I had to remodel the glasses as their were lots of strange triangles buggering up the reflections. The pitcher and the glasses have separate faces for the inside and outside of the object. Under the glass mesh render properties the objects are set to one sided.

One thing to keep in mind while rendering glass in Maya and Mental Ray is black surfaces. If you are rendering a translucent or semi translucent object and you are getting black artifacts or faces on your render then you need to increase your reflection rays in the object’s material properties. Reflections and refractions take a long time to render due to the amount of ray casting going on. Too many rays and you can drastically increase your render time. Too few and you’ll get black faces where the rays didn’t penetrate the objec. Reflections are a little tougher as you actually have to know what should be reflected. If you can’t see them at all it’s a littler tougher to guess which ones are missing. If you’re casting enough rays within each material and you’re still getting black faces then chances are you have not set your ray tracing limits high enough in the scene’s render settings. In case you didn’t know there is a master ray trace control found under the “Quality” tab in the render settings window.

The colours of the piece are still pretty loose. I was playing around with Adobe Kuler (http://kuler NULL.adobe NULL.com/) and though it was a pretty fun tool to choose a colour pallet. My biggest problem at this point is the strength of the lighting in relation to the floor reflections. I’d like to keep the light warmer (3500k), but I’d also like to get some less harsh reflections in the floor. Most of what’s left to do involved tweaking materials and finalizing a colour pallet. I might take a swing at Maya fur again, but we’ll see if time allows it. I’ve been working part time in while going to school and it’s really been cutting into the amount of time I have to get homework (let alone personal projects) done. I would cut my hours down, but at my work the minimum for part time is 20. I did find a wonderful way to save time though… I set my computer up so I can login remotely. This makes it a lot easier to setup and look at renders. I suppose I could just batch render multiple files with a script, but I wouldn’t be able to change anything after I leave home. I don’t know about you guys, but I frequently get hit by ideas while out and about and this lets me incorporate those changes into the renders.

Rough Render for 3D Still Life involving glass (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/10/glassesRough NULL.jpg)

Maya opticalFX Sprite Textures

Sprite Texture Thumb Image
Introduction
Prerequisites

Appreciation for all things shiny.

Magic effects in video games are sweet, but do you know what’s even sweeter? Knowing how they work so you can make your own. That’s what we’re going to do here. We are going to learn how to make awesome looking sprites in Maya so we can bring them into the Unreal Development Kit for our own special effects. First we’ll take a look at what sprites are, followed by how to render optical effects using a spot light in Maya. Next Photoshop will be used to touch up and save out our images for import into the Unreal Development Kit. Follow me and we’ll “get our learn on”.

Sprites are single polygon planes who’s surfaces are mapped with an image. For visual effects these sprites are usually programmed so they always face the active camera. This means however you look at a sprite in 3D space it will Sprite Based Tree (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_tree NULL.jpg)always be facing directly towards you no matter where it’s positioned. Sprites give an accurate enough representation for a variety of visual effects. Things like snow, muzzle flashes, and small pieces of flying debris look the same no matter what angle you view them from. Even visual effects such as lightning are so quick that you wouldn’t even notice that the effect isn’t truly “3D”. If this is the case then why would we bother giving these effects any extra dimensionality?

Sprites are also simple to render. If all your sprites are single polygon planes you can afford to have a lot of them on-screen at the same time. Throw enough of them together and you can get some pretty realistic looking effects for a lot cheaper then pre-rendered graphics. The picture to our left shows a tree who’s leaves are made of a few larger sprites. No matter which way the camera looks at the tree the leaves appear to be full of volume.

Maya

Point Light Optical Effects

The optical sprite we are creating will be based off a point light. Once created the point light will be manipulated via the “Optical Effects” node to give our light different properties. To do this access the “Create” menu at the top of the screen. Navigate to Lights>Point Light and select it. You should now have a point light at the origin of your axis. The optical effect we are after is not visible by default on our point light. We have to turn it on in the Attribute Editor (ctrl+a). Select the point light and access the Attribute Editor. Under the “pointLightShape1” tab we are going to expand the “Light Effects” section. In this section the last option is “Light Glow”. Turn this on by clicking the checker board button on the right of the text field. If you’ve done this correctly you will see a circle around your light and the Attribute Editor will have jumped to the properties for the “opticalFX1” node you just created. Our point light is now set up to cast some great looking optical effects.

Render Camera Setup

opticalFX Render Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_scene NULL.jpg)Go back to the “Create” menu and navigate to Cameras>Camera and select it. You should now have a new camera also sitting the axis origin. Select your new camera and Move (“w” key) it away from the origin. Now that we’ve finished placing our new camera we will go ahead and look through it. Select the new camera and in your view port menu navigate to Panels>Look Through Selected Camera. You should now be looking straight at the point light we created. The last thing we want to do to our camera is make the “Resolution Gate” viewable. This will let us see the bounds of our render. To do this we will use our view port menu and select View>Camera Settings>Resolution Gate.

By default your resolution is probably not square. We need to make it square so we can use the images we create in the Unreal Development Kit. To change this let’s go ahead and navigate to the “Render Settings” through Window>Rendering Editors>Render Settings. Change your settings to match these options (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_renderSettings NULL.png). With that setup we are now ready to start rendering out some optical effects.

Rendering Optical Effects

The optical effects we are using render out very fast. This will enable us to view near real-time previews while changing the visual settings. To view our render we are going to open up the “Render View”. This can be accessed through the main Maya menu: Window>Rendering Editors>Render View. In the Render View menu select IPR>IPR Render>camera1. This will setup interactive rendering on the camera we created earlier. The last step to setting up IPR is to marquee drag over the entire renderable area. When you do this the edges will become red. Any changes you make to the opticalFX node will now be instantly seen.

Important Note: Maya’s opticalFx are only viewable in “Maya Software” render mode.  Make sure this is selected as your render mode in the Render View window

opticalFx Node Properties

If at anytime you loose focus of the opticalFX node you can access it by clicking on your point light, bringing up the Attribute Editor, and navigating the tabs at the top to find “opticalFX”. Right now you want to have your Render View open as well as your Attribute Editor with the opticalFX node tab viewable. The following section is a visual comparison of the basic opticalFX  properties we will be dealing with in this lesson. There is a lot more you can do with this node than the sections listed below, but this is a beginner lesson so I want to keep things simple for now. Try experimenting on your own after to see what some of the other settings can do.

Optical FX Attributes

opticalFX Radial Frequency Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_Radial NULL.jpg)

opticalFX Star Points Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_StarRadius NULL.jpg)

Glow Attributes

opticalFX Glow Intensity Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX Glow Spread Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX GlowNoise Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowNoise NULL.jpg)
opticalFX Glow Radial Noise Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)
opticalFX Glow Star Level Comparison (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_GlowIntensity NULL.jpg)

To save a render in the Render View you need to use the File>Save Image option. don’t get caught up colouring your optical effect as we will be stripping the colour from within Photoshop. When you are making your effects don’t forget that we can’t have parts of the star breaking the edge of our render. The images are going to be put on flat square sheets in the Unreal Development Kit. If the sprite images extend past the edge of the render they will give away our effect showing its 2D nature. When you have saved three renders that you are happy with move on it the next section.

Photoshop

Saving Sprites For The  Unreal Development Kit

First let’s go ahead and create a New File (ctrl+n) if you haven’t already. Make sure it’s a square 512px file just like the images we rendered out of Maya. We want these to match up as we’ll be exporting this file for use in the Unreal Development Kit. Open (ctrl+o) all three of the sprite files you rendered out and change each of them to grey scale. We can do this by dropping the saturation of each file down to zero. While the layer in each file is selected access Hue/Saturation (ctrl+u). Now drag the “Saturation” slider all the way down to the left and this should drain the colour from your image. Before we jump into the next step I want to take a moment to explain what “Channels” are and how we can use them to our advantage.

Channels

Channels Setup (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_channels NULL.jpg)Each digital image is made of 3 different colours. You probably know what they are if you think hard… red, green, and blue. Photoshop stores this information in “Channel” layers. You can access these through the Channel tab in your layers window or through the “Window” menu. Each of these channels stores 8 bits of information. That means the value for each pixel in a channel is stored as a number from 0-255. As the value gets higher the pixel’s channel value becomes stronger.

In the “Layers” tab all these values are added up for each pixel and you get the full colour view you see as the image. A pixel with a value of 255 in each category would be represented as a compiled colour of pure white. A pixel with channels values of R(255) G(0) B(255) would compile as purple. So what does this have to do with what we’re doing? We’re just saving out pictures for sprites, right? Yes, that’s correct, but we’re saving black and white versions of our sprites, as we will be manipulating the colour from within the Unreal Development Kit in our next lesson. This means that the actual compiled colour of our texture doesn’t matter. This is going to let us store 4 different sprites in one file! Yes that’s right I said “four”. We can add an “alpha” channel to our Photoshop file and get one extra channel.

So now that we know all about what channels are and how we can use them let’s start putting our sprites in our new file’s channels. Go ahead and Copy (ctrl +c) one of the desaturated sprite images from your open files. Navigate (ctrl+tab) to your “new document” and access the channels information. In your new document all the channel information should be blank as you haven’t pasted anything in the layers section. Paste (ctrl+v) the sprite you just copied in a channel. The process is the same for all your other channels. Go ahead and copy the other two sprites you saved into the remaining red, green or blue channels. Remember: our final texture image isn’t important here.

Circular Gradient (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_gradient NULL.jpg)The alpha channel in our texture will not have a sprite. We are instead going to insert a circular gradient that will help us control the look of our sprites from within the Material Editor. Select your Gradient Tool (“g” key) and make sure your foreground colour is black and your background colour is white. Also be sure that the “radial gradient” option is selected atop Photoshop. Navigate to your channels tab and press the “Create new channel” button. This will give you an alpha channel to drag out our gradient in. Select this channel and from the middle drag out to the edge and let go to create your circular gradient. When you have finished save your Photoshop document as a Targa file under the “Save As” section of the “File” menu. When presented with your options for the Targa format select “32 bit”. This will save the file with the extra alpha channel. Remember that each channel is 8 bits so a 24 bit Targa holds 3 channels and a 32 bit will hold 4.

Conclusion

Don’t those sprites we made look awesome? Maya’s optical effects node can get you a lot of different looks so have fun an experiment to see what you can come up with. Try mixing multiple sprite images together within Photoshop and using their combined values in a single channel. Now that we know how to make magic sprite shapes and have saved them out in an efficient format we can take them into the Unreal Development Kit. In our next lesson we’ll use our sprite texture as a base for controlling the look of our sprites through a material network.

Here are the three sprites I will be using in the next lesson about our material controller. Just for fun I thought I would add some colour to them in Maya :)

My Sprite Textures (http://www NULL.terrymatthes NULL.com/wp-content/uploads/2011/01/p_101_spriteTex_mine NULL.jpg)
.

Further Reading

Sprite Material Controller
Make a Particle Explosion Effect by Mike McClelland
Sprite Rendering Fundamentals The Gnomon Workshop
Pixie Dust Using Sprites The Gnomon Workshop

Program Shortcuts Used

Maya
Move (“w” key)
Attribute Editor (ctrl+a)
Photoshop
New File (ctrl+n)
Open File (ctrl+o)
Hue/Saturation (ctrl+u)
Navigate Documents (ctrl+tab)
Paste (ctrl+v)
Copy (ctrl+c)