Difference between revisions of "3D Fundamentals Tutorial 7"

From Chilipedia
Jump to: navigation, search
(Created page with "Textures. Put purdy pictures onto your triangles. Lot of interpolation and stuff. == Video == The tutorial video is on YouTube [https://youtu.be/UaOJxtWxICc here]. == Downl...")
 
(→‎Video)
 
(5 intermediate revisions by 2 users not shown)
Line 4: Line 4:
  
 
The tutorial video is on YouTube [https://youtu.be/UaOJxtWxICc here].
 
The tutorial video is on YouTube [https://youtu.be/UaOJxtWxICc here].
 +
 +
<div class="mw-collapsible mw-collapsed"><br />
 +
* What is texture mapping and why do we want it? [https://youtu.be/UaOJxtWxICc?t=0m14s 0:14]
 +
<div class="mw-collapsible-content">
 +
:* Mapping a picture onto a geometry (triangles)
 +
:* Basically, to create real life imagery with high fidelity
 +
</div>
 +
* 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
 +
:* 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)
 +
</div>
 +
* Interpolating between three vertices [https://youtu.be/UaOJxtWxICc?t=5m33s 5:33]
 +
* 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
 +
</div>
 +
* Implementing these concepts into code [https://youtu.be/UaOJxtWxICc?t=8m42s 8:42]
 +
<div class="mw-collapsible-content">
 +
:* The <code>TexVertex</code> class
 +
:* Incorporating data & methods in <code>Cube.h</code>
 +
:* Implementing <code>DrawTriangleTex(...)</code> triangle drawing with textures in <code>Graphics.h</code> and <code>Graphics.cpp</code> [https://youtu.be/UaOJxtWxICc?t=10m55s 10:55]
 +
:* Texture mapping code [https://youtu.be/UaOJxtWxICc?t=13m50s 13:50]
 +
:* Texture coordinates pre-stepping [https://youtu.be/UaOJxtWxICc?t=15m23s 15:23]
 +
:* The scanline loop [https://youtu.be/UaOJxtWxICc?t=17m26s 17:26]
 +
:* The <code>PutPixel</code> call with <code>tex.GetPixel(...)</code> [https://youtu.be/UaOJxtWxICc?t=17m26s 17:26]
 +
::- We define the texture in normalized space / normalized coordinates, this has clear advantages
 +
::- We apply texture clamping to make the code robust
 +
</div>
 +
* 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
 +
</div>
 +
* 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
 +
:* Introduction of the <code>TexVertex</code> class
 +
</div>
 +
* 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
 +
:* 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]
 +
<div class="mw-collapsible-content">
 +
:* For clamping, we use <code>std::max</code>
 +
:* 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]
 +
<div class="mw-collapsible-content">
 +
:* 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
 +
</div>
 +
* 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]
 +
* Advantages of using normalized texture coordinates [https://youtu.be/UaOJxtWxICc?t=41m30s 41:30]
 +
* Improving texture image quality: bilinear filtering, (isotropic) mip mapping, normal mapping [https://youtu.be/UaOJxtWxICc?t=43m25s 43:25]
 +
* Recap: you are now master of texture mapping, reverse lookup & interpolation [https://youtu.be/UaOJxtWxICc?t=45m30s 45:30]
 +
</div>
  
 
== Downloads ==
 
== Downloads ==
Line 11: Line 75:
 
== See also ==
 
== See also ==
 
* [https://www.patreon.com/planetchili Planet Chili Patreon]
 
* [https://www.patreon.com/planetchili Planet Chili Patreon]
−
* [[3D Fundamentals Tutorial 7|Next in series (Tutorial 8)]]
+
* [[3D Fundamentals Tutorial 8|Next in series (Tutorial 8)]]
 
* [[3D Fundamentals Series]]
 
* [[3D Fundamentals Series]]

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

Retrieved from "https://wiki.planetchili.net/index.php?title=3D_Fundamentals_Tutorial_7&oldid=3255"