在OpenGL中创建按钮和图标

Question

我正在尝试使用类似于MS Paint的OpenGL编辑,使用面板和所有.我在哪里可以找到有关如何创建按钮和图标的材料？

PS - 我确实找到了提供此类实体的GLUI,但我不允许使用GLUT以外的任何其他内容.

源代码(如果提供)将非常有用..

Answer 1

在OpenGL编程上是一个名为"使用函数指针创建简单按钮(+源)"的示例

这是一个循序渐进的教程,展示了如何使用链接列表和函数指针在OpenGL和C中创建基本按钮.

可能它会帮助你.

Answer 2

由于这个问题没有指定语言（OpenGL 除外），所以我可以提供与 OpenGL 相关的信息/建议。

实际上，您需要：

• 顶点着色器：它将渲染面向屏幕的四边形或图块。
• 片段着色器：将从图块集纹理渲染图块位置

void main(void) {
   vec2 tile = texture2D( uTilenum, vTexCoord).xy;                  // Choose the specific tile to use from integer texture
   vec2 spriteOffset = floor( tile * 256.0 ) * uTileSize_pix; // Find the distance to the tile corner in pixels
   vec2 spriteCoord = floor( mod( vPixelCoord, uTileSize_pix ) ) + vec2( 0.5, 0.5 );         // Choose the pixel within the tile

   gl_FragColor = uColor * texture2D( uTileset, ( spriteOffset + spriteCoord ) * uInverseTilesetSize_pix );
}

• 菜单纹理：分为代表您的按钮选择的图块集。例如：来自我制作的 Simcity 游戏：https://i.stack.imgur.com/mgjav.jpg
• 描述菜单的某种形式的结构。我个人使用类似于 HTML 的格式，因为它众所周知且清晰。然后，我使用文本解析器解析该结构以创建菜单结构。我将源列为图块集中的“图块编号”。

<button name='button1' align='bottom left' onTouch='switchMovementMode'>
    <img name='btn1img' src='74,75|90,91' width='100' height='100'></img>
</button>
<button name='button2' align='bottom left'>
    <img name='btn2img' src='76,77|92,93' width='100' height='100'></img>
</button>

• 无论您使用什么语言，用户界面对象都充当菜单元素的集合，并且至少具有 Create、CheckForInteractions 和 Draw 方法。用户界面是每个渲染通道的最后一个绘制，并且仅使用单位矩阵，因此没有透视（即，正交或平面于屏幕）。尽管我循环遍历菜单元素，在每个元素上调用子绘制，但如何绘制是首选。通过 CheckForInteractions，我个人将鼠标/手指位置传递给每个菜单元素以检查触摸/拖动/等，并让菜单元素跟踪其自己的位置。
• 菜单元素对象，用于跟踪其位置、状态和交互时的响应。如果用户界面是这样设计的，也可以绘制自己。就我而言，我让每个菜单元素在调用 Draw 之前翻译并缩放其 ModelViewProjection 矩阵。例如：通过电话进行交互。
  • touchAction = someTouchMethod();
  • holdAction = someHoldMethod();
  • 拖动操作=一些拖动方法（）；
• 可绘制对象（可以与菜单元素组合），用于跟踪绘制四边形或图块所需的数据。我个人选择了带有drawListBuffer的glDrawElements，这意味着你需要：
  • 四个顶点放入 vertexCoordinateBuffer（Java 示例）：

Vec3[] vC = new Vec3[]{
   new Vec3( -1.0f, 1.0f, 0.0f ),   // top left
   new Vec3( -1.0f, -1.0f, 0.0f ),   // bottom left
   new Vec3( 1.0f, -1.0f, 0.0f ),   // bottom right
   new Vec3( 1.0f, 1.0f, 0.0f )    // top right
};
ByteBuffer vertexCoordBuffer = ByteBuffer.allocateDirect( vertexCoord.length * 3 * 4 );
vertexCoordBuffer.order( ByteOrder.nativeOrder() );
for( Vec3 v : vC ){
   vertexCoordBuffer.putFloat( v.x ).putFloat( v.y ).putFloat( v.z );
}

• 四个纹理坐标放入一个纹理坐标缓冲区（Java 示例）：

Vec2[] tC= new Vec2[]{
   new Vec2( 0.0f, 0.0f ),  // top left
   new Vec2( 0.0f, 1.0f ),  // bottom left
   new Vec2( 1.0f, 1.0f ),  // bottom right
   new Vec2( 1.0f, 0.0f )  // top right
};
ByteBuffer texCoordBuffer = ByteBuffer.allocateDirect( texCoord.length * 2 * 4 );
texCoordBuffer.order( ByteOrder.nativeOrder() );
for( Vec2 c : Tc ){
   texCoordBuffer.putFloat( c.x ).putFloat( c.y );
}

• 绘制顺序列表（四边形的两个三角形有 6 个项目）

int[] drawOrder = new int[]{
   0, 1, 2, 0, 2, 3
};
ByteBuffer dlb = ByteBuffer.allocateDirect( drawOrder.length * 4 );
dlb.order( ByteOrder.nativeOrder() );
drawListBuffer = dlb.asIntBuffer();
drawListBuffer.put( drawOrder );

• 一个 Draw 命令，选择编译的顶点和片段着色器程序，执行属性和统一的所有预渲染分配，然后调用 glDrawElements，如下所示：

glDrawElements( GLES30.GL_TRIANGLES, drawOrder.length, GLES30.GL_UNSIGNED_INT, drawListBuffer );