cocos2D-X源码分析之从cocos2D-X学习OpenGL(12)----立方体贴图和天空盒

原创 2016年06月11日 16:51:29

      本篇介绍3d游戏中的天空盒概念,天空盒就是游戏中的背景,它是一个包裹整个场景的立方体,它由六个图像构成一个环绕的环境,给玩家一种所在场景比实际上大得多的感觉,如下图所示。


       创建天空盒的方法和创建其他节点一样调用create函数,那我们看看create函数里到底做了什么?

bool Skybox::init(const std::string& positive_x, const std::string& negative_x,
          const std::string& positive_y, const std::string& negative_y,
          const std::string& positive_z, const std::string& negative_z)
{
    auto texture = TextureCube::create(positive_x, negative_x, positive_y, negative_y, positive_z, negative_z);
    if (texture == nullptr)
        return false;
    
    init();
    setTexture(texture);
    return true;
}
       这里调用了TextureCube这个类,这个类就是立方体贴图,立方体贴图就是6个2D纹理,每个2D纹理是立方体的一个面,绑定一个立方体纹理需要调用下面的函数:

GL::bindTextureN(0, _name, GL_TEXTURE_CUBE_MAP);
       由于6个纹理,我们需要调用glTexImage2D六次,openGL提供了六个纹理目标,如下:


      和其他openGL枚举一样,它的int值也是每次加一的,所以我们可以用如下的方式设置纹理:

for (int i = 0; i < 6; i++)
    {
        Image* img = images[i];

        Texture2D::PixelFormat  ePixelFmt;
        unsigned char*          pData = getImageData(img, ePixelFmt);
        if (ePixelFmt == Texture2D::PixelFormat::RGBA8888 || ePixelFmt == Texture2D::PixelFormat::DEFAULT)
        {
            glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i,
                         0,                  // level
                         GL_RGBA,            // internal format
                         img->getWidth(),    // width
                         img->getHeight(),   // height
                         0,                  // border
                         GL_RGBA,            // format
                         GL_UNSIGNED_BYTE,   // type
                         pData);             // pixel data
        }
        else if (ePixelFmt == Texture2D::PixelFormat::RGB888)
        {
            glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i,
                         0,                  // level
                         GL_RGB,             // internal format
                         img->getWidth(),    // width
                         img->getHeight(),   // height
                         0,                  // border
                         GL_RGB,             // format
                         GL_UNSIGNED_BYTE,   // type
                         pData);             // pixel data
        }

        if (pData != img->getData())
            delete[] pData;
    }
       其他的纹理设置和之前的2D纹理设置一样,这样就创建了立方体贴图

       在cocos2d-x中创建天空盒的方式也是定义六个面的贴图就可以:

    //立方体贴图shader
    auto shader = GLProgram::createWithFilenames("Sprite3DTest/cube_map.vert",
                                                 "Sprite3DTest/cube_map.frag");
    auto state = GLProgramState::create(shader);
    
    //创建立方体纹理
    _textureCube = TextureCube::create("Sprite3DTest/skybox/left.jpg",
                                       "Sprite3DTest/skybox/right.jpg",
                                       "Sprite3DTest/skybox/top.jpg",
                                       "Sprite3DTest/skybox/bottom.jpg",
                                       "Sprite3DTest/skybox/front.jpg",
                                       "Sprite3DTest/skybox/back.jpg");
    //立方体纹理参数
    Texture2D::TexParams tRepeatParams;
    tRepeatParams.magFilter = GL_LINEAR;
    tRepeatParams.minFilter = GL_LINEAR;
    tRepeatParams.wrapS = GL_MIRRORED_REPEAT;
    tRepeatParams.wrapT = GL_MIRRORED_REPEAT;
    _textureCube->setTexParameters(tRepeatParams);
    
    //设置uniform
    state->setUniformTexture("u_cubeTex", _textureCube);
    
    //创建天空盒
    _skyBox = Skybox::create();
    _skyBox->setCameraMask(s_CM[LAYER_BACKGROUND]);
    _skyBox->setTexture(_textureCube);
    _skyBox->setScale(700.f);
 

        能力不足,水平有限,如有错误,欢迎指出。




版权声明:本文为博主原创文章,未经博主允许不得转载。

OpenGL教程翻译 第二十五课 天空盒

第二十五课 天空盒背景天空盒是用于增强场景表现力的一个常用技术,它一般通过在相机周围包裹一个纹理来实现。这个纹理通常是一些天空、山川或者摩天大楼等等,下面是游戏 Half-Life 中使用天空盒的例子...
  • Vcube
  • Vcube
  • 2015年11月21日 10:21
  • 1382

【Ogre引擎架构】 第十讲 唯美场景-天空盒SkyBox

天空盒作为3D场景的背景常常是不可或缺的,可以在Ogre/Sample/Media/packs/cubmap.zip中找到,解压cubmap.zip到当前文件夹,打开后会有天空盒的素材图片,Ogre的...
  • Nanhu2012
  • Nanhu2012
  • 2015年12月17日 08:35
  • 1638

opengl glsl 之绘制简单天空盒(1)

这个天空盒demo主要利用采集立方体纹理,贴合到屏幕四边形上。 天空盒的专业术语叫立体贴图。就是在单位立方体外表面贴上6张纹理。在立方体的中心点向外的各个方向为纹理的采样坐标。 这里绘制一个屏幕四...
  • weixin_41254969
  • weixin_41254969
  • 2018年01月13日 17:04
  • 50

Cocos2dx-OpenGL ES2.0教程:你的第一个立方体(5)

在上篇文章中,我们介绍了VBO索引的使用,使用VBO索引可以有效地减少顶点个数,优化内存,提高程序效率。 本教程将带领大家一起走进3D–绘制一个立方体。其实画立方体本质上和画三角形没什么区别,所...
  • dingkun520wy
  • dingkun520wy
  • 2015年11月18日 16:30
  • 2098

cocos2dx 3.0到3.15版本更新详细摘要

cocos2d-x-3.15.1 May.27 2017 [REFINE] Add optimization codes for huawei devices cocos2d-x-3...
  • yejinxiong001
  • yejinxiong001
  • 2017年09月11日 17:40
  • 440

OpenGL--天空盒

理论基础1,目前虚拟场景中天空建模常用的方法有天空顶(SkyDome:半球形)和天空盒(SkyBox:长方体)两种方法。其本质都是摄像机处在一个盒子中间,这个盒子通过纹理贴图形成的虚拟世界场景。其中天...
  • u010223072
  • u010223072
  • 2016年12月08日 16:13
  • 3827

OpenGL学习脚印:立方体纹理和天空包围盒(Cubemaps And Skybox)

写在前面 之前学习了2D纹理映射,实际上还有其他类型的纹理有待我们进一步学习,本节将要学习的立方体纹理(cubemaps),是一种将多个纹理图片复合到一个立方体表面的技术。在游戏中应用...
  • ziyuanxiazai123
  • ziyuanxiazai123
  • 2016年09月11日 22:14
  • 5842

OpenGL Shader 绘制天空盒_基础

参考: http://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/06%20Cubemaps/ main.cp...
  • yulinxx
  • yulinxx
  • 2016年12月23日 16:32
  • 1714

OPENGL天空盒Skybox

  • 2017年06月09日 16:58
  • 489KB
  • 下载

opengl学习(1): 天空盒

使用一个立方体纹理,由六张图片拼成一个天空盒,然后让它做沿Y轴逆时针转动。#include "TEST_Skybox.h" #include using namespace std;static GL...
  • zhugefei
  • zhugefei
  • 2015年08月11日 21:05
  • 4059
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2D-X源码分析之从cocos2D-X学习OpenGL(12)----立方体贴图和天空盒
举报原因:
原因补充:

(最多只允许输入30个字)