Difference between revisions of "3D Fundamentals Tutorial 7"

From Chilipedia
Jump to: navigation, search
(Video)
(Video)
 
Line 12: Line 12:
 
</div>
 
</div>
 
* How to approach texture mapping [https://youtu.be/UaOJxtWxICc?t=2m45s 2:45]
 
* How to approach texture mapping [https://youtu.be/UaOJxtWxICc?t=2m45s 2:45]
 +
<div class="mw-collapsible-content">
 
:* How NOT to do it: sccaling and rotating points of a sprite
 
:* How NOT to do it: sccaling and rotating points of a sprite
 
:* Right way: Generate a mapping of vertices of our geometry to points in our texture
 
:* Right way: Generate a mapping of vertices of our geometry to points in our texture
Line 19: Line 20:
 
::- Interpolate from the geometry's screen coordinates (x,y) to coordinates of the texture (u,v)
 
::- Interpolate from the geometry's screen coordinates (x,y) to coordinates of the texture (u,v)
 
::- Use the texture's color at (u,v) to draw the pixel on the screen at (x,y)
 
::- Use the texture's color at (u,v) to draw the pixel on the screen at (x,y)
 +
</div>
 
* Interpolating between three vertices [https://youtu.be/UaOJxtWxICc?t=5m33s 5:33]  
 
* Interpolating between three vertices [https://youtu.be/UaOJxtWxICc?t=5m33s 5:33]  
 
* Pre-stepping [https://youtu.be/UaOJxtWxICc?t=7m20s 7:20]  
 
* Pre-stepping [https://youtu.be/UaOJxtWxICc?t=7m20s 7:20]  
 +
<div class="mw-collapsible-content">
 
:* This is done based on the positions of the center of the starting pixel & the scanline
 
:* This is done based on the positions of the center of the starting pixel & the scanline
 +
</div>
 
* Implementing these concepts into code [https://youtu.be/UaOJxtWxICc?t=8m42s 8:42]  
 
* Implementing these concepts into code [https://youtu.be/UaOJxtWxICc?t=8m42s 8:42]  
 +
<div class="mw-collapsible-content">
 
:* The <code>TexVertex</code> class
 
:* The <code>TexVertex</code> class
 
:* Incorporating data & methods in <code>Cube.h</code>
 
:* Incorporating data & methods in <code>Cube.h</code>
Line 32: Line 37:
 
::- We define the texture in normalized space / normalized coordinates, this has clear advantages
 
::- We define the texture in normalized space / normalized coordinates, this has clear advantages
 
::- We apply texture clamping to make the code robust
 
::- We apply texture clamping to make the code robust
 +
</div>
 
* Demonstration on screen [https://youtu.be/UaOJxtWxICc?t=23m00s 23:00]
 
* Demonstration on screen [https://youtu.be/UaOJxtWxICc?t=23m00s 23:00]
 +
<div class="mw-collapsible-content">
 
:* We observe limitations. Main one: because we map base vertices, we cannot texturize all surfaces
 
:* We observe limitations. Main one: because we map base vertices, we cannot texturize all surfaces
 +
</div>
 
* Improving the interpolation algorithm [https://youtu.be/UaOJxtWxICc?t=26m32s 26:32]
 
* Improving the interpolation algorithm [https://youtu.be/UaOJxtWxICc?t=26m32s 26:32]
 +
<div class="mw-collapsible-content">
 
:* Smarter interpolation: no slope calculations, unifying screen & texture coordinate interpolation
 
:* Smarter interpolation: no slope calculations, unifying screen & texture coordinate interpolation
 
:* Introduction of the <code>TexVertex</code> class
 
:* Introduction of the <code>TexVertex</code> class
 +
</div>
 
* Consolidating flat top & flat bottom triangle drawing routines [https://youtu.be/UaOJxtWxICc?t=31m15s 31:15]
 
* Consolidating flat top & flat bottom triangle drawing routines [https://youtu.be/UaOJxtWxICc?t=31m15s 31:15]
 +
<div class="mw-collapsible-content">
 
:* Put common routingen in a single function, create wrappers for distinct parts for flat top/bottom
 
:* Put common routingen in a single function, create wrappers for distinct parts for flat top/bottom
 
:* This ceates cleaner code (no duplication), important for maintainability
 
:* This ceates cleaner code (no duplication), important for maintainability
 +
</div>
 
* Adding features: texture clamping and texture wrapping [https://youtu.be/UaOJxtWxICc?t=33m15s 33:15]
 
* Adding features: texture clamping and texture wrapping [https://youtu.be/UaOJxtWxICc?t=33m15s 33:15]
 +
<div class="mw-collapsible-content">
 
:* For clamping, we use <code>std::max</code>
 
:* For clamping, we use <code>std::max</code>
 
:* For wrapping, we use <code>std::fmod</code> (floating point modulus)
 
:* For wrapping, we use <code>std::fmod</code> (floating point modulus)
 +
</div>
 
* Fixing texture mapping of top & bottom: unfolding the geometry of the cube [https://youtu.be/UaOJxtWxICc?t=36m00s 36:00]
 
* Fixing texture mapping of top & bottom: unfolding the geometry of the cube [https://youtu.be/UaOJxtWxICc?t=36m00s 36:00]
 +
<div class="mw-collapsible-content">
 
:* We "break the weld" (/sharing) of vertices of the cube's different faces
 
:* We "break the weld" (/sharing) of vertices of the cube's different faces
 
:* The number of vertices required depends on the level of flexibility/independence: we can move from 8->14->24 vertices
 
:* The number of vertices required depends on the level of flexibility/independence: we can move from 8->14->24 vertices
 +
</div>
 
* Implementing unfolding & full surface mapping in the code [https://youtu.be/UaOJxtWxICc?t=38m40s 38:40]
 
* Implementing unfolding & full surface mapping in the code [https://youtu.be/UaOJxtWxICc?t=38m40s 38:40]
 
* Creating a skin for a cube [https://youtu.be/UaOJxtWxICc?t=39m56s 39:56]
 
* Creating a skin for a cube [https://youtu.be/UaOJxtWxICc?t=39m56s 39:56]

Latest revision as of 06:08, 17 May 2020

Textures. Put purdy pictures onto your triangles. Lot of interpolation and stuff.

Video

The tutorial video is on YouTube here.


  • What is texture mapping and why do we want it? 0:14
  • Mapping a picture onto a geometry (triangles)
  • Basically, to create real life imagery with high fidelity
  • How to approach texture mapping 2:45
  • How NOT to do it: sccaling and rotating points of a sprite
  • Right way: Generate a mapping of vertices of our geometry to points in our texture
  • This requires:
- Transform the vertices to screen space
- Rasterize (using scanlines)
- Interpolate from the geometry's screen coordinates (x,y) to coordinates of the texture (u,v)
- Use the texture's color at (u,v) to draw the pixel on the screen at (x,y)
  • Interpolating between three vertices 5:33
  • Pre-stepping 7:20
  • This is done based on the positions of the center of the starting pixel & the scanline
  • Implementing these concepts into code 8:42
  • The TexVertex class
  • Incorporating data & methods in Cube.h
  • Implementing DrawTriangleTex(...) triangle drawing with textures in Graphics.h and Graphics.cpp 10:55
  • Texture mapping code 13:50
  • Texture coordinates pre-stepping 15:23
  • The scanline loop 17:26
  • The PutPixel call with tex.GetPixel(...) 17:26
- We define the texture in normalized space / normalized coordinates, this has clear advantages
- We apply texture clamping to make the code robust
  • Demonstration on screen 23:00
  • We observe limitations. Main one: because we map base vertices, we cannot texturize all surfaces
  • Improving the interpolation algorithm 26:32
  • Smarter interpolation: no slope calculations, unifying screen & texture coordinate interpolation
  • Introduction of the TexVertex class
  • Consolidating flat top & flat bottom triangle drawing routines 31:15
  • Put common routingen in a single function, create wrappers for distinct parts for flat top/bottom
  • This ceates cleaner code (no duplication), important for maintainability
  • Adding features: texture clamping and texture wrapping 33:15
  • For clamping, we use std::max
  • For wrapping, we use std::fmod (floating point modulus)
  • Fixing texture mapping of top & bottom: unfolding the geometry of the cube 36:00
  • We "break the weld" (/sharing) of vertices of the cube's different faces
  • The number of vertices required depends on the level of flexibility/independence: we can move from 8->14->24 vertices
  • Implementing unfolding & full surface mapping in the code 38:40
  • Creating a skin for a cube 39:56
  • Advantages of using normalized texture coordinates 41:30
  • Improving texture image quality: bilinear filtering, (isotropic) mip mapping, normal mapping 43:25
  • Recap: you are now master of texture mapping, reverse lookup & interpolation 45:30

Downloads

The GitHub repository for the tutorial code is here.

See also