VHS Video Material Tutorial

I made this VHS Video shader in unreal as part of the first shader challange for the Technically Speaking discord. Our theme was ‘Retro’ and I may have been toying with ideas relating to an FMV game, so decided to throw the two ideas together.

In the spirit of sharing knowledge that the server is built on, I’ve written a tutorial below on how I set it up.

For anyone who prefers to see the source, the project files can be found here. Unzip these folders and copy them into the content folder of your project.

Feel free to comment on here or message me on twitter if you have any questions about the setup or how to do things. 🙂

I’ve also set up a ko-fi now, so if you get some use out of this and have pennies to spare, a tip would be much appreciated!

Buy Me a Coffee at ko-fi.com

Video

Video Texture

Start off by importing a video texture and creating a basic unlit material that uses it. Then make a blueprint that opens your imported media source on level start.

Instructions on how to import, setup and use a video texture in level can be found on the unreal documentation page, so I’m not going to cover it here, but feel free to reach out with any questions!

Video Texture on a Sphere

The video was just a silly horror-esqe clip I took with my phone, looking at the creepiest things I could find in my house. The quality of the video doesn’t matter – not only is the video going to be down-ressed in further steps, but low quality makes it more old-school!

Blurring

In order to really give the video an old school feel, we’re going to add some loss of focus that takes the sharpness out of the image. (Thanks to Simon for this suggestion!)

This one is a little bit of a cheat – rather than writing your own function, grab the SpiralBlur-Texture node. If this doesn’t accept an external texture sample as an input, grab the custom node from inside and use that directly in your graph.

The Spiral Blur Node
Blurring Logic Using Custom Node From Spiral Blur

Convert the inputs to this node into scalar parameters. I found the values below worked well. A very small distance, but very large number of distance steps gives us a substantial amount of blur but keeps the coherence of the image together.

Blur Scalar Parameters in A Material Instance

This blur looks great, but we don’t want our camera out of focus the whole time! To fix this, we’re going to lerp the original image and the blurred image, using a modulo operator to switch between them.

Modulo (the Fmod node in unreal) returns the remainder of a division. So the modulo of 4 and 2 is 0, where the modulo of 5 and 2 is 1.

Fmod Node

By getting the modulo of Time and a scalar parameter, we create an uneven oscillation of values. This produces a more natural look than a wave function. By rounding this, we create a jarring switch between the two which suits the VHS look well.

The difference between modulo and a sine wave.

You can now use the scalar parameter to control how often you see each version of the image. A value like 2 will evaluate to 0 often, whereas a value like 5 will be more likely to have a remainder so will come out as 1 or above. You can see how the output scales in the gif above.

I put the normal image in my A slot and the blurred image in my B slot and then, because I was seeing the blurred image more often than the non-blurred one, stuck in a one minus to flip the values around (one minus returns 1 – the input value). This was mostly put in there from a graph neatness perspective so feel free to skip this or to change the order of your inputs in your own graph!

The two samples plus the lerp between them.
The material on a sphere with the modulo input set to 2 to make it easier to see!

The dark patches appearing on the gif above are where the result of our modulo is a negative number. Personally I think it adds to the effect, but if you’d rather get rid of it, a saturate node before the lerp will do the trick. (Saturate clamps between 0-1 in a single ALU instruction, where the Clamp node may represent more than one instruction on some hardware.)

UV Manipulation

Now that we have a nice blurry image, we’re going to make some edits to the UVs to add stretching, chromatic aberration and an era appropriate resolution!

Resolution

The resolution of a VHS is 333×430, so our video should reflect this. I’ve explained this down-res technique in a previous post, however that was in hlsl, so I’ll go over it again for unreal.

Create a scalar parameter or constant for your X and Y resolutions and set them to 333 and 430 respectively. Append them to create a float2 value, then floor this.

Multiply your texture coord with this to create a grid of your image. Once the grid is created, floor it, then divide by the resolution. This will take your tiling back down, but because of the floor, it will be clamped to the grid we initially created.

Stages of the maths for lowering the resolution.
Nodes for lowering the resolution.

This can then be used as as the UV input for your video texture.

The shader with various resolutions.

Stretching

The next thing we’re going to add is an occasional stretch of the image.
This is created by multiplying the Y resolution with a lerp between a sine wave and 1.

We use a sine wave so that every time we see the stretch it will be in a slightly different position. Create a parameter for stretch speed, then multiply this with time. Get the sine of this, and we have a basic wave.

Next, multiply this by 0.5, then add 0.5. This takes our wave from -1 -> 1 space into 0 -> 1 space ( -1 * 0.5 = – 0. 5, + 0.5 = 0 then 1 * 0.5 = 0.5, + 0.5 = 1).

Finally, multiply this with another scalar parameter to control the strength of our wave.

For the interpolator, we’re going to use the same modulo logic we used for the blurring. Create a new scalar parameter for how often we want to see the stretched version, modulo that with time, then round it.

Chromatic Aberration

Our final uv tweak is chromatic aberration. This is when we get red and blue around the edges of our image as the channels are offset from one another.

To do this, we are going to replace our single sample for the non-blurred version of the texture with three new samples, two of which are offset.

Take the UVs we made as a result of resolution changes, and add a scalar parameter to it for the offset. Append this with a 1 in the y, then input this as the uv for the first texture.

Take the UVs as they are for the second texture.

For the third, multiply the offset parameter by -1, then add it to the UVs and append this with 1 in the y.

Once these are setup, take the R from the first texture, the G from the second and the B from the third and append these to make a final color. This can then be input to the lerp with the blur.

Node setup for chromatic aberration.
Chromatic aberration on a sphere.

Image Effects

Now that we’ve finished playing around with our UVs and base image, we can start to add the static and other image effects that will make the shader instantly recognisable as being a VHS style video.

For these effects you’ll need a channel packed texture with scanlines, a block of white and the date/time. I recommend putting the date/time on G, scanlines on R and white block on B, to take advantage of differing compression quality between channels.

My texture – do as I say, not as I do! Putting the block on G was a poor choice here.

If you’re using Photoshop, I’d recommend using a scatter brush, then motion blur, then add noise to create the scanlines effect.

Adjustments

The first thing we’re going to do is take the output of the lerp between the blurred and normal video and add some adjustments. Add a power and multiply node, then create parameters for these. The power lets us adjust the gamma of our image and the multiply gives us a color tint.

On a sphere with gamma significantly increased.

Grain

The next thing we’re going to add is a grain effect. This will be multiplied with the output of our adjustments.


Rather than a texture, grab the simplex noise node. We’re going to lerp between noise and one minus noise so that the position of the visible noise changes. (As we’re multiplying, only black areas will be visible.)

The interpolator is a rounded sine wave, so add Time multiplied by a new scalar parameter for the speed, then get this sine of this. Multiply and add by 0.5 as we covered above, then round it so we only get -1, 0 or 1 values.

After this, add another parameter for strength, reverse it using one minus and add it to the lerp. We reverse this because the grain becomes stronger as there is less white in it, but this doesn’t make a whole lot of sense to a user, so this is there to make the inputs more clean. This can then be multiplied by our adjustment output.

Sphere with the grain added – lower gamma makes this easier to see.
Output of the grain.

Scanlines

The next thing you want to add are scanlines. This is where the texture we made earlier comes in. Take the white block channel of your texture, multiply it by a constant float 2 of 1, 75 in order to create a number of thinner lines. Then use the panner node to move this in the y direction. I left these as constants, but feel free to add parameters for speed and tiling!

Multiply this with the grain and adjustments.

Nodes for scanlines.
With the lines on – we’re almost done!

Static

The next effect we’ll add is static. These are the long static bands that really sell a VHS feel.

Like the scanlines, we’re using our texture with a panner, but we have a bit of logic on the coordinates and speed to vary things a little.

Start by taking the scanline channel of your texture and plugging a panner node into it.

For the coordinate, we’re going to create a sin wave that is used to scale the texture up and down. Multiply Time by a scalar parameter for your speed, then get the sine of this and multiply it with another parameter for the amplitude. I’ve called the amp ‘variation’ because it changes how large and therefore how different from the original the texture becomes. Multiply this by your texture coordinate and you have a scanline that scales up and down!

For the speed, we want to pan in the y but not the x, so put down an append node with a constant of 0 in x. Multiply the wave by a new speed parameter (not the same as the scaling speed – coherence creates a less glitchy look), then put this in the y slot. This gives us an ociliating speed.

Add the texture sample to your grain and scanline multiplication.

Static lines added to the effect.

This looks cool, but its no good if it says on screen forever. Multiply this with yet another variation on the modulo that we’ve used for other effects.

Nodes for the static effect.
Less frequent scanlines using modulo.

Overlay

The last thing we’re going to do is add a date/time overlay. Just take the date/time channel from your texture and add it to the previous effects.

After this, you can add a multiplier to the whole effect for a stronger emissive glow.

Overlay nodes.

Parameters

And we’re done! Here’s a screenshot of the parameters I had and the settings I used in the final video above.

Performance

GPU

While this wasn’t really intended to be particularly performant or made with a games application in mind, I’d encourage everyone to be aware of how their shaders affect GPU timing and memory!

This is fairly low on instructions and samples, even with with number of times we sampled the video texture.

Looking at the stats, it took ~0.3ms at runtime, which in my opinion is acceptable even if the video wasn’t the main focus of the scene. If we were using this in a game aiming for 60fps I’d perhaps have some reservation, with 0.3ms being

Memory

Video textures cannot be streamed like regular textures. You can generate mips for them, but they don’t have the same behaviour, so we need to consider that our video will be loaded at all times.

My runtime non streaming memory with this in the scene was 130 MB. That’s a huge amount of memory for a single texture. If this is the singular focus of the scene, it might be okay, but if we’re having this in a larger level it starts to become a concern.

There are a couple of options for making this cheaper if you want to use this technique in a game:

  • Make the video shorter – my video was fairly long
  • Make the video smaller – I just used whatever the default res on my phone was then changed it in the shader, your source video could be low res.
  • If you can’t afford video at all – make an atlas texture out of stills and run through them in the shader.

That’s it! Thanks for reading, and have fun making spooky VHS effects – ’tis the Halloween season after all!

Floating World Shader Part 5 – Ocean Material

This is the last part of the breakdown of my shaders based on work by Owakita. This will probably be the biggest one of all as we tackle the gersner wave ocean material.

I’ve written a number of posts breaking this down, and these can be found here:

Part 1 – Initial Plans
Part 2 – Sky Material
Part 3 – Post Processing Material
Part 4 – Gradient Fresnel Material

Gersner Wave Function

The gersner wave function was made based on this video from the Dreams team. Its a fantastic watch, so I’m just going to pop this here in lieu of going through the graph.

The main change that I had to do to get this into unreal was to replace the loop with repeating the wave function over and over, which causes node spaghetti and makes the system far less flexible.

0e39026e32a4895225f348cebd4f1564

blog15

The bitshifting for the psudo random number had to be done in a custom hlsl node, as there is no other way to convert to int and to bitshift.

blog16

I also did the final calculation in a custom node, as it was simpler to read than trying to drag the pins from each variable in. Honestly, its still a mess. I was really missing just writing hlsl at this stage.

blog17

Normals and Light Stylisation

I had some issues with normals appearing incorrect, which was eventually was down to some dodgy order of operations and some calculations being done in meters when they should have been in centimeters. Caught out by a couple things when trying to move between code and nodes.

ezgif-2-858790595a9f

I rounded the normal in order to give a hard edged, toon look to the shader.

9b478778c7b354907dabc39204061d26

Texturing

blog19

To create the smooth line pattern seen in the concept, I created a tiling texture in photoshop with outline on R and color variation on G.

I used the same smoothstep trick as with the gradient to have a color assigned to black, white and midgrey.

blog22

12ca3f35f65b888b285a05037ed23262

To add the outline, I took the black outline on the R channel of the texture and added the outline color to it. I then multiplied this with the lerped color.

blog24

Foam

In order to make the foam appear on top of the waves, I got the dot product of the surface normal and a vector parameter. This vector was used to control the angle of the foam. This was them multiplied with a noise texture to provide the breakup effect and rounded to keep the toon feel.

blog27

blog26

The outline on the foam was created by taking the above and creating an inverted version of it, with a slightly smaller wave. This multiplied by the original created an outline. This then hooked into the texture outline to receive the same color.

blog29

466716526a04d45f0c8e1df1d9eed190

blog28

All together, we get a nice breakup wave effect.

ezgif-2-282099dc540d

Final Shader

Combine all of this and you get the ocean shader from the original gif!

okiawaGif

Floating World Shader Part 4 – Gradient Fresnel Material

Here’s part four of the breakdown of my shaders based on work by Owakita. This is going to cover the gradient material found on the meshes in the scene.

I’ve written a number of posts breaking this down, and these can be found here:

Part 1 – Initial Plans
Part 2 – Sky Material
Part 3 – Post Processing Material
Part 5 – Ocean Material

Object Space Gradient

I wanted the gradient to run vertically across the object, unaffected by the position of the object in world. I didn’t want to adjust my UV map in order to accommodate this, so decided to do my gradient in object space Z. (Unreal is Z up)

blog12

I used the ObjectLocalBounds node to get the top and bottom of the object bounds in Z (though I did include a mask parameter so the gradient could be used in other directions), then used a smoothstep to produce a 0 – 1 value between the two.

Three Part Gradient

The reference image actually has three colors in its gradient, and I wanted to get as close as possible. To do this, I had to lerp twice, breaking the initial 0 – 1 coming from my object bounds into two parts.

To do this, I smoothstepped between 0 and 0.5, to map the bottom half of the value range to 0 – 1, then smoothstepped between 0.5 and 1 to do the same to the top half. I then used the first value to lerp between two colors, and the second to lerp between the previous lerp and the third color.

blog11

Fresnel

The fresnel effect is very simple, literally just using the fresnel node to lerp between an edge color and the main gradient. This was used to provide the edge highlighting seen in the reference.

1

For context, the fresnel node does a dot product between the input normal (in this case either a normal map converted to world space or the the world space normal of the pixel) and the camera position to determine whether the surface is facing the camera. Facing returns 0, facing away returns 1, so we can use this to assign a color to faces at grazing angles.

blog13

Rock Variation

The rocks also use this shader, but forego the gradient and have a normal map input to the fresnel, as well as a very high fresnel amount, giving a shadowed, two tone look.

blog14

 

 

Floating World Shader Part 3 – Post Processing

Today I’m continuing the breakdown of my shaders based on work by Owakita. Here’s part three!

I’ve written a number of posts breaking this down, and these can be found here:

Part 1 – Initial Plans
Part 2 – Sky Material
Part 4 – Gradient Fresnel Material
Part 5 – Ocean Material

Post Process Material

The aim of the post process was to create an outline around the objects, provide a grainy look and tint the screen color.

okiawaGif

Different Approaches

There were two approaches I considered for this. One was the kernel based edge detection I used on a project a couple years back, and another was the simpler sampling depth offset technique found in the UE4 stylised rendering example.

Ultimately I went for Epic’s approach, as while it may have been slightly more expensive for the amount of times it sampled depth, it was far simpler to setup and read later down the line. For this project I was really focused on the aesthetic over performance or tech, but I do still like to consider these things.

Determining Line Width

I started off by creating a single line on one side, by by getting the screen uv and offsetting it. I then multiplied this by screen texel size so the offset appears to be the same width, regardless of screen resolution.

width
Node graph for offset UV. 

Subtracting one channel of this value from the scene depth will give a single line edge, but we want an edge on all sides!

blog5
Scene with an outline on a single side.

Creating An Outline On All Sides

I then split this offset into its U and V parts and multiply each by minus one, leaving us with four sets of offset UVs, as seen in the image below. These are then used to sample scene depth, which creates four different samples of the depth, all with a slight offset in one direction.

explaination
Diagram showing how depth sampled with offset UV’s combine to create an outline.

Subtracting these from the initial scene depth then adding them together leaves us with a nice combined outline!

Sample Depths
Node graph for combing offset UV samples.

blog6
The scene with an exaggerated outline.

Depth Based Line and Wireframe Fix

With this approach, we start to get the internal wireframe being outlined at distance. As a fix, we take the scene depth, divide it, then take one minus this (as UE4’s depth is flipped) then clamp it. This is the multiplied with the outline. This lowers the outline amount for these faces.

blog9

Capture

I later added something very similar to the initial outline calculation, where this was multiplied with the result of the texel size multiplier. What this did was take the depth and as the object gets further away, reduces the size of the line. This allowed me to not lose detail at distance and stopped blobby looking outlines.

blog8

Putting It All Together

One this outline is created, it is used as the alpha to lerp between the line color and the scene color. Here I’ve multiplied the scene color with a texture and color to add a bit of grain and color tinting.

color
Node graph for the combined result.

Final Result

result
Sphere showing the final result of the material.

options
Exposed parameters for the material.

blog7
Final result in the scene. 

Floating World Shader Part 2 – Sky Material

As talked about in my last post, I’ve been working on some shaders based on work by Owakita. Here’s part two of the breakdown!

I’ve written a number of posts breaking this down, and these can be found here:

Part 1 – Initial Plans
Part 3 – Post Processing Material
Part 4 – Gradient Fresnel Material
Part 5 – Ocean Material

Sky Material

9a1e8e847636d86ea7737b20299d1077

The sky material for this project was pretty simple, as I made a copy of the base sky material found in the construction script of BP_Sky_Sphere, and replaced that reference with the copy.

blog1
BP_Sky_Sphere Construction Script

Inside of that copy, I replaced the scrolling clouds texture with my moon, and the stars with my stars. I also added an additional cloud speed parameter so that I could control the speed of the stars and moon separately, for a nice parallax effect.

blog2
Texture samples that need changed in M_Sky.

The most challenging part here was creating the moon texture. As it has such a large area to cover and is projected over a sphere, I had to get the moon shape in the correct area of the texture and bend it appropriately so that it looked correct on the sky sphere mesh. I got there after a lot of trial, error and free transform!

blog3
The star and moon textures I created. 

For the colors, I left the material as is but overrode the light based colouring in the details menu. I then tweaked zenith and horizon color until I got close to the reference image.

blog4
Tickbox for turning off sun position based color and color controls.

That’s all there was to it for the skybox! Next post will look at the post processing effect.

Floating World Shader Part 1 – Initial Plans

Over the bank holiday I worked on a number of shaders in UE4 based on work by Owakita. I love her dreamy, pastel aesthetic and wanted to try it for myself.

I’ve written a number of posts breaking this down, and these can be found here:

Part 2 – Sky Material
Part 3 – Post Processing Material
Part 4 – Gradient Fresnel Material
Part 5 – Ocean Material

okiawaGif
The finished product!

comparison
Comparison between Owakita’s original work and my recreation of it.

Reference Breakdown

Initially looking at the work, I broke my project down into a post process, gradient and gersner ocean material. In future blog posts I’ll be covering how I did each of these stages!

Untitled-1

At this point I listed some features I thought each shader should have, but this did change a fair bit over the course of development.

Useful Blender Things

I’m between 3DS Max licenses at the moment, so it seemed a good opportunity to try and learn blender! This has been so frustrating, but hopefully worth it to learn what is becoming more and more of an industry standard.

This is just a dump of some of the shortcuts and tools I’ve used so far so I can come back to it! Will probably just add to this post as I go.

Shortcuts

Ctrl-B – Bevel

Ctrl-R – Edge Loop

S-X/Y/Z – Scale in x, y, or z axis

R-X/Y/Z – Rotate in x, y, or z axis

Tab – Go between edit and object modes

A – Select All

Shift-A – Creation Menu

Object Mode – Ctrl A – Rotation and Scale – Freezes all transform data

Tools

Modifier Menu – Mirror

Edit Mode – Mesh – Normals – Flip

Edit Mode – Mesh – Normals – Recalculate Outside

Edit Mode – Mesh – Normals – Average – Custom Normal (Good quick smoothing results)

Gotchas

Negative scale will flip normals randomly, freeze scale then recalculate outside.

 

 

Applying For Technical Art Jobs

Introduction

This is a post about how to apply for technical art jobs. I’m going to cover the actual definition of technical art as a job role, how to know if you should apply and how to structure your CV, portfolio and cover letter.

The reason I’m doing this is that I continually see applicants where they might be a good technical artist and good fit for our team, but its difficult to tell where their skills actually lie. Its rare I see an application for a bad technical artist…most of the time they’re just not one at all.

I’m hoping by writing this I can help people show off their skills and get more technical artists into the industry – we really need them!

Why Should You Listen To Me?

You should definitely take everything in this post with a pinch of salt, as I’m only talking from my own personal experience. However, I’m a Technical Artist who’s coming up on six years of experience in AAA, AA and indie. I’ve been involved in recruitment for about four years and have screened applications for and interviewed Technical, Lighting and VFX artists of all levels. So I’ve seen a fair amount of applications and made a few myself! While I’m basing this off of professional experience, this is purely my opinion and doesn’t represent that of my employers, past or present.

I’m by no means perfect and I’m sure people could find a lot of issues in my folio and CV, but I’m hoping this advice can help folks who are struggling to get interviews or jobs.

If you’re applying for senior or above positions, you probably already know all of this. This is aimed at graduate to intermediate TAs.

So what is a Technical Artist Anyway?

The real answer to this question is what the job advert says a technical artist is. Every studio defines the role differently. However, there are some key skills that crossover for most jobs, and certain skills that compliment each other nicely.

Generally, I’d expect a TA to have a minimum of:

  • A specialism in an area of art (e.g environment, lighting, vfx)
  • A solid understanding of the potential performance issues of that specialism
  • The ability to diagnose those issues through performance profiling tools
  • Knowledge of common optimisation techniques for the specialism and the ability to come up with new ones
  • One scripting language, that they use to make tools for their specialism
  • Some form of shader creation, be it node or code

I’d expect a more experienced TA to have worked with multiple art disciplines and know more than one scripting language. They should also have worked with industry standard profiling tools like PIX and Razor if applying for console roles.

If your skillset looks more like:

  • Animation
  • Rigging
  • MEL/Maya Python
  • Animation implementation in engine

I’d call you a Technical Animator. Some studios differentiate between the two roles, some don’t. Don’t be surprised if this skillset is not landing you Technical Art roles – they may be looking for the optimization/shader based skillset above. If you’re having this issue, start looking for specific Tech Anim roles.

Smaller studios combine Technical Art roles with Lighting or VFX, so it can be helpful to have skills in this area. Make sure your core TA skills are up to scratch first though.

A TA coming from a code background might look a bit different, with more emphasis on the technical and programming aspects of the role.

Ultimately you need to be someone who can demonstrate that they understand code and art and can combine those things in a way that supports a team.

Advice for Beginner TAs

Though you’ll need to be flexible and will likely need to expand your skillset to move up, here’s some groups of skills that compliment each other well. If you focus on one of the specialisations below and have one thing on your portfolio representing each of the requirements, you’d be off to a strong start. We’ll cover how to actually show off these skills in the portfolio section later on.

This is just advice for those who are struggling to define a skillset. One of the best things about tech art is getting to build your own specialism out of random things that you like, so I’d encourage you to go beyond and just work on projects you think are cool – you’ll get better results that way too!

Technical Artist – Lighting/VFX Focus

Required: Lighting, Technical Lighting and Rendering Knowledge, VFX, Shaders, Profiling
Additional: Vector Maths, Houdini (with Python or VEX)

Technical Artist – Asset/Environment Focus 

Required: Asset/Envrionments, Profiling, Maxscript/Python for Max, Shaders, Engine Tools (Blueprints/C#)
Additional: Substance Designer, Substance Painter, ZBrush, Houdini

Technical Artist – Tools Focus

Required: Any combination of Maxscript, MEL, Python, C#, C++, SQL, Javascript etc. used specifically for art tools.
Additional: Some form of art work – environment, assets, vfx etc.

Technical Animator

Also listed as Technical Artist (Animation) or other derivatives.

Required: Rigging, Maya, MEL/python, Animation Systems in Unreal/Unity, Character Modelling
Additional: Motionbuilder, MoCap Experience, Marvellous Designer

UI Technical Artist

This is a highly specialised role that normally only exists in large AAA companies.

Required: UI Design, UI Implementation (blueprint/C#), Shaders, Good Understanding of Game Mechanics  

Soft skills

These are important for any TA regardless of specific technical skills. Some of these come with experience, but you can develop them when thinking about personal projects.

Problem Solving
  • Ability to learn and adapt to new technologies quickly
  • Strong problem solving alongside the ability to bring ideas together to form new solutions.
  • Google-Fu! I often tell people that my entire job is googling stuff and I’m only lying a little bit. Being great at finding and implementing new knowledge is key to the role.
Teaching and Communication 
  • Ability to teach and communicate complex technical concepts in a way that makes sense to the art team.
  • Good standard of documentation/informative writing in the language the company uses.
  • Willingness to be the ‘bad guy’ in a kind but firm manner. Having to cut features or heavily optimise areas can result in tense relationships with the art team. Being good at navigating this is always a plus, but is generally a skill you’ll learn on the job.

Apply For The Right  Job

Read the advert!

Now that you know whether you have the appropriate skillset to be a technical artist, lets think about the specific job you’re applying for. Use the above information to identify whether the job focuses on tech art or animation, and look at your general skillset. Does it match what the main responsibilities of the job are? Here are some things to consider and some things to ignore.

What to Consider

  • Responsibilities
    • What are they actually asking you to do? Can you already do these things or could you learn to do those things in a reasonable time frame? Be honest with yourself.
    • You don’t need all of it, but you need enough to know that you could carry out tasks asked of you.
  • Skills
    • This is where they ask for specific technologies, languages or skills. As discussed below languages and tech are transferable, but you do need to have the appropriate base skills and knowledge.
    • Compare each of your skills with the list of skills requested. If you have more than half of the skills listed and some overlap with the rest, it’s worth applying.
    • If you have a quarter or less this might not be the right position for you – refer to the above about different tech art paths.

Parts of the Advert to Ignore

  • Education
    • Unless you’re looking for a visa, if you can do the job, it doesn’t matter where you learned it.
  • Years Experience/Seniority
    • Companies will consider you with less experience or take you on at a lower level of seniority. Absolutely apply for the position above where you’re working at.
    • Do be realistic about this however. With senior and above roles experience is needed to make solid decisions that affect the whole project. If a studio is asking for 7 years experience and you’re a graduate yoir application won’t be considered and could hurt your chances of getting an appropriate job with them in the future. You could always put in a speculative application asking if they are looking for artists at your level if you really want to work there.
  • Particular Technologies or Languages
    • If you know one scripting language you can learn another. If you know 5 you can learn another really fast.
    • We’ll discuss in the CV and Cover Letter sections how to show the crossover between different languages and technologies and explain your capacity for learning.
  • Anything in the additional requirements section
    • This is all stuff you’ll be able to learn on the job. If there’s a lot of competition it will give you an edge but that’s fairly unlikely.

Your CV

Ok! So you have a TA skillset, you’ve found a job advert that matches your skills and experience and you’re ready to apply. What now?

Lets start with your CV. Your CV should be as short as possible while still conveying your experience and skills. It shouldn’t be more than one page if you can avoid it. I’ve just gone over one page this year and I’m not happy about it! Hiring managers look at applications on top of their day jobs – they don’t have time to work out if you can do the job, you need to show them immediately.

Layout and What to Include

I’ve generally had success with my CV layout, so feel free to steal it if you like. There are a lot of different options here, and lots of advice and templates available online. Generally, I want to be able to see your shipped titles, skills, languages/tools knowledge, experience and education, in that order. Some may also include a personal statement about career goals, but I like to put that in the cover letter.

Shipped Titles

If you have at least one professional shipped title, this is the first thing I want to see. If you have a fairly high profile shipped title, even better.

You can put student or self-initiated projects on here, but be sensible and limit the number you list. I don’t want to see lists of game jam games (you can add a section for this under experience) but a title that you spent a fair amount of time on and released would be fair game. You need to walk a line between showing that your non-professional experience is relevant and looking like you’re lying about the status of things you’ve made. Its tricky. Err on the side of caution, and if you’re unsure get a second opinion.

Skills, Languages and Tools

This should be a concise list of the skills, languages and technologies you know and have worked with. I separate these into different lists as I’ve had exposure to a fair amount of different areas of work, but if you have less to list it could be rolled together.

One thing we see a lot that no one likes is ‘skill bars’. Something like the image below. (This is the first image on google images – not intended to single anybody out!)

Image result for skill bars on resume

Please never do this. The scale is completely arbitrary and it means nothing to an employer. Is your 10 the same as our 10? If you’re only a 2 does that mean you’re useless at the skill? It never comes off well.

If you’re concerned about misrepresenting your skill when you’ve only used something for one project or don’t have a strong foundation in it, you could always list the skill as ‘working knowledge’. I do this on my CV as I have made a couple of MEL and C# tools in a production environment but in general my exposure has been limited. I’d need to spend some time training my skills up if I was to use those languages on a daily basis.

Capture.PNG

This is only my way of doing things, and I’m not convinced its a great solution, but it is far better than skill bars.

Experience

List your most recent professional experience first. If possible, list project names and then the responsibility for those projects underneath. I find it helpful as depending on which stage of production you were involved in and what platform the project was on, the skills used can be quite different.

Be as clear as possible about what you did and what tools you used to do it. Use technical language where appropriate and try to convey how in depth you went.

If you’re under NDA, you can still write something, just talk in broad strokes. An example I have from an unannounced project:

Developed export pipeline tools for 3DS Max and Photoshop.
Investigated shader needs, art budgets and technical requirements for various prototypes. 

While those two sentences are incredibly generic, they immediately say what tools I’ve used, what languages I’ve used (because I’ve listed the languages I use for those programs elsewhere), and the type of work I’ve been doing for the company.

Non-Games Experience

Absolutely include any experience that is games adjacent like working in tech or animation.

If you have professional games or games adjacent experience I wouldn’t bother adding other jobs. Personally, I don’t include my experience working in office administration or hotel kitchens as there are no transferable skills there that aren’t already covered by my professional technical art work.

If you have no directly relevant experience do include these jobs, but keep it brief and emphasise only the relevant skills such as teamwork and taking direction.

Projects

This is an optional section, most helpful to those without or with little professional experience. Write it in the same manner as your experience section, but feel free to include student projects, game jams or other self-initiated work.

Emphasise the technical and soft skills utilised as part of the project, and mention any accolades and releases.

Education

If you have experience, make this section as small as possible. Real experience beats education every time.

It is however worth listing your degree title, classification and university. It is helpful to know the background your coming from as it can show that you understand the teams you’ll be working with. Not listing the classification can sometimes appear like something’s being hidden, so worth popping it down.

If you’ve completed any training courses that are well known and regarded it may be worth putting them here, especially if it fills in a gap that you didn’t get from your degree. Don’t list every Udemy course you’ve done though!

Don’t bother listing courses or grades from high school, they’re irrelevant. I don’t list anything pre-college.

If you don’t have a degree, that’s fine. You don’t need to justify not having the piece of paper if your work is good.

Awards

This is another optional section, depending on if you have awards and how much you want to emphasise them. Personally I no longer include this, as all the awards I have are from when I was a student. I think they were very helpful when they were fresh though, so if you’re a grad with some awards under your belt show them off!

If you’re wondering how to get an award – apply for EVERYTHING. Our student project Seek ended up with a TIGA award, a BAFTA award and got me in 30 Under 30. We never thought it was good enough for any of this, but we applied anyway. It doesn’t take long to write up an application for these things so just go for it.

What Not To Include

The only thing I can say without a doubt not to include (beyond skill bars) is anything that comes under protected status, such as your martial status, age or gender. Some of these can be implied by other parts of the CV, but you want to avoid giving anyone any reason to not employ you that isn’t directly to do with your ability and experience. Unfortunately we all have implicit biases that can get in the way of our ability to accurately judge an application. This includes putting a photo on your CV, at least in the UK anyway. I’m under the impression this is more common in other countries –  best to check with someone who works in the country you’re applying to work in.

Personally, I don’t like to read about people’s hobbies or clubs (unless its something like a Game Development Club, in which case list the projects you did there in the projects section) as this is something I can talk to them about in an interview. To me this comes across as padding, but I do know some hiring managers who like it. Exercise your own judgement.

Your Portfolio

You know you’re a TA. You’ve written about your experience. Now its time to back it up. Your portfolio is your chance to shine, to prove that you know the skills and tools you’ve listed in your CV and that you can create work that will benefit the studio you’re applying to.

What Should You Include?

You should include pieces of work that fit the skills and technologies you’ve talked about in your CV and that reflect the skills most commonly asked for in job adverts. I shouldn’t be able to mistake your portfolio for that of an environment artist, or any other job role in the industry. It should scream technical artist. I want to see shaders, tools, optimisations, technical solutions and a small amount of art.

Environment artists are often given the advice that one good environment is better than many mediocre ones. This is true for us to some extent. You will be judged on your weakest piece, so make sure to cut anything that isn’t up to scratch. However, one piece is rarely enough to show the range of skills a tech artist has, unless you’ve embarked on a monster project with art, tools, shaders and it runs really well. A couple of different things that show your range is fine.

Keep the amount of work from your art specialism low, unless you are very confident that it is comparable to that of at least a junior in your area. If the first person who sees your application is a non-technical Lead Artist and they’re not impressed with your art skills, it doesn’t matter that your tools and shaders are fantastic. Include one piece like this to show you know the pipeline, but more isn’t really necessary unless you’re applying for hybrid roles.

What Shouldn’t You Include?

Don’t include any skills that are not directly relevant to technical art or directly relevant to the art discipline you intend to support. This means that I don’t want to see your life drawing, photography or ZBrush sculpts, even though there’s no doubt that those things will have helped you become a better TA.  I might want to see the sculpts if you were making ZBrush tools – it all comes down to relevancy to technical art, and to the jobs you’re applying to. 

Another thing I don’t want to see is anything straight from a tutorial. There’s no shame in using tutorials, in fact we are all still learning, so its likely that whoever is looking over your application has followed the same tutorial and recognises it! Make sure that your work has your own personal spin on it – show that you gained an in-depth understanding of the technique or concept, not just copied what someone else did line by line.

Presenting work

Good presentation is very important! Good presentation should show exactly what you did and show it off in the best light.

If you didn’t do everything for the piece, explicitly state what you did do, with details about the tools and languages used. For example, if you have screenshots of an environment, did you do the models? The shaders? Tools for placement? Let us know! If at all possible, isolate the elements you did so that its super clear and present quick breakdowns.

Choose the best method of presentation for the piece. Make sure anything with movement or lighting is shown in video and make videos talking through tools.

If you can include a downloadable version or source code, please do! Not everyone will actually look at these, but if we’re unsure about how technical you are this will tell us very quickly.

What about Works in Progress?

That’s why I have this blog. I post things I’m working on, tutorials and personal notes on here. It shows potential employers that I’m keeping up my skills, even if I’m not producing full portfolio pieces. 

A blog is also a cool way to show your writing skills – documentation is a big part of the job, so showing that you can write is helpful. 

If you’ve followed tutorials without making it unique, throw it on your blog with a link to the tutorial.

What about work under NDA?

With any professional work, always check with your manager what you can and can’t show. Show as much as you can without breaking any rules. Optimisation and tools work is the most likely to be affected badly by NDAs. In this case, just describe the work the best you can and put up a video from an official channel of the area of the game you provided this work for.

Many workplaces will not let you put work on a folio but will let you send work straight to a company you’re applying to, so if you are in a position where you can talk about applying to other places this is worth asking about.

Unfortunately we cannot judge what we cannot see, so if you have skills that you can’t show due to NDA, take what you learned and apply it to a personal project that you can show. I know it feels unfair that personal time has to be put in here, but there’s not really any other option.

Your Cover Letter

Many people don’t write cover letters these days, but I think its an essential tool to bridge the gap between the job advert and your folio/CV. The main goal of this letter is to explain how the experience and skills you’ve shown off in your folio/CV can be applied to the company. The first person who sees your application is rarely a technical artist (often an internal recruiter or a lead artist), so this lets that person tick your qualities off against the advert. Its also an excellent space to explain how transferable your skills are, especially if you don’t quite fit what the posting has asked for.

In terms of formatting, I like one page with a polite opening and closing in addition to four short paragraphs of actual content.

First Paragraph

This should be a short and sweet paragraph with some general information about you. You want to include number of years and shipped titles alongside a general overview of your experience. Including what stages of production you’ve seen here is very helpful – many studios want to see a full cycle, but having closed one project and done pre-prod for another is just as useful. This should hook them in and show what you can do for them.

Second Paragraph

Again, keeping it short, this should show what you like about the company and why you want to work there.  You can talk about team size, environment, technology, projects, whatever it is that appeals to you about the company.  This needs to be tailored to each job. This is what they can do for you.

Third Paragraph(s)

This will likely be the largest part of your letter. Here we want to provide that ticklist I spoke about earlier. Compare the responsibilities listed on the advert with your experience. Show that you’ve done this job for someone else, so you can do it for them. Grab key words from the description and use them when describing your experience.

This is your chance to show how skills not listed in the advert are relevant to those that are. Here’s an example of comparing the need for node based shader creation in UE4 to experience with in-house node tools and HLSL.

Though I have spent the last year programming shaders in HLSL, I am also familiar
with node based shader and script authoring, having worked with a similar node based system while at [COMPANY], creating visual effects and object behaviours through node graphs. These activities gave me a strong grasp of vector maths, operands and logic, which I can bring to material creation in Unreal 4.

This also works well for comparing different engines and art creation tools.

Fourth Paragraph(s)

This is a chance to expand on your skills a bit, to talk about what you like and to highlight parts of your folio. If you have a specialism, tell them what it is and how that can help their team.

After this, end the letter by thanking them for reading.

Conclusion

That’s it! With a good cv, folio and cover letter sent to the right job posting you should be on your way to getting an interview. I’m afraid you’re on your ow  from there!

I hope that this information has been helpful to you and good luck with your applications

One Last Thing

Writing this took quite a bit of my time! I don’t have a ko-fi or anything like that but if this was valuable to you and you have some cash to spare please consider donating to Gateshead Foodbank. It gives out emergency food parcels to those in need in my local area and is a cause close to my heart.

MZP for Maxscript Distribution

The Issue

Figuring out how to get your scripts out to a team can often be a tough one! Just throwing your scripts out there is simple, but that leaves artists having to copy lots of files or explicitly run things. This isn’t their job and takes up their time. It also leaves so much room for user error!

MZP files, while not perfect, are designed for distributing maxscripts, can be easily version controlled and are easier to create than an exe. (For info on creating exe files with NSIS see Jeff Hanna’s tutorial.)

With an MZP, the user only needs to worry about getting the latest version of a single file* and can then install it by dragging and dropping it from a windows folder into their 3ds max viewport. It handles any file copying or scripts that need to be ran on installation.

6a67aecd550a29a212ea56783be7ab0f.gif

*Please version your scripts separately, especially if you work with other TA’s! You’re not going to be able to diff on this as it’s a zip file by another name. You just don’t need to point artists towards these scripts. 

An mzp is a 3ds max variant of a zip file, which contains the scripts to be installed alongside a script that will run when the zip file is dropped. To make one, bundle your scripts, along side a .run file (covered below) into a zip file, then change the extension to “mzp”.

934a4ad556d5618c74d6e41939b75536.gif

.run File

The .run file is a batch file that is run when the mzp is dropped. This can run command line commands in addition to the ‘drop script’ – a single maxscript file that will be run when the mzp file is dropped.

Here’s an example of a .run file. It contains the name and version of the script, copies some files, runs a script then clears temporary files.

name “myMZPDistro”

version 0.1

treeCopy “myMZPDistro\Scripts\*.*” to “$maxData\scripts\Tools”

treeCopy “myMZPDistro\Config\*.*” to “$maxData\scripts” noReplace

move “*.max” to “$scenes”

drop “myMZPDistro\Scripts\DropScript.ms”

clear temp on MAX exit

Copying

The treeCopy command copies everything from one directory to another.
The first command copies everything from scripts to the user’s 3dsMax folder, found at \AppData\Local\Autodesk\3dsMax\2019 – 64bit\ENU.

The reason I do this is because my tool is split into many scripts (using my fake class method) and I need to explicitly reference them in order for the main macro script to run. I’d recommend using this folder even if you have a single script – every user will have it and nothing will be stored in temporary files!

The second treeCopy command copies a second folder only if the folder doesn’t exist at the destination. This noReplace option is really handy for things like user settings, especially if you’re in a production environment where you update the tools often.

mzp

Drop

The drop command is used to run a single maxscript when the mzp file is dropped into the viewport. This script should handle any 3ds Max functions you need to happen on installation.

My dropscript here is used to fileIn the main script so that any buttons or shortcuts associated with the macro script are updated. The user is then informed that this has worked. If the script couldn’t be ran because of an error, the user is notified.

There’s not a lot that can go wrong at this stage unless you’ve set your directories or treeCopies up wrong, but it is best practice to add try catches in there to avoid any possibly of silent error. Something as simple as “its broken, contact your tech artist” is infinitely better than things not working without the user’s knowledge.

try
(
fileIn “myMZPDistro.mcr”
MessageBox(“Succesfully Installed Some Tools!”)
)
catch
(
MessageBox(“Something went wrong. Please contact Amy.”)
)

Clearing Temporary Files

Clearing temp is important as by default scripts are stored in temp when the mzp is run. We never want to run scripts from a temporary directory, as these may be cleared. Instead copy scripts into a suitable directory, like $maxData, then use the command:

clear temp on MAX exit

Packaging it Up

Once you’ve created  your .run file and dropscript, its as simple as organising the files into a structure that works for you, then selecting the scripts folder and the .run file, right clicking and selecting Send To > Compressed Zip File (or making the zip file in your program of choice).

Once that’s done, make sure you don’t have file extensions hidden by going to File > Change Folder and Search Options in a windows explorer window, then unticking Hide Extensions For Known File Types on the View Tab.

Capture2

After that, press rename on your zip file, then change zip to mzp. Drag it into a 3ds max viewport, and you’re done!

 

 

 

 

Eldrich Blast VFX

This is a small magic effect I’ve been working on, based on my Fey warlock D&D character. D&D spells are a nice way to find inspiration for vfx.

162125fbd0a938fb9c6f4929ec1d9480.gif

Magic attacks like this are new to me so I learned quite a bit doing it!

Turns out Unity’s default particle trail rendering isn’t great as it tried to construct the trail on the fly – you can see the “kinks” at the start and end of the trail.

I used the minimum and maximum filters in photoshop to make the textures. This is great! Really nice way to make wispy ethereal shapes without much painting.

Capture.PNG

It was also interesting to experiment with how shapes change when applied to different particle types/stretched along a trail – I used Rafles breakdown to learn how to shape a trail texture and I’m happy with how it turned out.

A last minute addition to the effect was the diamonds on the ground. I was ready to call it even though I wasn’t 100% happy, and grabbed a gif. Seeing the effect as a thumbnail helped me see that it didn’t look connected to its environment, so added the floor particles to ground the effect a little.

I picked up on a few things I need to work on during this, particularly to do with my process.

Firstly, I need to use more reference! With environmental or realistic effects I always use reference, but with this qnd with the less realistic effects I’ve made, I was sort of winging it. Effects still need to be grounded in reality even when they’re completely fantastical. The effect improved when I looked at bullet impact references and realized the impact aura should shoot towards the caster, not away from them.

In addition to reference, with multi-part effects like this one, storyboarding could be very helpful – I’m not sure i ever had a clear idea of what the effect actually was!

In terms of the effect itself, the anticipation and impact could be stronger and the pink colour is a little too saturated. Better use of reference and defining a colour scheme as part of planning should help these along.

Looking forward to taking these lessons into the next effect!