![](https://habrastorage.org/getpro/geektimes/post_images/865/ac2/6b5/865ac26b5d460de627ccda3398ae5b5a.png)
Привет всем кто это читает! Хочу рассказать, как с помощью библиотеки OpenGL нарисовать вот такой земной шар.
Здесь я не буду останавливаться на создании окна и контекста устройства отображения, т.к. с это выходит за рамки данного повествования.
В ОСНОВЕ СФЕРА
Сперва, необходимо построить геометрический каркас, которым будет являться сфера.
![](https://habrastorage.org/getpro/geektimes/post_images/ca8/76e/8c4/ca876e8c4fb19784a05125cd9fddf8bb.png)
Тут ничего сложного открываем любой учебник по геометрии и находим там параметрическое уравнение сферы. Оно записывается вот так:
![](https://habrastorage.org/getpro/geektimes/comment_images/d0c/25f/96b/d0c25f96b9f2dac329b80e4be6647601.png)
С помощью этого уравнения можно вычислить вершины для построения каркаса. Сразу оговорюсь, что для визуализации каркаса я использовал механизм вершинных массивов, который позволяет сократить число вызовов функций отображения полигонов до одного. Такое сокращение поможет значительно повысить скорость визуализации.
Кое, что еще. У вершин есть особенность: вершина может принадлежать разным полигонам. Но чтобы не хранить её отдельно для каждого полигона, придумали хранить индексы этих вершин. В данном конкретном случае, индексы вычисляются исходя из того, что полигоны будут рисоваться, используя следующий порядок вершин:
![](https://habrastorage.org/getpro/geektimes/post_images/844/c17/972/844c1797257cbd664c7148818959e07f.png)
В OpenGL такому порядку соответствует константа GL_QUAD_STRIP, которая используется в функциях отображения.
Теперь программирование. Для начала, необходимо вычислить число вершин и число индексов.
numberOfVertices = ((180 / step) + 1) * ((360 / step) + 1)
numberOfIndices = 2 * (numberOfVertices - (360 / step) - 1)
где step шаг интерполяции между двумя точками. Я взял 8 градусов (или 0,14 радиана).
Далее объявим массив вершин и массив индексов:
class CScene {
private:
enum {
step = 8,
numberOfVertices = ((180 / step) + 1) * ((360 / step) + 1),
numberOfIndices = 2 * (numberOfVertices - (360 / step) - 1)
}; // enum
struct {
GLfloat x,y,z; // координаты точки
} m_vertices[numberOfVertices]; // массив вершин
GLuint m_indices[numberOfIndices]; // массив индексов
...
}; // class CScene
А вот код, в котором вычисляются значения этих массивов.
CScene::CScene(void) {
/// вычисляем вершины сферы и заносим их в массив
const GLfloat fRadius = 1.0;
for (int alpha = 90, index = 0; alpha <= 270; alpha += step) {
const int angleOfVertical = alpha % 360;
for (int phi = 0; phi <= 360; phi += step, ++index) {
const int angleOfHorizontal = phi % 360;
/// вычисляем координаты точки
m_vertices[index].x = fRadius * g_tableOfCosines[angleOfVertical] * g_tableOfCosines[angleOfHorizontal];
m_vertices[index].y = fRadius * g_tableOfSinus[angleOfVertical];
m_vertices[index].z = fRadius * g_tableOfCosines[angleOfVertical] * g_tableOfSinus[angleOfHorizontal];
} // for
} // for
/// вычисляем индексы вершин и заносим их в массив
for (int index = 0; index < numberOfIndices; index += 2) {
m_indices[index] = index >> 1;
m_indices[index + 1] = m_indices[index] + (360 / step) + 1;
} // for
} // constructor CScene
Обратите внимание, что вместо функций cos и sin используются таблицы g_tableOfCosines и g_tableOfSinus, в которые заранее занесены значения косинуса и синуса. Это сделано для повышения скорости вычисления вершин. Вместо того, чтобы каждый раз пользоваться медленными функциями cos и sin используються уже готовые значения.
Прежде чем приступить к визуализации, необходимо передать данные вершинных массивов в OpenGL. Для этого будет использоваться следующая функция:
inline void CScene::InitArrays(void) {
const GLsizei stride = 3 * sizeof(GLfloat);
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLOAT, stride, m_vertices);
glEnableClientState(GL_NORMAL_ARRAY);
glNormalPointer(GL_FLOAT, stride, m_vertices);
} // InitArrays
stride – промежуток в памяти (в байтах) между первой координатой предыдущей и первой координатой следующей вершины.
Обратите внимание! Что в качестве векторов нормалей используются вершины. Дело в том, что для плавного закрашивания я использовал вектора нормалей в вершинах. А для сферы направлению вектора нормали соответствуют координаты этой вершины (конечно если сфера находиться в начале координат).
Теперь давайте нарисуем сферу.
inline void CScene::InitLights(void) {
const GLfloat pos[] = {1.0, 1.0, 1.0, 0.0};
const GLfloat clr[] = {1.0, 1.0, 1.0, 1.0};
glEnable(GL_LIGHT0);
glLightfv(GL_LIGHT0, GL_POSITION, pos);
glLightfv(GL_LIGHT0, GL_DIFFUSE, clr);
glLightfv(GL_LIGHT0, GL_SPECULAR, clr);
} // InitLights
void CScene::Init(const int _nWidth, const int _nHeight) {
// устанавливаем порт отображения
glViewport(0, 0, _nWidth, _nHeight);
/// устанавливаем перспективную проекцию
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(80.0, (GLdouble)_nWidth / (GLdouble)_nHeight, 0.1, 3.0);
/// устанавливаем камеру
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt( 0.0,1.5,1.5, 0.0,0.0,0.0, 0.0,1.0,0.0);
/// разрешаем отсечение невидемых граней
glCullFace(GL_FRONT);
glEnable(GL_CULL_FACE);
// рзрешаем тест буфера глубины
glEnable(GL_DEPTH_TEST);
// разрешаем нормализацию
glEnable(GL_NORMALIZE);
// устанавливаем плавное закрашивание
glShadeModel(GL_SMOOTH);
// устанавливаем метод отображения - закрашивание
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
/// устанавливаем источники света
this->InitLights();
glEnable(GL_LIGHTING);
// задаем цвет фона - черный
glClearColor(0.0, 0.0, 0.0, 1.0);
/// задаем свойства материала объекта
const GLfloat clr[] = {1.0, 1.0, 1.0, 1.0};
glMaterialfv(GL_FRONT_AND_BACK, GL_SPECULAR, clr);
glMaterialf(GL_FRONT_AND_BACK, GL_SHININESS, 50.0);
// инициализируем вершинные массивы
this->InitArrays();
} // Init
inline void CScene::DrawEarth(void) {
glDrawElements(GL_QUAD_STRIP, numberOfIndices, GL_UNSIGNED_INT, m_indices);
} // DrawEarth
void CScene::Redraw(void) {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
this->DrawEarth();
glFinish();
} // Redraw
И вот, что получилось в результате:
![](https://habrastorage.org/getpro/geektimes/post_images/b23/198/5f0/b231985f09c23ee19b146f3d03f348ee.png)
ТЕПЕРЬ ТЕКСТУРА
Теперь когда сфера готова. Нужно наложить на нее текстуру, чтобы предать схожести с земным шаром.
Где взять текстуру? Все очень просто. Открываем images.google.ru и вводим там запрос: "Earth map".
![](https://habrastorage.org/getpro/geektimes/post_images/396/e50/ffc/396e50ffc858f48533a4ace7ecf3190a.png)
Остановим свой выбор вот на этой текстуре:
![](https://habrastorage.org/getpro/geektimes/post_images/33c/61d/4af/33c61d4af46fe5c8c1c2f279434f4afe.png)
Текстуру будем хранить в файле ресурсов:
//
// Texture
//
IDR_TEXTURE_EARTH TEXTURE "Earth.jpg"
Опытные программисты, наверное, заметили, что вместо привычного BITMAP я использовал TEXTURE. Да и сам файл берется с расширением JPEG, а не BMP. Это сделано для того, чтобы уменьшить размер исполняемого модуля.
Но, в дальнейшем, нам понадобиться работать с битовой картой (Bitmap). Для этого я написал функцию, которая будет загружать текстуры из ресурсов в Bitmap:
inline HBITMAP LoadTextureFromResource(HMODULE _hModule, LPCTSTR _lpName, LPCTSTR _lpType) {
HRSRC hRsrc = FindResource(_hModule, _lpName, _lpType);
if (NULL == hRsrc) return NULL;
HGLOBAL hGlobal = LoadResource(_hModule, hRsrc);
if (NULL == hGlobal) return NULL;
HBITMAP hBitmap = NULL;
DWORD dwSize = SizeofResource(_hModule, hRsrc);
HGLOBAL hData = GlobalAlloc(GMEM_MOVEABLE, dwSize);
CopyMemory(GlobalLock(hData), LockResource(hGlobal), dwSize);
GlobalUnlock(hData);
IStream *pStream = NULL;
HRESULT hr = CreateStreamOnHGlobal(hData, FALSE, &pStream);
if (SUCCEEDED(hr)) {
IPicture *pPicture = NULL;
hr = OleLoadPicture(pStream, dwSize, TRUE, IID_IPicture, (LPVOID*)&pPicture);
if (SUCCEEDED(hr)) {
pPicture->get_Handle((OLE_HANDLE *)&hBitmap);
hBitmap = (HBITMAP)CopyImage(hBitmap, IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
pPicture->Release(); pPicture = NULL;
} // if
pStream->Release(); pStream = NULL;
} // if
GlobalFree(hData); hData = NULL;
UnlockResource(hGlobal); hGlobal = NULL;
return hBitmap;
} // LoadTextureFromResource
Теперь нужно загрузить текстуру и вычислить текстурные координаты. Для этого изменим объявление массива вершин и объявим переменную в которой будет храниться текстура
class CScene {
private:
...
struct {
GLfloat x,y,z; // координаты точки
GLfloat u,v; // текстурные координаты
} m_vertices[numberOfVertices]; // массив вершин
...
struct {
GLuint id; // идентификатор текстуры
HBITMAP hBitmap; // дискриптор битовой карты
} m_textureOfEarth;
...
}; // class CScene
После чего изменим ранее описанные функции, добавив в них функционал работающий с текстурами. И нарисуем земной шар.
CScene::CScene(void) {
/// вычисляем вершины сферы и заносим их в массив
const GLfloat fRadius = 1.0;
for (int alpha = 90, index = 0; alpha <= 270; alpha += step) {
const int angleOfVertical = alpha % 360;
for (int phi = 0; phi <= 360; phi += step, ++index) {
const int angleOfHorizontal = phi % 360;
/// вычисляем координаты точки
...
/// вычисляем текстурные координаты
m_vertices[index].u = (360 - phi) / 360.0f;
m_vertices[index].v = (270 - alpha) / 180.0f;
} // for
} // for
/// вычисляем индексы вершин и заносим их в массив
...
/// загрузка текстуры из ресурсов
HINSTANCE hModule = GetModuleHandle(NULL);
m_textureOfEarth.hBitmap = LoadTextureFromResource(hModule, MAKEINTRESOURCE(IDR_TEXTURE_EARTH), _T("TEXTURE"));
} // constructor CScene
CScene::~CScene(void) {
/// удаляем текстуру
if (NULL != m_textureOfEarth.hBitmap) {
DeleteObject(m_textureOfEarth.hBitmap);
} // if
} // destructor CScene
inline void CScene::InitArrays(void) {
const GLsizei stride = 5 * sizeof(GLfloat);
...
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glTexCoordPointer(2, GL_FLOAT, stride, (GLfloat *)m_vertices + 3);
} // InitArrays
inline void CScene::InitTextures(void) {
/// создаем текстуру
if (NULL != m_textureOfEarth.hBitmap) {
glGenTextures(1, &m_textureOfEarth.id);
glBindTexture(GL_TEXTURE_2D, m_textureOfEarth.id);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
BITMAP bitmap = { 0 };
GetObject(m_textureOfEarth.hBitmap, sizeof(BITMAP), &bitmap);
glTexImage2D(GL_TEXTURE_2D, 0, 3, bitmap.bmWidth, bitmap.bmHeight, 0, GL_BGR_EXT, GL_UNSIGNED_BYTE, bitmap.bmBits);
} // if
} // InitTextures
void CScene::Init(const int _nWidth, const int _nHeight) {
...
// инициализируем текстуру
this->InitTextures();
// разрешаем текстурирование
glEnable(GL_TEXTURE_2D);
} // Init
inline void CScene::DrawEarth(void) {
glBindTexture(GL_TEXTURE_2D, m_textureOfEarth.id);
glDrawElements(GL_QUAD_STRIP, numberOfIndices, GL_UNSIGNED_INT, m_indices);
} // DrawEarth
Жмем компиляцию… И вот что выдает нам программа:
![](https://habrastorage.org/getpro/geektimes/post_images/e06/01c/0ea/e0601c0ead9acc65df89ae3b9fcefde9.png)
РЕЛЬЕФ
Вроде все выглядит хорошо, но чего-то все таки не хватает. Чего? Не хватает рельефа. Т.е. для большей реалистичности необходимо добавить горы и впадины. Как это сделать?
Для передачи неровностей необходимо накладывать на одну плоскость несколько текстур (делать несколько полупрозрачных плоскостей, параллельных данной, но находящихся «немного ниже» нее или использовать мультитекстурирование, входящие в расширение OpenGL).
Здесь используются две текстуры: исходная текстура поверхности земного шара и текстура, отражающая неровности поверхности (черно белая), которая условно говоря, задает карту высот (будем называть ее картой поверхности).
![](https://habrastorage.org/getpro/geektimes/post_images/052/6cd/1b4/0526cd1b44ad2632bbc90a082446aa90.png)
Добавим ее в файл ресурсов.
//
// Texture
//
IDR_TEXTURE_EARTH TEXTURE "Earth.jpg"
IDR_TEXTURE_BUMP TEXTURE "bump.jpg"
Сначала нужно загрузить исходную текстуру (1), а из карты поверхности создаем две текстуры: первая (2) — точно такая же, но уменьшаем яркость в два раза; вторая (3) — это инвертированная (по значению яркости) карта поверхности, для которой также значение яркости уменьшаем в два раза.
class CScene {
private:
...
struct {
GLuint id; // идентификатор текстуры
HBITMAP hBitmap; // дискриптор битовой карты
} m_textureOfEarth, m_textureOfBump, m_textureOfBumpInvert;
...
}; // class CScene
...
CScene::CScene(void) {
/// вычисляем вершины сферы и заносим их в массив
...
/// вычисляем индексы вершин и заносим их в массив
...
/// загрузка текстур из ресурсов
HINSTANCE hModule = GetModuleHandle(NULL);
m_textureOfEarth.hBitmap = LoadTextureFromResource(hModule, MAKEINTRESOURCE(IDR_TEXTURE_EARTH), _T("TEXTURE"));
m_textureOfBump.hBitmap = LoadTextureFromResource(hModule, MAKEINTRESOURCE(IDR_TEXTURE_BUMP), _T("TEXTURE"));
m_textureOfBumpInvert.hBitmap = LoadTextureFromResource(hModule, MAKEINTRESOURCE(IDR_TEXTURE_BUMP), _T("TEXTURE"));
if (NULL != m_textureOfBumpInvert.hBitmap) {
BITMAP bitmap = { 0 };
GetObject(m_textureOfBumpInvert.hBitmap, sizeof(BITMAP), &bitmap);
// Проинвертируем растр
LPBYTE ptr = (LPBYTE)bitmap.bmBits + (3 * bitmap.bmHeight * bitmap.bmWidth);
while (--ptr >= bitmap.bmBits) (*ptr) = 0xFF - (*ptr);
} // if
} // constructor CScene
CScene::~CScene(void) {
/// удаляем текстуру
if (NULL != m_textureOfEarth.hBitmap) {
DeleteObject(m_textureOfEarth.hBitmap);
} // if
/// удаляем текстуру
if (NULL != m_textureOfBump.hBitmap) {
DeleteObject(m_textureOfBump.hBitmap);
} // if
/// удаляем текстуру
if (NULL != m_textureOfBumpInvert.hBitmap) {
DeleteObject(m_textureOfBumpInvert.hBitmap);
} // if
} // destructor CScene
inline void CScene::InitTextures(void) {
/// создаем текстуру
if (NULL != m_textureOfEarth.hBitmap) {
...
} // if
/// создаем текстуру
if (NULL != m_textureOfBump.hBitmap) {
glGenTextures(1, &m_textureOfBump.id);
glBindTexture(GL_TEXTURE_2D, m_textureOfBump.id);
glPixelTransferf(GL_RED_SCALE, 0.5); // промасштабируем яркость до 50%,
glPixelTransferf(GL_GREEN_SCALE, 0.5); // поскольку нам нужна половинная интенсивность
glPixelTransferf(GL_BLUE_SCALE, 0.5);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
BITMAP bitmap = { 0 };
GetObject(m_textureOfBump.hBitmap, sizeof(BITMAP), &bitmap);
glTexImage2D(GL_TEXTURE_2D, 0, 3, bitmap.bmWidth, bitmap.bmHeight, 0, GL_BGR_EXT, GL_UNSIGNED_BYTE, bitmap.bmBits);
} // if
/// создаем текстуру
if (NULL != m_textureOfBumpInvert.hBitmap) {
glGenTextures(1, &m_textureOfBumpInvert.id);
glBindTexture(GL_TEXTURE_2D, m_textureOfBumpInvert.id);
glPixelTransferf(GL_RED_SCALE, 0.5); // промасштабируем яркость до 50%,
glPixelTransferf(GL_GREEN_SCALE, 0.5); // поскольку нам нужна половинная интенсивность
glPixelTransferf(GL_BLUE_SCALE, 0.5);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
BITMAP bitmap = { 0 };
GetObject(m_textureOfBumpInvert.hBitmap, sizeof(BITMAP), &bitmap);
glTexImage2D(GL_TEXTURE_2D, 0, 3, bitmap.bmWidth, bitmap.bmHeight, 0, GL_BGR_EXT, GL_UNSIGNED_BYTE, bitmap.bmBits);
} // if
} // InitTextures
Вывод происходит в следующей последовательности: сначала выводится плоскость с наложенной текстурой (2), перед этим в OpenGL должны быть установлены следующие параметры:
glDisable(GL_BLEND);
glDisable(GL_LIGHTING);
Перед выводом следующей плоскости устанавливаются следующие параметры:
glBlendFunc(GL_ONE, GL_ONE);
glDepthFunc(GL_LEQUAL);
glEnable(GL_BLEND);
Сама плоскость выводится на том же месте, что и предыдущая, но «чуть-чуть» приподнята относительно предыдущей (чтобы не было перекрытий) и наложенной текстурой (3).
Перед выводом последней плоскости необходимо установить следующие параметры OpenGL:
glEnable(GL_LIGHTING);
glBlendFunc(GL_DST_COLOR, GL_SRC_COLOR);
Здесь также выводится плоскость, которая параллельна предыдущим, но «чуть-чуть» приподнята относительно них, для избежания пересечений. На плоскость накладывается текстура (1).
inline void CScene::DrawEarth(void) {
/// рисуем первый слой
glDisable(GL_BLEND);
glDisable(GL_LIGHTING);
glBindTexture(GL_TEXTURE_2D, m_textureOfBump.id);
glPushMatrix();
glScalef(0.99f, 0.99f, 0.99f);
glDrawElements(GL_QUAD_STRIP, numberOfIndices, GL_UNSIGNED_INT, m_indices);
glPopMatrix();
/// рисуем второй слой
glBlendFunc(GL_ONE, GL_ONE);
glDepthFunc(GL_LEQUAL);
glEnable(GL_BLEND);
glBindTexture(GL_TEXTURE_2D, m_textureOfBumpInvert.id);
glPushMatrix();
glScalef(0.995f, 0.995f, 0.995f);
glDrawElements(GL_QUAD_STRIP, numberOfIndices, GL_UNSIGNED_INT, m_indices);
glPopMatrix();
/// рисуем третий слой
glEnable(GL_LIGHTING);
glBlendFunc(GL_DST_COLOR, GL_SRC_COLOR);
glBindTexture(GL_TEXTURE_2D, m_textureOfEarth.id);
glDrawElements(GL_QUAD_STRIP, numberOfIndices, GL_UNSIGNED_INT, m_indices);
} // DrawEarth
В итоге получается изображение, на котором виден рельеф.
![](https://habrastorage.org/getpro/geektimes/post_images/865/ac2/6b5/865ac26b5d460de627ccda3398ae5b5a.png)
Бинарник и исходники проекта можно скачать здесь