Difference between revisions of "3D Fundamentals Tutorial 7"
From Chilipedia
(→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)
- This is done based on the positions of the center of the starting pixel & the scanline
- Implementing these concepts into code 8:42
- The
TexVertexclass - Incorporating data & methods in
Cube.h - Implementing
DrawTriangleTex(...)triangle drawing with textures inGraphics.handGraphics.cpp10:55 - Texture mapping code 13:50
- Texture coordinates pre-stepping 15:23
- The scanline loop 17:26
- The
PutPixelcall withtex.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
- The
- 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
TexVertexclass
- 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)
- For clamping, we use
- 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.
