Week 8: File Texture Mapping.

· Please download and unzip the Week8.zip file in the Files/WeeklyExamples folder.

1. Defining UV on the vertices

a. Code: MyMesh.cs:

i. Start(), simply create UV as Vector2 and assign to each vertex position

b. Drag an image file (any jpg, png, etc.) into the Abedo field of the Material/Shader

c. Remember linear interpolation during scan conversion?!

i. During scan conversion, ALL vertex information are linearly interpolated

ii. In this case, this includes: UV, and Normal

d. Try:

i. Open the Material Tab under MyMesh

ii. Texture placement: What is the Tiling and Offset? What does this do?

iii. What happens when UV coverage on the Mesh goes beyond 0 to 1?

2. Our own texture placement: we want to reproduce the texture placement functionality …

a. Code: TexturePlacement.cs

i. This is attached to the MyMesh object

ii. SaveInitUV(): this is called from MyMesh::Start() to save a copy of the original UV (so that we can transform)

iii. Update(): what are we doing in there?

b. For MP5:

i. Recall: Vertex in 3D space requires a 4x4 matrix for transformation (to properly capture translation)

ii. To transform UV (2D points), needs Matrix3x3 (in Source/Library). Use this to support texture transformation (including rotation) for MP5

c. Decision: Computer transform in GPU or CPU?

i. In general, GPU of course!!

ii. BUT: for MP5 do the computation in CPU based on Matrix3x3 to accomplish rotation, you need to compute TRS (scale first, then rotation, and lastly translation)

3. Showing color with our own shader (we have done this in MP4), but let’s do it again …

a. CSS451Material

i. Create a 451NoCullShader

1. Create à Shader à Unlit and name the shader

ii. Create a new material and assign this shader to it.

iii. Here is a rather gentle intro to the Unity shader: https://docs.unity3d.com/462/Documentation/Manual/SL-VertexFragmentShaderExamples.html

b. Open the 451NoCullShader file and note

i. appdata: now passes in POSITION, NORMAL, and TEXCOORD0

ii. v2f: structure now has all three information (to be passed into the fragment shader). NOTE!

iii. vert(): function transforms position

1. Normal: simply passing on

2. UV: what is going here? Can we replace this?

iv. frag(): computes color for each pixel

1. do a texture look up (we have seen this before)

2. combine with … treating the normal as color?!

c. Observe:

i. Why is everything so greenish?

ii. Note:

1. Rotating the entire Mesh: color (normal) not changed

2. Moving each vertex: color (normal changes)

d. Try

i. Select a vertex and move way up so that e.g., the normal vector of the neighboring vertex is pointing e.g., towards the X-direction

ii. Note: color on the mesh turns redish J

iii. Also: transform normal with

1. mul(UNITY_MATRIX_IT_MV, v.normal): from object to world space

2. Now, can rotate the object (change its normal) to change the color of the object

e. Lessons learned?

i. We can pass multiple information per vertex down to the shader

ii. In Unity shaders: by default, information are passed as a struct to the vertex shader

f. Cool?

i. Why doesn’t the color(normal) change when we rotate the mesh? [Need to work on the normal!]

ii. What is the TRANSFORM_TEX() function in frag()?

· 3b. Analyzing the normal

o Open the 451NoCullShader file and note

§ frag(): only showing normal: x, y, z as color

· shows green initially because of (0, 1, 0) normal

§ vert(): function transforms normal

· 1. Simply passing it on: in Object space

o Mesh transform does not affect the normal (wrong behavior!)

· 2. Transform with (Transpose(Inverse(ModelXform)))

o NOTE: WorldToObject = inverse(ModelXform)

o COOL?

· 3. Transform with n * Inverser(ModelXform)

o n * Inverse(ModelXform) == Transpose(Inverse(ModelXform)) * n ß!!!

o So, identical to #2

· 4. Transform with ModelXform

o Results “seems” flipped?!

o Try

§ Select the mesh, rotate along z-axis by -90 degrees (normal points towards +x)

o Lessons learned?

§ Transform normal by InverseTranspose!!

· 3b: Per vertex color

o Mesh.cs: now “supplies” per vertex color on the mesh

§ See we are assigning to the Mesh color

o 451NoCullShader: need to “receive” the colors …

§ appdata è v2f [now all has color]

o Viola!! Take away?

§ defined channels between vertex and fragment shader

§ In GLSL/Unity: these channels can be defined

4. UV Transformation in the GPU: reproducing the TRANSFORM_TEX() function in the shader

a. Code: TexturePlacement.cs

i. This is attached to the MyMesh object

ii. Notice all we do is communicate our variables into the shader (assuming MYTexOffset and MyTexScale are defined!)

b. Shader: 451NoCullShader

i. 4x new variables: MyTexOffset_X/Y and MyTexScale_X/Y

c. frag(): function, notice we replaced the TRANSFORM_TEX() with our own simple scale and then translate operations!

d. Observe: Run the game

i. 451NoCullShader’s Tiling/Offset: now has no effect! J

ii. TexturePlacement: Offset/Scale can reproduce the same effects!

e. Learned

i. We now know exactly what happened in the TRANSFORM_TEX() function

1. è Computes TS (scale first, and then translate)!!

ð All you need to know for MP5 stop here. The following are more fun stuff, but, not necessary for any of the MP’s other than your final project (may be).

5. Multi-Texturing … two “layers” of textures!

a. Run and see two overlapping textures

b. Code: MyMesh::Update()

i. Towards the end of the function

ii. Notice we assign to UV1 with second set of UV value

1. Interesting side note: when assigning an array to theMesh, the array is _COPIED_ that’s why we can change the array value right after the assignment!

c. Code: 451NoCullShader

i. Whole set of “parallel” to _MainTex

ii. Note on the UI, texture information is presented.

d. Typical GPU has between 4 to 8 texturing units.

6. Synthesizing textures in the shader: example checker texture

a. (int (u * URepeat) mod 2) == ((int(v * VRepeat)) mod 2) è Color 1 or 2

b. Code: CheckerTexture on MyMesh

c. Code: CSS451NoCull shader towards the end of file

d. Learned?

i. We can pass from CPU to GPU many information!

ii. If you can define a pattern based on 2D or 3D parameter, you can synthesize it in the shader! J