Shaders For Game Programmers And Artists

[Zita Lifland]

Ideallytech art, but as a role definition, it can be a little fluid. We have 5 tech artists, and we all have fairly varied skill sets. In practice it usually comes down to the individual. We have a graphics programmer who is a fantastic artist, we also have a vfx artist who writes all his own shaders. Titles, in this area, is an ongoing debate in our studio(s). ;).

Forget role definition. The guy who should be making particle effects is the guy who can make good looking particle effects. The persons skills determine what role they take, not the other way around.

From my experience shader writing is a specialization within TA, not really a common skill. Also most TA with this skill work more as shader mockup writers for R&D purpose, and the render programmers will re-write the shaders for actual production.

That said, knowing the basics about how rendering works, what the costs are and so on without having to know how to write actual shaders (the exact math and shader language), is a basic skill for any TA in the art pipeline (and like Rob said not as important for TA in the animation pipeline). Learning how to write shaders is one way to get that basic skill, working with art optimization and profiling tools is another which I find more common.

What an artist thinks is important and what a graphics programmer thinks is important is often two different things, so it is imperative that a graphics programmer has a technical artist to bounce ideas off of and that a technical artist has a graphics programmer for ensuring the best, most efficient methods are used.

Finally, Kees Rijnen and I created ShaderFX, a plugin for 3ds Max that allows the user to create shaders in a node-based interface (a bit like the shader editor in the Unreal engine.) You can wire a series of nodes together, see the results on your model, and then look at the output shader code. This is a good way to get what you want and then see how it works under the hood. You can download a free version of ShaderFX here:

I first heard of WebGL several years ago when I started going to JS events, and by listening to some talks in local meetups. I had no idea what they were talking about, nor I was that savvy with JS. I'd forget about it after I'd heard of it, even when it looked amazing what they would say one could do with such technology.

I discovered the world of WebGL and Canvas API in the summer of 2019. I've been learning ES6 for a year and a half, on/off, at this point. I participated as one of the artists for JSConf EU in Berlin, by creating an art piece with pure HTML & CSS for an installation in the shape of a multi-screen mural.

When I saw what the artists working with such JS-based technologies were doing, it blew my mind! I started asking my new developer friends how they managed to do that [and spying on them too]. I started following more digital artists, creative coders and creative developers on social media, researching articles about the topic, watching video tutorials... I was hooked.

I finally understood the bridge between art + tech. I've known it for years, but it felt like something so far away from my reach, I could have not ever even considered searching on how one does that in the past. For the first time, I wasn't lost on the way, since I now could write and understand some JS.

Now, not all art + tech work is done entirely with JS. There're other programming languages in the field, like Phyton, C#, and other C related languages. But, so far, my current interests focus on JS and shaders.

[preface] There are probably 100x more resources on the web about how to get started with shaders. I am sharing here the links to resources that have helped me to learn shaders. This doesn't mean it's the best or only way to do it. Every person learns differently. What worked for me, might not work for you. Take this list of recommendations with a grain of salt.

That first time that I browsed the online book, I understood nothing. You see, shaders employ GLSL and not the JS language. It's a C-style language, and so I had to grasp my head around this new language slowly.

I've taken all the courses by Matt DesLauriers at Frontend Masters. The canvas and WebGL course talks a bit about shaders, but the advanced WebGL and shaders course goes more in-depth on the shaders topic and how to use them with ThreeJS.

I browse on/off Shadertoy, which is an online platform/community to share shader code. I read and try to learn from the code others post. There are some pretty sick shader designs there, that when I see the math, I honestly don't think I'll ever be into that level, but that's ok.

At the end of 2020, @MAKIO135 created a creative coding resource, including a section dedicated to GLSL shaders. He pointed out many tips I've already shared here, but there are other recommendations as well as code samples of his shader work.

I made my way through Bruno Simon's recent Three.js course released in early 2021. There's a whole chapter going thoroughly on coding shaders with inspiring examples. He explains practical ways to code fragment and vertex shaders while using ThreeJS.

While we tried to satisfy most of the content creators requests having such an approach allowed us to closely control the quality of shaders making sure we were not supporting unnecessary features and had fairly optimized shader code at the same time.

My advice for people using these type of systems is to give guidelines and set limits where possible early on for the artists. Additionally, work early with your technical artists to create a base material library. You should only have a handful of artists creating materials, and the rest of your artists just override textures, colors, and other pluggable parameters. Think of it like an expandable ubershader system, where your tech artists are the ones making the base shaders.

In the system you reference (Frostbite) there are mechanisms to allow Technical Artists or Rendering Programmers to author base shaders which are then used by the object artists. The object artists may augment the shaders with extra nodes, but the base functionality is controlled by technical staff.

Finally, and most critically, we can look at real world examples of games that use graph based shader systems and realize that they are among some of the most successful games of this generation. (Notably, every UE3 game uses it, and many are VERY successful).

While I think that the alternative you mentioned is actually a much simpler process for managing shaders, I think that staying away from graph based shaders for fear of the artist is possibly archaic thinking.

The ubershader approach is nice, in my former company we did push it further, we had a parser that generated a 3dsmax material plugin (script) for each (annotated) .fx file, some components in the UI were true parameters, others were changing #defines, when the latter changed the shader had to be rebuit, everything was done directly in 3dsmax, and it worked really well.

I want to remark that the coders-do-the-shaders approach is not good only because performance matters. IT IS GOOD EVEN ON AN ART STANDPOINT. Artists and coders should COLLABORATE. They both have different views, and different ideas, only together they can find really great solutions to rendering problems.

We also shipped two games (both multiplatform PC/PS3/360) using a graphical shader editor, we had no problems with it producing good results and performance. Generally shaders were designed by technical artists and programmers, otherwise they would need approving through a TA. I wouldnt write off these graph editors without looking at some sucessful systems, they can be designed in more than one way.

If you decide to author these predetermined shaders using a graphical interface, used by a programmer or programming-savvy tech artist, that is an entirely different issue and not one I object against. And anyone proficient in the English language should have been able to read that out of what I wrote above.

I'm very interested in arts, maths and programming that's why i started to study computer graphics ( before i know that there is a technical artist role ) but after i know it i get confused knowing what the key similarity and difference between both of them.

A graphics programmer on an engine team will work with APIs like D3D/GL in order to implement rendering of features, like deferred shading or shadow mapping, as well as general stuff like scene management, and generic shaders. They'll also work on tools, such as importers for art files, and have to work with artists as their clients. A graphics programmer on a game team will also work on game-specific special effects, post processing and content challenges.

A tech-artist is not as likely to use D3D/GL/etc directly, and won't likely work on engine features such as scene management. They are the glue between the artists and the programmers though - so anything on that interface is stuff that they will work on. That includes shader code, importers, exporters, plug-ins and scripts for art tools, automation of processes such as baking, helping with naming conventions, and making sure that artists actually follow the right conventions. They also should know how to use all the art tools that they're writing plugins/exporters/scripts for (but they don't have to be a good artist - just have the technical knowledge of artists work flow).

They also should know how to use all the art tools that they're writing plugins/exporters/scripts for (but they don't have to be a good artist - just have the technical knowledge of artists work flow).

I'm willing to spend some time of course sharping my art skills (i'm already familiar with software like Maya, Blender, ZBrush, Photoshop, Unreal, Unity) but as my whole life I've been doing programming and I've never take art class will this be an obstacle for me, and if yes how to overcome it?

Don't worry, I know some technical artists, who started in the industry as programmers, but later successfully switched to tech art. In every company tech art means something a bit different, but usually you are responsible for some combination of:

3a8082e126