若该文为原创文章，未经允许不得转载
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/97614261
各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究
红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）
OSG开发专栏（点击传送门）
上一篇：《OSG开发笔记（二十）：OSG使用HUD显示文字》
下一篇：《OSG开发笔记（二十二）：OSG场景背景》
前言
前面显示文字抬头显示（HUD），现在将图片和图片纹理也添加进HUD。
目标效果
本章节完，基本扫清达到目标效果的技术障碍。
纹理混合模式
原图
纹理混合模式，2个图形，第一个是纯色，第二个是贴白色纹理。
设置纹理混合模式方法（多重纹理映射，颜色也算一层）
1// 设置纹理环境，模式为REPLACE 2osg::ref_ptr<osg::TexEnv> pTexEnv=new osg::TexEnv; 3pTexEnv->setMode(osg::TexEnv::Mode::REPLACE); 4pTexEnv->setColor(osg::Vec4(0.0,0.0,0.0,0.0)); 5// Texture类关联到渲染状态StateSet 6osg::ref_ptr<osg::StateSet> pStateSet = pGeometry->getOrCreateStateSet(); 7// 将纹理关联给StateSet纹理单元0，同时将纹理环境混合模式关联到纹理单元0 8pStateSet->setTextureAttributeAndModes(0, texture2D.get(), osg::StateAttribute::ON); 9pStateSet->setTextureAttributeAndModes(0, pTexEnv.get(), osg::StateAttribute::ON);
纹理混合模式
1enum Mode { 2 DECAL = GL_DECAL, 3 MODULATE = GL_MODULATE, 4 BLEND = GL_BLEND, 5 REPLACE = GL_REPLACE, 6 ADD = GL_ADD 7};
枚举效果
代码
HUB绘制两个图形：纯色和纹理
1osg::ref_ptr<osg::Node> OsgWidget::getHudTextAndShapeNode() 2{ 3 osg::ref_ptr<osg::Group> pGroup = new osg::Group(); 4 osg::ref_ptr<osg::Geode> pGeode = new osg::Geode(); 5 osg::ref_ptr<osgText::Text> pText = 0; 6 7 // 步骤一：创建HUD摄像机 8 osg::ref_ptr<osg::Camera> pCamera = new osg::Camera; 9 // 步骤二：设置投影矩阵 10 pCamera->setProjectionMatrix(osg::Matrix::ortho2D(0, 1920, 0, 1080)); 11 // 步骤三：设置视图矩阵,同时确保不被场景中其他图形位置变换影响, 使用绝对帧引用 12 pCamera->setReferenceFrame(osg::Transform::ABSOLUTE_RF); 13 pCamera->setViewMatrix(osg::Matrix::identity()); 14 // 步骤四：清除深度缓存 15 pCamera->setClearMask(GL_DEPTH_BUFFER_BIT); 16 // 步骤五：设置POST渲染顺序(最后渲染) 17 pCamera->setRenderOrder(osg::Camera::POST_RENDER); 18 // 步骤六：设置为不接收事件,始终得不到焦点 19 pCamera->setAllowEventFocus(false); 20 // 步骤七：添加文字 21 { 22 pText = new osgText::Text(); 23 pText->setFont(osgText::readFontFile("fonts/simsun.ttc")); 24 QString text = QString("苔原带"); 25 pText->setText(text.toStdString(), osgText::String::ENCODING_UTF8); 26 pText->setPosition(osg::Vec3f(0, 0, 0)); 27 pText->setCharacterSize(10); 28 pText->setColor(osg::Vec4f(1.0, 1.0, 1.0, 1.0)); 29 pText->setDrawMode(osgText::Text::TEXT); 30 pText->setAxisAlignment(osgText::Text::XY_PLANE); 31 pText->setCharacterSizeMode(osgText::Text::OBJECT_COORDS); 32 pText->setFontResolution(32, 32); 33 pText->setAlignment(osgText::Text::LEFT_TOP); 34 pText->setAlignment(osgText::Text::LEFT_CENTER); 35 pText->setAlignment(osgText::Text::LEFT_BOTTOM); 36 pText->setLayout(osgText::Text::LEFT_TO_RIGHT); 37 pText->setBackdropType(osgText::Text::NONE); 38 pText->setColorGradientMode(osgText::Text::SOLID); 39 pGeode = new osg::Geode(); 40 osg::ref_ptr<osg::StateSet> pStateSet = pGeode->getOrCreateStateSet(); 41 pStateSet->setMode(GL_LIGHTING, osg::StateAttribute::OFF); 42 pStateSet->setMode(GL_DEPTH_TEST, osg::StateAttribute::OFF); 43 pGeode->addDrawable(pText.get()); 44 } 45 pCamera->addChild(pGeode); 46 47 // 步骤八：添加图形-纯色 48 { 49 // 绘制四边形 50 // 创建一个用户保存几何信息的对象 51 osg::ref_ptr<osg::Geometry> pGeometry = new osg::Geometry; 52 // 创建四个顶点的数组 53 osg::ref_ptr<osg::Vec3Array> pVec3Array = new osg::Vec3Array; 54 // 添加四个顶点 55 pGeometry->setVertexArray(pVec3Array.get()); 56 // 注意：HUD中的XY是正常屏幕坐标,而OSG中Y屏幕向里 57 pVec3Array->push_back(osg::Vec3( 0.0, 0.0, 0.0)); 58 pVec3Array->push_back(osg::Vec3( 300.0, 0.0, 0.0)); 59 pVec3Array->push_back(osg::Vec3( 300.0, 100.0, 0.0)); 60 pVec3Array->push_back(osg::Vec3( 0.0, 100.0, 0.0)); 61 // 注意：此处若不绑定画笔，则表示使用之前绑定的画笔 62 // 创建四种颜色的数据 63 osg::ref_ptr<osg::Vec4Array> pVec4Array = new osg::Vec4Array; 64 // 添加四种颜色 65 pGeometry->setColorArray(pVec4Array.get()); 66 // 绑定颜色 67 pGeometry->setColorBinding(osg::Geometry::BIND_PER_VERTEX); 68 pVec4Array->push_back(osg::Vec4(141/255.0, 179/255.0, 222/255.0, 1.0)); 69 pVec4Array->push_back(osg::Vec4(141/255.0, 179/255.0, 222/255.0, 1.0)); 70 pVec4Array->push_back(osg::Vec4(141/255.0, 179/255.0, 222/255.0, 1.0)); 71 pVec4Array->push_back(osg::Vec4(141/255.0, 179/255.0, 222/255.0, 1.0)); 72 // Texture类关联到渲染状态StateSet 73 osg::ref_ptr<osg::StateSet> pStateSet = pGeometry->getOrCreateStateSet(); 74 // 将纹理关联给StateSet纹理单元0 75 pStateSet->setMode(GL_LIGHTING, osg::StateAttribute::OFF); 76 pStateSet->setMode(GL_DEPTH_TEST, osg::StateAttribute::OFF); 77 // 为唯一的法线创建一个数组 法线: normal 78 osg::ref_ptr<osg::Vec3Array> pVec3ArrayNormal = new osg::Vec3Array; 79 pGeometry->setNormalArray(pVec3ArrayNormal.get()); 80 pGeometry->setNormalBinding(osg::Geometry::BIND_OVERALL); 81 pVec3ArrayNormal->push_back(osg::Vec3(0.0, 1.0, 0.0)); 82 // 由保存的数据绘制四个顶点的多边形 83 pGeometry->addPrimitiveSet(new osg::DrawArrays(osg::PrimitiveSet::QUADS, 0, 4)); 84 // 向Geode类添加几何体(Drawable) 85 pGeode = new osg::Geode; 86 pGeode->addDrawable(pGeometry.get()); 87 } 88 pCamera->addChild(pGeode); 89 // 步骤九：添加图形-纹理 90 { 91 // 绘制四边形 92 // 创建一个用户保存几何信息的对象 93 osg::ref_ptr<osg::Geometry> pGeometry = new osg::Geometry; 94 // 创建四个顶点的数组 95 osg::ref_ptr<osg::Vec3Array> pVec3Array = new osg::Vec3Array; 96 // 添加四个顶点 97 pGeometry->setVertexArray(pVec3Array.get()); 98 // 注意：HUD中的XY是正常屏幕坐标,而OSG中Y屏幕向里 99 pVec3Array->push_back(osg::Vec3( 300.0, 100.0, 0.0)); 100 pVec3Array->push_back(osg::Vec3( 600.0, 100.0, 0.0)); 101 pVec3Array->push_back(osg::Vec3( 600.0, 200.0, 0.0)); 102 pVec3Array->push_back(osg::Vec3( 300.0, 200.0, 0.0)); 103 // 创建四种颜色的数据 104 osg::ref_ptr<osg::Vec4Array> pVec4Array = new osg::Vec4Array; 105 // 添加四种颜色 106// pGeometry->setColorArray(pVec4Array.get()); 107 // 绑定颜色：清空颜色，不然纹理会带有前面的颜色 108 pGeometry->setColorBinding(osg::Geometry::BIND_PER_VERTEX); 109 pVec4Array->push_back(osg::Vec4(0, 0, 0, 0)); 110 pVec4Array->push_back(osg::Vec4(0, 0, 1, 1)); 111 pVec4Array->push_back(osg::Vec4(0, 0, 0, 1)); 112 pVec4Array->push_back(osg::Vec4(0, 1, 0, 0)); 113 // 读取纹理图片 114 osg::ref_ptr<osg::Image> pImage = 0; 115 pImage = osgDB::readImageFile(QString("D:/qtProject/osgDemo/osgDemo/modules/osgWidget/image/iceSheet.jpg").toStdString()); 116 // 将图片关联到纹理 117 if(!pImage->valid()) 118 { 119 LOG_WARN(QString("Failed to open image file: %1").arg(QString::fromStdString(pImage->getFileName()))); 120 return 0; 121 } 122 osg::ref_ptr<osg::Texture2D> texture2D = new osg::Texture2D; 123 texture2D->setImage(pImage.get()); 124 // 绑定纹理后，释放内部的ref_ptr<Image>，删除image图像 125 texture2D->setUnRefImageDataAfterApply(true); 126 // 创建纹理顶点 127 osg::ref_ptr<osg::Vec2Array> pVec2Array = new osg::Vec2Array; 128 // 纹理单元号 129 pVec2Array->push_back(osg::Vec2(0.0, 0.0)); 130 pVec2Array->push_back(osg::Vec2(1.0, 0.0)); 131 pVec2Array->push_back(osg::Vec2(1.0, 1.0)); 132 pVec2Array->push_back(osg::Vec2(0.0, 1.0)); 133 pGeometry->setColorBinding(osg::Geometry::BIND_PER_VERTEX); 134 // 设置纹理环境（决定是否和原先的颜色融合） 135 // 设置纹理环境，模式为REPLACE 136 osg::ref_ptr<osg::TexEnv> pTexEnv=new osg::TexEnv; 137// pTexEnv->setMode(osg::TexEnv::Mode::DECAL); 138// pTexEnv->setMode(osg::TexEnv::Mode::MODULATE); 139// pTexEnv->setMode(osg::TexEnv::Mode::BLEND); 140// pTexEnv->setMode(osg::TexEnv::Mode::REPLACE); 141 pTexEnv->setMode(osg::TexEnv::Mode::ADD); 142 pTexEnv->setColor(osg::Vec4(1.0,0.0,0.0,1.0)); 143 // Texture类关联到渲染状态StateSet 144 osg::ref_ptr<osg::StateSet> pStateSet = pGeometry->getOrCreateStateSet(); 145 // 将纹理关联给StateSet纹理单元0 146 pStateSet->setTextureAttributeAndModes(0, texture2D.get(), osg::StateAttribute::ON); 147 pStateSet->setTextureAttributeAndModes(0, pTexEnv.get(), osg::StateAttribute::ON); 148 pGeometry->setTexCoordArray(0, pVec2Array.get()); 149 pStateSet->setMode(GL_LIGHTING, osg::StateAttribute::OFF); 150 pStateSet->setMode(GL_DEPTH_TEST, osg::StateAttribute::OFF); 151 // 为唯一的法线创建一个数组 法线: normal 152 osg::ref_ptr<osg::Vec3Array> pVec3ArrayNormal = new osg::Vec3Array; 153 pGeometry->setNormalArray(pVec3ArrayNormal.get()); 154 pGeometry->setNormalBinding(osg::Geometry::BIND_OVERALL); 155 pVec3ArrayNormal->push_back(osg::Vec3(0.0, 1.0, 0.0)); 156 // 由保存的数据绘制四个顶点的多边形 157 pGeometry->addPrimitiveSet(new osg::DrawArrays(osg::PrimitiveSet::QUADS, 0, 4)); 158 // 向Geode类添加几何体(Drawable) 159 pGeode = new osg::Geode; 160 pGeode->addDrawable(pGeometry.get()); 161 } 162 pCamera->addChild(pGeode); 163 164 pGroup->addChild(pCamera.get()); 165 return pGroup.get(); 166}
入坑
入坑一：纹理第一个图形A有颜色后，B绑定纹理有A最后一个点的颜色
解决方法：
设置纹理混合模式为替代。
工程模板：对应版本号1.18.0
对应版本号1.18.0
上一篇：《OSG开发笔记（二十）：OSG使用HUD显示文字》
下一篇：《OSG开发笔记（二十二）：OSG场景背景》
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：https://blog.csdn.net/qq21497936/article/details/97614261
本文同步分享在 博客“红胖子(AAA红模仿)”（CSDN）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。