Game Design Courses

Syllabus

DIGM 512: Shader Writing and Programming

Winter 2012

Dr. Paul Diefenbach

pjdief at drexel dot edu

Office Hours: By Appointment

 

Course Description

Development of custom output shaders allows for the use and manipulation of materials for use in production render engines. This course focuses on the basic components of shaders including reflective, translucency, and illumination models.

Course Purpose

This course will introduce students to shaders for both real-time and non-real-time rendering. 

Expected Learning Outcomes

This course will teach the basis of both real-time and non-real time rendering, and the lighting equations associated with each.  Students will learn to write programmable shaders and use tools to create new shaders.

Format

Classes will be a combination of:

  • ·         instruction and tutorial
  • ·         class discussions
  • ·         individual and group assignments
  • ·         lab and presentation period

Class participation is an important part of your evaluation and grade.  In addition, students will be required to work in teams outside of class in the computer labs, doing research online and in books and journals, and hands-on exposure to various video games.


Assignments

TBA


Project

The term project will be done individually or in small groups. Each week after the proposal, the group will give a brief 5-10 presentation on what they've accomplished the previous week, showing off new features, highlighting what worked well, what they have trouble on, and an opportunity for collecting feedback.

Project Proposal (5%) (Due week 6)

Project Status Reports (20%) (Due Week 7, 8, 9, 10)

Final Project Presentation (50%) (Due finals week)


Submission

            Please place your assignments in a folder labeled with your name (first initial, last name) or team name in the DIGM512 "Submission" folder, in the folder of the assignment/project name. The DIGM512 folder is located on DigmFiles, which can be accessed from the labs or using a FTP program on your home computer.

            Projects are to be put in the folder before the start of class, ready for presentation. You must present what you have; there are no late submissions.

 

Grading

15% - Assignments (1-3)
10% - Participation/Attendance
25% - Project Assessments
50% - Project Demo Presentation

Attendance


You are expected to attend all classes.  Class participation is an important part of your grade. Unexcused absence results in a deduction in your grade.  Missing 3 classes results in automatic failure.  If a student must miss class, it is the student's responsibility to contact me by phone the day prior to the missed class.  Students will also be responsible for getting missed notes from the other students.  


Academic Integrity, Plagiarism, and Cheating Policy
http://drexel.edu/provost/policies/academic_dishonesty.asp
http://drexel.edu/studentlife/judicial/honesty.html

Students with Disability Statement

http://drexel.edu/ods/student_reg.html

Course Drop Policy
http://drexel.edu/provost/policies/course_drop.asp

Course Change Policy

The instructor reserves the right to change the course during the term at his or her discretion. These changes will be communicated to students via the syllabus, website announcement, or email






Schedule




Week 1: History and Overview of Rendering


History
Overview of Rendering
Lighting
Local vs. Global
Ray tracing
Radiosity
Rendering Math

History of Graphics


  

Embed gadget




Ray Tracing

http://www.siggraph.org/education/materials/HyperGraph/raytrace/rtrace0.htm

http://www.siggraph.org/education/materials/HyperGraph/radiosity/overview_1.htm

GameDevMath


Interactive Cross Product Demo
Interactive Dot Product Demo





Week 2: Maya Renderers


Topics:
Maya Renderers
Shader networks/hypershade

Assignment 1:
Create a Maya shader network to combine 3 different materials that are not normally combined, i.e. Bob The Alien's rusty-furry-glass-car or her favorite breakfast, a metalic-appleskinned-frosted-donut.


Maya Renderers:

Renderer Use

mental ray® for Maya® renderer

A general purpose renderer that includes exclusive, advanced rendering functionality, such as host and network parallel rendering, area light sources for soft shadows, global illumination, and caustics (light patterns).

Maya’s Software renderer

A general purpose renderer with broad capabilities. You can produce high-quality images with complex shading networks, including procedural textures and ramps. Software rendering is computed through your machine’s processor.

Interactive Photorealistic Rendering (IPR)

A feature of Maya’s software renderer and mental ray for Maya renderer, used to make interactive adjustments to the final rendered image. You can adjust shading and lighting attributes in real-time, and IPR automatically updates the rendered image to show the effects of your changes. IPR is useful for tweaking an image before rendering to disk.

Maya Vector renderer

A specialized renderer used to produce stylized renderings (for example, cartoon, tonal art, line art, hidden line, wireframe) in various bitmap image formats (IFF, TIFF) or in 2D vector formats (SWF, AI, EPS, SVG). The Maya Vector renderer is often used to render web-ready images.

Maya’s Hardware renderer

A general purpose renderer that uses your machine’s graphics card for computation. You can produce broadcast resolution images in less time than with software rendering, and in some cases, the quality may be good enough for final delivery.




Maya Rendering Reference:
 http://autodesk.com/us/maya/2011help/files/WS73099cc142f48755-4bc38c931187aa80bc9-32b3.htm

Maya Rendering Reference



Renderer Comparison:
www.thethirdfloorinc.com/publish/_assets/417/10/02/tdw126.f.renderers-7a90.pdf

Renderer Comparison




Hypershade Tutorials:
http://accad.osu.edu/~midori/Materials/maya_hypershade.htm

Hypershade Tutorial


http://www.3dtutorialzone.com/tutorial?id=66

Hypershade Tutorial #2



Maya Layered Textures:
http://www.youtube.com/watch?v=sdI3ddGFYJg

Layered Textures


Double-sided shader
http://autodesk.com/us/maya/2011help/files/Asts_Create_doublesided_shaded_surfaces.htm

Double-sided material



Maya Shader Networks (The One Ring):

The One Ring pt. 1


http://www.youtube.com/watch?v=9fTPqfhKacI

The One Ring pt. 2


More complex shader network (Apple Shader):
http://www.creativecrash.com/maya/downloads/shaders/c/procedural-apple-shader/description#tabs


Maya Shader Utilities:
http://autodesk.com/us/maya/2011help/index.html?url=./files/Render_node_utilities_Render_node_utilities.htm,topicNumber=d0e537815

Include gadget (iframe)





Maya Real-time Rendering:
http://www.youtube.com/user/lugherini#p/u/1/rt3aPcyvKlw

Include gadget (iframe)









Week 3&4: Rendering and Shaders


Topics:
Vertex
Pixel (Fragment)
Geometry
Maya Mental Ray shaders
Renderman shaders


Assignments:
Note: Assignments use the file //DIGMFILES/Faculty_Files/Diefenbach_Paul//DIGM512/MI_simple_shaders.zip
1) Complete the smiley face shader
2) Make smiley face bump or geometry shader
3) Compile and use 3 shaders from included weblinks below
    (see Mental Ray Shader Source Code Examples)

Extra credit:
Modify any of the 3 shaders.  The more the modification, the more the credit.


IMPORTANT NOTE on building the shaders:


The libraries supplied in the zip file were built for Maya 2011 on the Mac, so you need to rebuild the object files (.o) and the library files (.so, .dylib or .dll on Windows) if you are using a different OS or version.

Building using the Makefiles:
If you are having trouble with Cutter, just use the supplied makefiles that I gave you.  First remove the .o and .so and .dylib files, such as using the following from Terminal on the Mac: rm smiley_textures.o

Then you can build the .dylib files using the appropriate makefiles, i.e.:
make -f Makefile.smiley_textures
using Terminal on Mac, CMD on Windows.

On the Mac, the library that is built should end in .dylib, so the Makefile copies the .so file to one with the same name but with a .dylib extension.  On windows, it will have a .dll extension, and you might need to edit the Makefile accordingly since I didn't test it on Windows.

Building using Cutter:
If you want use cutter to compile, first copy the Makefile.shadeop_OSX that I supplied on the Mac to Cutter's template directory which is at Cutter_Help/templates/MakeFile/, or edit it as follows:

YOUR_SHADER_SO_PATH.so : YOUR_SHADER_NAME.c OTHER_OBJ_PATHS
    gcc ${CFLAGS} -c YOUR_SHADER_NAME.c
    gcc ${C_LDFLAGS} -o YOUR_SHADER_SO_PATH.so OTHER_OBJ_PATHS YOUR_SHADER_NAME.o


YOUR_SHADER_NAME.o : YOUR_SHADER_NAME.c
    gcc ${CFLAGS} -c YOUR_SHADER_NAME.c


changed to:

YOUR_SHADER_SO_PATH.so : YOUR_SHADER_NAME.cpp OTHER_OBJ_PATHS
    gcc ${CFLAGS} -c YOUR_SHADER_NAME.cpp
    gcc ${C_LDFLAGS} -o YOUR_SHADER_SO_PATH.so OTHER_OBJ_PATHS/YOUR_SHADER_NAME.o
    cp YOUR_SHADER_SO_PATH.so YOUR_SHADER_SO_PATH.dylib

YOUR_SHADER_NAME.o : YOUR_SHADER_NAME.cpp
    gcc ${CFLAGS} -c YOUR_SHADER_NAME.cpp

This will make the Makefile in cutter look for the .cpp file instead of the .c version.
The Windows version would look the same but have .dll instead of .so

Then load smiley_textures.cpp into cutter and choose Script->Compile C++ Source.

Rendering the .MI file:
As far as rendering the .mi file, you will have to do it through Maya instead of through cutter, because you don't have "ray" installed on those machines which is the mental ray renderer.  Instead there is Maya's "Render" application, which is similar to ray but I'm not sure how you pass in the command line arguments.  All of that can be set up in Cutter's preferences under Languages->Mi if you want to try to use "render" instead of "ray", but it is easier to just load it into Maya the way I showed.



Mental Images Mental Ray

 Mental Ray Shader Networks:

Mental Ray Shaders:
http://wiki.bk.tudelft.nl/toi-pedia/MIA_Material_-_Background_Information
http://www.lugher3d.com/maya-mental-ray-objects-shaders/mental-ray-shaders

Mental Ray Dieletric:
http://lesterbanks.com/2011/01/maya-2011-dielectric-material-mental-ray-tutorial/

Maya Mental Ray Shader Network Tutorial:
http://cgterminal.com/2011/04/29/mental-ray-for-maya-video-tutorials/

Mental Ray SSS tutorials:
http://www.creativecrash.com/tutorials/subsurface-scattering-using-the-misss-fast-simple-maya-shader#tabs
www.lamrug.org/resources/doc/sss-skin-tutorial.pdf



Writing Native Shaders

A vertex program must output a position and may return one or more colors, texture coordinate sets, and other per-vertex outputs. A fragment program, however, must reduce everything to a single color that will update the frame buffer. (In some advanced profiles, fragment programs can write additional data such as a depth value as well.)

An example of a surface shader that defines a metal surface is:

surface metal(float Ka = 1; float Ks = 1; float roughness = 0.1;)
{
  normal Nf = faceforward(normalize(N), I);
  vector V = - normalize(I);
  Oi = Os;
  Ci = Os * Cs * (Ka * ambient() + Ks * specular(Nf, V, roughness));
}
Shaders do the work by reading and writing special variables such as Cs (surface color), N (normal at given point), and Ci (final surface color).

Mental Ray provides a shader language to do this.







Teaching slides
from Writing mental ray shaders: A perceptual introduction, the third mental ray Handbook now available from SpringerWienNewYork and Amazon.com:
http://www.writingshaders.com/teaching.html

Writing Mental Ray Shaders Book




Building and Loading Shaders in Maya:

 
NOTE for Mac Users:  Beginning Autodesk Maya 2011, mental ray for Maya has implemented the default substitution rule .so > .dylib for the Mac OS X platform. Old shader libraries with a.so extension must be renamed. The consistent .so/.dll/.dylib substitution rules provide .mi scenes with cross-platform compatibility.

How to compile, load, and use the “Hello World” Mental Shader:
http://acaciaecho.wordpress.com/2011/04/15/mental-ray-shader-writing-startup/

http://autodesk.com/us/maya/2011help/index.html?url=./files/mrfMS_Use_a_custommade_mental_ray_for_Maya_shader_in_Maya.htm,topicNumber=d0e535338


Steps for Custom Mental Ray shader:
http://mayastation.typepad.com/maya-station/2010/01/where-to-start-when-creating-a-custom-mental-ray-shaders-for-maya.html


Mental Ray Manual:
http://docs.autodesk.com/MENTALRAY/2012/CHS/mental%20ray%203.9%20Help/files/manual/index.html

Mental Ray Shader Source Code Examples:

Many shaders from Writing mental ray shaders: A perceptual introduction, the third mental ray Handbook now available from SpringerWienNewYork and Amazon.com:
http://www.writingshaders.com/download.html

http://equinoxin.blogspot.com/search/label/mental%20ray

Many many shader examples:
http://www.writingshaders.com/shader_catalog.html

Mental Ray shaders:
ftp://ftp.mentalimages.com/pub/shaders/public-shaders-3.6.50.20.zip


https://github.com/spinos/aphid/tree/master/mentalray/constant

MKMISHADER (generating code from mi file):
http://download.autodesk.com/us/maya/2010help/mr/manual/node164.html#SECTION162

http://download.autodesk.com/us/maya/2010help/mr/manual/node252.html#SECTION250

The shader skeleton utility mkmishader is started as

   mkmishader [options] [scenefile...]

This utility is intended for shader writers only. It takes shader declaration files and generates C source code files that implement the shader. The scenefiles should only contain shader declarations. One source file per shader is created. If it already exists, it is overwritten. The sources include all necessary includes, declarations, local variables, parameter evaluation statements, and array loops, but the implementation of the actual algorithm is, of course, missing.


Maya, Mel, Python, Renderman & Mental Ray Scripting in Cutter:
http://www.fundza.com/

Scripting for Maya and Renderers

Note: Makefile and other tempates in:
/Applications/Cutter_Help/templates/
Modified Cutter makefile for C++ compiling is in zip file for this class.



 
Misc Mental Images Stuff:


http://www.3dbuzz.com/vbforum/showthread.php?82183-Mental-Ray-FAQ-Glossary-Tutorials-Shaders-and-more!

Mental Ray Glossary & Tutorials


Implementing the mental images Phenomena Renderer on the GPU
http://http.developer.nvidia.com/GPUGems2/gpugems2_chapter13.html
Mental Mill:
http://www.mentalimages.com/products/mental-mill.html


Renderman

Renderman for Maya Tutorials:
http://cgterminal.com/2011/04/30/renderman-for-maya-video-tutorials/
Virtual Statue Renderman for Maya:
http://www.scott-eaton.com/outgoing/3dWorld-Prometheus-Renderman-Eaton.pdf

Renderman Shader Tutorial:
http://penguin.ewu.edu/RenderMan/RMS_2.0/tutorialRenderManShaders.html

Renderman Shaders (free):
http://www.creativecrash.com/renderman/downloads/shaders/c/



Advanced Rendering Effects

Procedural Shaders:
web.cs.wpi.edu/~emmanuel/.../fan_wk6_Procedural_Shaders.pdf

Interactive Fractals:
http://www.dangries.com/Flash/FractalMakerExp/FractalMaker_exp.html

Understanding Fractal Shaders- Building a Marble Pattern:
http://www.davidcornette.com/glsl/noise.html

Maya Fractal Textures:
http://www.pixelstreetstudios.com/maya80/texFractal/

Fractal Noise:
http://library.creativecow.net/articles/zwar_chris/fractal_noise.php

Perlin Noise:
http://www.noisemachine.com/talk1/index.html

Perlin Noise

Simple Explanation:
http://webstaff.itn.liu.se/~stegu/TNM022-2005/perlinnoiselinks/perlin-noise-math-faq.html

The Importance of Being Noisy: Fast, High Quality Noise:
http://developer.amd.com/assets/Tatarchuk-Noise(GDC07-D3D_Day).pdf

Advanced Noise Foundations: Fourier Transforms:
http://www.fourier-series.com/f-transform/index.html
Nyquist info:
http://photo.stackexchange.com/questions/10755/what-is-the-nyquist-limit-and-what-is-its-significance-to-photographers

Pixar's Wavelet Noise Paper:
graphics.pixar.com/library/WaveletNoise/paper.pdf


Matrix, Vector, and Quaternion Math:
http://www.sacredsoftware.net/tutorials/Vectors/Vectors.xhtml
http://www.sacredsoftware.net/tutorials/Quaternions/Quaternions.xhtml
http://www.sacredsoftware.net/tutorials/Matrices/Matrices.xhtml






Week 5: Real Time Rendering

Overview of Shaders:
www.m2h.nl/files/LiteraturestudyShaders.pdf


There are two widely used shader languages out there: HLSL (or Cg, which is the same for practical purposes) and GLSL. Cg/HLSL is used by Direct3D, Xbox 360 and PS3. GLSL is used by mobile platforms (OpenGL ES 2.0), Mac OS X (OpenGL) and upcoming WebGL.  Traditionally, Unity shaders are written in Cg/HLSL



HLSL
You can think HLSL as a C language for GPU programming except there are no pointer, union, bitwise operations, and function variables. There are no goto, switch, recursive function in HLSL as well. However HLSL adds vector data type, build-in constructor, swizzling and masking operators. HLSL standard library includes mathematical functions and texture processing functions.

http://en.wikipedia.org/wiki/High_Level_Shader_Language

Great Overview of not just HLSL but shader principles in general:
Programming Vertex, Geometry, and Pixel Shaders, Second Edition, by Wolfgang Engel

ShaderX2: Intro & Tutorials (DirectX 9)
http://tog.acm.org/resources/shaderx/

Other HLSL overview:
http://www.neatware.com/lbstudio/web/hlsl.html

D3D Effects Files:
(from http://www.toymaker.info/Games/html/effects_files.html)
Higher level shading languages like HLSL and Cg define rendering methods and effects files define the rendering context (based on platform etc.).  Effect files can contain different rendering techniques that can be chosen based on the hardware available as well as HLSL code to define rendering. Direct3D provides a set of
interfaces to allow the easy manipulation of effects.  This is similar to the use of .mi files in MentalRay.

Effect File Structure

An effect file is a text file with a .fx extension. It is split into three main sections:
  1. Variable declarations - these are values that can be set before rendering and then used in this effect file. Examples include: textures, world matrix, lighting parameters
  2. Techniques & Passes- defines how something is to be rendered. It includes state information along with vertex and shader declarations.
  3. Functions - the shader code written in HLSL



CG
http://en.wikipedia.org/wiki/Cg_%28programming_language%29
http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter01.html



GLSL
http://en.wikipedia.org/wiki/Glsl
http://www.lighthouse3d.com/opengl/glsl/




Shader Translators and Optimizers:
HLSL2GLSL, an existing open source project that ATI has made 4 years ago and seemingly abandoned
Unitiy's fork of this translator, named “hlsl2glslfork”, is here: http://code.google.com/p/hlsl2glslfork/

“GLSL Optimizer”: http://github.com/aras-p/glsl-optimizer



Unity3D Shaders:

Shaders in Unity can be written in one of three different ways:

  • Surface Shaders will probably be your best bet. Write your shader as a surface shader if it needs to interact properly with lighting, shadows, projectors, etc. Surface shaders also make it easy to write complex shaders in a compact way - it's a higher level of abstraction. Lighting for most surface shaders can be calculated in a deferred manner (the exception is some very custom lighting models), which allows your shader to efficiently interact with many realtime lights. You write surface shaders in a couple of lines of Cg/HLSL and a lot more code gets auto-generated from that.
  • Vertex and Fragment Shaders will be required, if you need some very exotic effects that the surface shaders can't handle, if your shader doesn't need to interact with lighting or if it's an image effect. Shader programs written this way are the most flexible way to create the effect you need (even surface shaders are automatically converted to a bunch of vertex and fragment shaders), but that comes at a price: you have to write more code and it's harder to make it interact with lighting. These shaders are written in Cg/HLSL as well. (NOTE: most other systems integrate lighting into the fragment shader, but because of Unity's mixed lighting models, you should not typically do this!)
  • Fixed Function Shaders need to be written for old hardware that doesn't support programmable shaders. You will probably want to write fixed function shaders as an n-th fallback to your fancy fragment or surface shaders, to make sure your game still renders something sensible when run on old hardware or simpler mobile platforms. Fixed function shaders are entirely written in a language called ShaderLab, which is similar to Microsoft's .FX files or NVIDIA's CgFX.
To create a new shader, either choose Assets->Create->Shader from the menubar, or duplicate an existing shader, and work from that. The new shader can be edited by double-clicking it in the Project View.

Unity3D Shader Lab:

Regardless of which type you choose, the actual meat of the shader code will always be wrapped in ShaderLab (file extension .SHADER , which is used to organize the shader structure, similar to an .MI file in Mental Ray. It looks like this:

Shader "MyShader" {
    Properties {
        _MyTexture ("My Texture", 2D) = "white" { }
        // other properties like colors or vectors go here as well
    }
    SubShader {
        // here goes the 'meat' of your
        //  - surface shader or
        //  - vertex and fragment shader or
        //  - fixed function shader
    }
    SubShader {
        // here goes a simpler version of the SubShader above that can run on older graphics cards
    }
} 
ShaderLab shaders encompass more than just "hardware shaders". They do many things. They describe properties that are displayed in the Material Inspector, contain multiple shader implementations for different graphics hardware, configure fixed function hardware state and so on. The actual programmable shaders - like vertex and fragment programs - are just a part of the whole ShaderLab's "shader" concept.

If you want to write shaders that interact with lighting, take a look at Surface Shaders documentation.

Surface Shaders in Unity is a code generation approach that makes it much easier to write lit shaders than using low level vertex/pixel shader programs. Note that there is no custom languages, magic or ninjas involved in Surface Shaders; it just generates all the repetitive code that would have to be written by hand. You still write shader code in Cg / HLSL.

Unity3D Shader Design history, background, and theory:
http://blogs.unity3d.com/2010/07/17/unity-3-technology-surface-shaders/
http://aras-p.info/blog/2010/09/29/glsl-optimizer/

Unity3D Shader Lab:
http://unity3d.com/support/documentation/Manual/ShaderTut1.html

Example shader tutorials and source code:
http://unity3d.com/support/documentation/Manual/ShaderTut2.html
http://unity3d.com/support/documentation/Components/SL-SurfaceShaderExamples.html

Source Code for all built-in Unity Shaders:
http://unity3d.com/support/resources/assets/built-in-shaders.html



Unity Built-in Shaders:
http://unity3d.com/support/documentation/Components/Built-in%20Shader%20Guide.html

Unity Shader Performance:
http://unity3d.com/support/documentation/Components/shader-Performance.html

Shader IDEs (Integrated Development Environment)

ATI RenderMonkey (discontinued at DirectX® (9.1), OpenGL® (2.0), and OpenGL ES® (2.0) shading languages)
http://developer.amd.com/archive/gpu/rendermonkey/Pages/default.aspx

FX Composer 2.5 (Windows only) is a powerful integrated development environment for shader authoring.
http://developer.nvidia.com/fx-composer

mental mill® enables artists and other professionals to develop, test and maintain shaders and complex shader graphs for GPU and CPU rendering through an intuitive graphical user interface with real-time visual feedback without the need for programming skills.
http://www.mentalimages.com/products/mental-mill.html

     ____________________________________________________________

Unity Strumpy Shader Editor
: http://forum.unity3d.com/threads/56180
Available in Unity Asset Store for free



Strumpy Tutorial Videos:
Beta 4 - http://vimeo.com/20994055
Beta 1 (Still helpful!) - http://www.vimeo.com/13825713

Strumpy FAQ Post:
Some questions, answered with demo's: http://bit.ly/hnXhNu


 Misc Resources:

Many Realtime rendering resources:
http://www.realtimerendering.com/

Great 3D graphics tutorial applets:
http://www.cs.brown.edu/exploratories/freeSoftware/catalogs/repositoryApplets.html

Vector and 3D space:
http://www.flipcode.com/geometry/
http://www.lighthouse3d.com/opengl/tutorials.shtml

Game Programming Wiki : http://www.gpwiki.org/






Comments