圖形學基礎 | OpenGL CubeMap圖像方向問題

http://www.3dcpptutorials.sk/index.php?id=24
https://stackoverflow.com/questions/11685608/convention-of-faces-in-opengl-cubemapping
https://blog.csdn.net/Nhsoft/article/details/1398630

CubeMap貼圖的問題困擾了我一個早上.
讓我們從頭分析一下.

0 翻轉紋理

在使用 stb 導入紋理的時候.
經常需要設置 stbi_set_flip_vertically_on_load(ture) 來實現翻轉y座標.

未開啓翻轉:
在這裏插入圖片描述
開啓翻轉:
在這裏插入圖片描述

這是爲什麼呢?
在這裏插入圖片描述
因爲 OpenGL的紋理座標起點在於左下角. 而圖像紋理座標的起點在於左上角.

1 問題的出現

按照正常的方式貼圖. 即:
在這裏插入圖片描述
stbi_set_flip_vertically_on_load(ture)
這時的對應方式爲:

0 = +X = right
1 = -X = left
2 = +Y = top
3 = -Y = bottom
4 = +Z = front
5 = -Z = back

     (+y)           |     (2)         |      (to)
(-x) (+z) (+x) (-z) | (1) (4) (0) (5) | (le) (fr) (ri) (ba)
     (-y)           |     (3)         |      (bo)

在這裏插入圖片描述
這時候會出現以下問題:
左 / 右 / 前 / 後的 圖像上下顛倒了(旋轉了180度).而 前 / 後的 圖像位置顛倒了(前後交換了).

這裏. 我主要想知道爲什麼會出現這種情況?
OpenGL 2.1 specification 中有說明.

chapter 3.8.6 of the OpenGL 2.1 specification and the documentation of the textureCube function in the chapter 8.7 of the GLSL 1.2 specification.

Cube Map Texture Selection

  1. 在CubeMap中. 紋理座標 (s,t,r) 被作爲 向量 ( rxr_x, ryr_y, rzr_z ) 來對待!!!
  2. 下面表格的作用是: 在每個主方向上. 紋理座標是怎麼定義的
    在這裏插入圖片描述
    在這裏插入圖片描述
    更形象的:
    在這裏插入圖片描述
    爲什麼會是這樣呢? 我猜是從每一個面的外側看. 都是紋理座標都在左上角.

所以, 當 stbi_set_flip_vertically_on_load(ture) 時.
就會出現:前 / 後 / 左 / 右 的紋理顛倒了180°的情況.

2 解決方法

解決方法可以看 GLSL cube mapping

2.1 交換對應 +y 和 -y 對應關係. 從而得到連續的紋理

char *CubeMapTextureFiles[6] = {"right.jpg", "left.jpg", "bottom.jpg", "top.jpg", "front.jpg", "back.jpg"};
0 = +X = right
1 = -X = left
2 = +Y = bottom
3 = -Y = top
4 = +Z = front
5 = -Z = back

     (+y)           |     (2)         |      (bo)
(-x) (-z) (+x) (+z) | (1) (5) (0) (4) | (le) (ba) (ri) (fr)
     (-y)           |     (3)         |      (to)

2.2 在頂點着色器中. 旋轉紋理採樣向量180°
rotate the cube map texture coordinates 180 degrees around the X axis in the sky.vs vertex shader.

TexCoords = vec3(position.x,-position.yz);
     (-y)           |     (3)         |      (to)
(-x) (+z) (+x) (-z) | (1) (4) (0) (5) | (le) (fr) (ri) (ba)
     (+y)           |     (2)         |      (bo)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章