OpenGL 学习系列--基本形状绘制
作者:星陨
来源:音视频开发进阶
绘制直线
两点确定一条直线,显然绘制一条直线是需要两个顶点数据的。
定义如下顶点数据,绘制一条屏幕对角线的直线:
float[] lineVertex = {
-0.5f, 0.5f,
0.5f, -0.5f
};
而我们的顶点着色器和片段着色器也会发生一些变化,最终还是绘制一条单一颜色的直线。
顶点着色器代码:
attribute vec4 a_Position;
void main(){
gl_Position = a_Position;
}
由于是绘制的直线,相比于绘制点,就没有了 gl_PointSize变量来确定大小了。
片段着色器代码:
precision mediump float;
uniform vec4 u_Color;
void main()
{
gl_FragColor = u_Color;
}
依旧是纯色,目前还没有涉及到颜色的变化。
而在我们给着色器变量绑定数据时,依旧是通过 glGetUniformLocation
和 glGetAttribLocation
方法给 uniform
和 attribute
类型的 u_Color
和 a_Position
变量赋值。
最后还是通过 glDrawArrays
方法执行绘制。
glDrawArrays(GL_LINES, 0, 2);
GL_LINES
代表绘制的类型是直线,而 0,2
则是绘制的顶点范围。
绘制三角形
绘制三角形和绘制直线基本差不多,从两个点的直线变成了三个点的三角形。
顶点数据也发生了相应的改动,假设如下的数据,注意要以逆时针定义数据。
```js
float[] triangleVertex = {
-0.5f, 0.5f,
-0.5f, -0.5f,
0.5f, -0.5f
};
那么最后绘制时,绘制类型也会发生变化了,顶点个数范围也会变化。
```js
glDrawArrays(GL_TRIANGLES, 0, 3);
绘制三角形结果如图:
绘制矩形
显然,OpenGL 是没有提供矩形这一基本图元的,但是我们可以用两个三角形来拼接成一个矩形。
OpenGL 中提供了一个绘制类型叫做 三角形扇
,如下图所示:
在上图中,矩形的每一条边上的顶点都被两个三角形使用了,而且中心的顶点被所有四个三角形使用了。
我们不必输入四个三角形的顶点数据来绘制四个三角形从而组成矩形,可以告诉 OpenGL 重用那些顶点数据,把这些顶点作为一个三角形扇绘制。
一个三角形扇以一个中心顶点作为起始,使用相邻的两个顶点创建第一个三角形,接下来的每个顶点都会创建一个三角形,围绕起始的中心点按扇形展开,为了使扇形闭合,我们需要在最后重复第二个点。
所以,以三角形扇的形式绘制一个矩形,我们可以重新定义矩形的顶点数据:
float[] rectangleVertex = {
// 第一个点就是三角形扇的中心点
0f, 0f,
-0.5f, -0.8f,
0.5f, -0.8f,
0.5f, 0.8f,
-0.5f, 0.8f,
-0.5f, -0.8f
// 重复第二个点,使三角形扇闭合
};
而着色器代码依旧不变,绘制一个纯色的矩形,绘制代码如下:
glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
绘制类型为 GL_TRIANGLE_FAN
,顶点数量也变成了 6 个。
那么问题来了,OpenGL 到底为我们提供哪些绘制方式呢?如下表所示:
绘制圆形
现在我们要绘制一个圆形,显然 OpenGL 是没有提供圆形的绘制类型的,这就要用到上面提供的绘制方式了。
以绘制一个实心的圆形为例子:
有了上面 三角形扇绘
制矩形的例子,我们按照同样的思想,把一个圆形分成多个三角形组成,如下图所示:
我们分的三角形越多,三角形个数趋向于无限大的时候,整个图案也就越趋向于圆。
这样一来,顶点数据就不能再靠手写了。
// 圆形分割的数量,分成 360 份,可由 360 个线段组成空心圆,也可以由 360 个三角形组成实心圆
public static final int VERTEX_DATA_NUM = 360;
// 360 个顶点的位置,因为有 x 和 y 坐标,所以 double 一下,再加上中心点 和 闭合的点
float[] circleVertex = new float[VERTEX_DATA_NUM * 2 + 4];
// 分成 360 份,每一份的弧度
float radian = (float) (2 * Math.PI / VERTEX_DATA_NUM);
// 绘制的半径
float radius = 0.8f;
// 初始化圆形的顶点数据
private void initVertexData() {
// 中心点
circleVertex[0] = 0f;
circleVertex[1] = 0f;
// 圆的 360 份的顶点数据
for (int i = 0; i < VERTEX_DATA_NUM; i++) {
circleVertex[2 * i + 2] = (float) (radius * Math.cos(radian * i));
circleVertex[2 * i + 1 + 2] = (float) (radius * Math.sin(radian * i));
}
// 闭合点
circleVertex[VERTEX_DATA_NUM * 2 + 2] = (float) (radius * Math.cos(radian));
circleVertex[VERTEX_DATA_NUM * 2 + 3] = (float) (radius * Math.sin(radian));
}
把圆分成了 360 份。圆形的顶点数据也分为了三部分了,以原心作为我们的中心点,中间的 360 个点用来绘制三角形,最后一个点使得我们的图形闭合。
在绘制时依旧使用三角形扇的形式来绘制。
// 要把顶点数据个数对应上
glDrawArrays(GL_TRIANGLE_FAN, 0, VERTEX_DATA_NUM + 2);
当然,在绘制圆形时,我们也可以不单独定义原点和闭合点,直接使用圆形的 360 个顶点来绘制,最终的结果依旧会是一个圆形。
当然,我们也可以使用其他的绘制类型,比如直线,来绘制一个空心的圆形。
还是上面定义的顶点数据,但是我们只用其中分割成 360 份的那部分顶点数据就好了,也就是去掉首位两个点,然后把这个 360 个点依次连接绘制成圆形。
glDrawArrays(GL_LINE_LOOP, 1, VERTEX_DATA_NUM );
这样就完成一个圆形的绘制。
正多边形的绘制
在绘制圆形的基础上,我们还可以进行拓展一下。
要知道,最后我们的圆形实际上是一个正多边形来趋近于圆形的,只是肉眼难以观察到了,毕竟它是一个正三百六十边形…
那么假设我们要绘制正五边形、正六边形、正七边形呢?
实际上也很简单,只要把圆分成五份、六份、七份就好了。
展示一些绘制图如下:
正五边形:
正六边形:
正七边形:
小结
到此,基本讲述了 OpenGL 的绘制流程以及基本图形的绘制。
根据图形和绘制类型来采用以何种方式进行绘制,以及定义顶点数据,最后直接绘制对应图形即可。
但显然,这还是不够的,还是有很多问题的。
想要绘制一个圆形,结果却成了椭圆;想要绘制一个正五边形,却成了歪的;这到底是道德的沦丧还是人性的泯灭,一切的揭晓就在下一篇博客中了。
具体代码详情,可以参考我的 Github 项目:
https://github.com/glumes/AndroidOpenGLTutorial
参考
- http://blog.****.net/junzia/article/details/52818488
OpenGL 系列文章:
OpenGL 基础绘制流程
「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。
上一篇: python 生态观测值计算 python 有多少计算生态观测值?
下一篇: 关于霍兰德的小故事
推荐阅读
-
使用 ggplot2 绘制条形图系列的 ggplot2 学习笔记
-
OpenGL 从头开始-- II.基本图形绘制
-
从 0 开始学习 OpenGL (XI) - 基本照明模拟
-
OpenGL 学习系列--基本形状绘制
-
通过.net自带的C# WinForm开发系列图表控件来绘制饼图、柱状图和折线图的基本使用和扩展
-
41 个下载免费 3D 模型的最佳网站-使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 17. Clara.io Clara.io 是一个创建 3D 内容的全球平台,也是一个培养新 3D 艺术家的社区。Clara.io 提供+100,000个免费的3D模型,包括OBJ,Blend,STL,FBX,DAE,Babylon.JS,Three.JS格式,用于 Clara.io,Unity 3D,Blender,Sketchup,Cinema 4D,3DS Max和Maya。 使用说明:免费,标准和专业帐户仅供个人使用,如果您需要将 clara.io 用于商业用途,请与销售团队联系。 18. 3DExport 3DExport是一个市场,您可以在其中购买和销售用于CG项目的3D模型,3D打印模型和纹理。它提供15 +不同的3D格式供下载,如3DS MAX(.max),Cinema4D(.c4d),Maya(.mb,.ma),Lightwave(.lwo),Softimage(.xsi),Wavefront OBJ(.obj),Autodesk FBX(.fbx)等。它还提供15种不同的语言! 使用说明:免费下载仅供个人和非商业用途。 19. 3D Warehouse 3D Warehouse是一个开放的库,允许用户共享和下载SketchUp 3D模型,用于建筑,设计,施工和娱乐!任何人都可以免费制作,修改和重新上传内容到3D仓库,您可以找到任何您能想到的东西,如家具,电子产品,室内产品等。 使用说明:3D Warehouse中的所有模型都是免费的,因此任何人都可以下载文件以用于SketchUp甚至其他软件,如AutoCAD,Revit和ArchiCAD。 20. CadNav.com CadNav是CGI平面设计师和CAD / CAM / CAE工程师的在线3D模型库,我们提供超过50000 +免费3D模型和CAD模型下载。在CadNav网站上,您可以下载高质量的多边形网格3D模型,3D CAD实体对象,纹理,Vray材料,3D作品,CAD图纸等。 使用说明:免费下载仅供个人和非商业用途。 21. All3dfree.net 就像网站名称一样,它提供免费的3D模型,还包括Vray材料,CAD块,2d和3d纹理集合,无需注册即可免费下载。它是不断更新的,因此您可以查找或请求3DS,MAX,C4D,skp,OBJ,FBX,MTL等格式的模型。 使用说明:所有资源均不允许用于商业用途,否则您将承担责任。 22. Hum3D 自2005年以来,Hum3D帮助来自3多个国家的80D艺术家节省3D建模时间,并制作逼真的3D模型,用于电影,视频游戏,AR应用程序和可视化。所有模型均由首席3D艺术家进行验证,他们检查其是否符合专业要求和最新的3D建模标准。 使用说明:免费下载仅供个人和非商业用途。 23. Artist-3D.com 艺术家-3D 库存的免费 3D 模型下载按通用类别排序。它为人体解剖学、汽车、家具、火箭、卫星等模型提供 AutoDesk 3DS Max 格式。您还可以在浏览他们的网站时找到教程和类似类型的建模。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 24. Free the models 就像本网站的标题一样,它为3d应用程序和3d游戏引擎提供免费的内容模型。您可以为您的任何项目找到许多有趣且有用的模型!它提供3ds,wavefront,bryce,poser,lightwave,md2和unity3d格式的模型。还有一个很棒的纹理集合,可以在您最喜欢的建模和渲染程序中使用。 使用说明:您从这里下载的所有内容都可以免费使用,除非它不能包含在另一个免费的网络或CD收藏中,也不能单独出售。否则,您可以在商业游戏,3D应用程序或渲染作品中使用它。您不必提供信用,但如果您这样做,那就太好了。 25. Resources.blogscopia 本网站由一家名为Scopia的公司创建。他们制作3D图像和视频,您可以找到许多为CGI工作的信息架构设计的模型,所有这些都可以在现实生活中使用。您可以免费下载它们,但是,如果您想一次下载它们,您可以支付 3 到 9 欧元。 使用说明:您可以免费下载模型部分的所有文件。每个压缩文件都包含您也可以在此处找到的许可证。基本上,您可以对文件执行任何操作。唯一的限制是不归属于Scopia的重新分发。 26.ambientCG 1000+公共领域PBR材料适合所有人!环境CG是使用许多不同的方法和资产类型创建的,例如照片纹理(PBR),贴花(PBR),图集(PBR),照片纹理(普通),物质存档(SBSAR),雕刻画笔,3D模型和地形。您可以在所有项目中*使用它们! 使用说明:在 ambientCG 上提供下载的所有 PBR 材料、画笔、照片和 3D 模型均根据知识共享 CC0 1.0 通用许可提供。您可以复制、修改、分发和执行作品,即使是出于商业目的,也无需征得许可。信用将不胜感激。 不要满足于平庸的大理石纹理 - 立即使用我们的免费PBR大理石纹理升级您的3D设计。 27.Pixar One Twenty Eight 这是一个提供官方动画行业经典纹理的网站:皮克斯,创建于 1993 年,该纹理库包括 128 个重复纹理,现在免费提供。 它包含您来到的纹理,包括砖块和动物毛皮。肯定会有一些你可以使用的东西。 使用说明:皮克斯动画工作室的《Pixar One Twenty Eight》根据知识共享署名4.0国际许可协议进行许可。即使出于商业目的,您也可以重新混合、调整和构建您的作品,只要您以相同的条款对新创作进行信用和许可。 访问数以千计的免费纹理并提升您的设计游戏 - 立即开始下载! 28. 3DXO 即使有近 620 个免费贴纸可供下载,3DXO 也不是最大的资源,但它的内容非常有用,不需要注册。无论是简单的墙壁或地板,还是一些奇怪的小东西,您都需要的纹理都可以在此网站上看到。 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 29. 3DModelsCC0 3DModelsCC0 与其他产品的不同之处在于它包含超过 250+ 个高质量 3D 模型,并且本网站上的所有内容都是免费的,完全是公共领域!使用我们的模型时无需信用或归属! 使用说明:为每个人提供完全免费的公共领域内容。 30.Sketch up texture club Sketchup Texture Club是一个非营利性的教育和信息门户网站,由3D社区的图像促进协会管理,特别强调面向学生和建筑和室内设计专业人士的可视化和渲染技术,以及所有正在学习3D可视化的人。 使用说明:您无需支付版税或使用费。纹理可以免费下载和使用。不允许将纹理作为竞争产品出售或重新分发,即使图像被修改也是如此。 31. FlippedNormals FlippedNormal 是一个提供计算机图形和 3D 资产的市场,您可以找到许多用于雕刻、建模、纹理、概念艺术、3D 模型、游戏资产或课程的高级资产! 使用说明:使用权限可能因型号而异。因此,在下载文件之前,请仔细检查每个下载页面上的许可证和使用权限。 32. NASA 3D NASA 3D网站是一个在线门户,提供与太空和各种NASA任务相关的大量三维模型和模拟。该网站是用户友好的,并提供有关每个型号的详细信息。该网站允许用户探索和下载几种不同格式的模型,包括 OBJ、STL 和 FBX,只需单击下载按钮即可。 使用说明: 要下载模型,只需单击模型页面上的下载按钮并选择所需的格式。 33. 3DAGOGO (Astroprint) 3DAGOGO 是一个提供广泛 3D 模型的网站,包括角色、车辆和建筑物。3DAGOGO 的独特功能之一是它专注于适合 3D 打印的模型,使其成为希望创建物理原型或模型的设计师的绝佳资源。要使用 3DAGOGO,设计师只需在网站上搜索他们正在寻找的模型类型,然后下载 STL 格式的文件。 使用说明: 要使用 3DAGOGO,只需搜索所需的 3D 模型类型并下载 STL 格式的文件。根据需要自定义模型,并确保在将其用于商业目的之前检查使用权限。 34. FreeCAD FreeCAD是一款了不起的3D建模软件,可让您在计算机上创建令人难以置信的3D设计。该软件可免费下载和使用,它提供了广泛的工具和功能,可用于创建用于各种目的的3D模型。 该网站易于浏览,您可以找到开始使用FreeCAD的所有必要信息。此外,该网站还提供一系列教程和指南,可帮助您了解 3D 建模的来龙去脉。 使用说明: 要下载模型,请访问网站并从库中选择所需的模型。该网站还提供了一系列使用该软件的教程和指南。 35. Pinshape Pinshape是一个提供一系列3D打印模型的网站。网站上提供的型号质量很高,因此您可以确保您的最终印刷产品看起来很棒。该网站提供了广泛的模型,包括从家居用品到小雕像和珠宝的所有物品。 但这还不是Pinshape所能提供的全部!该网站还允许用户上传和共享自己的3D模型。这意味着您不仅可以下载出色的模型,还可以通过分享自己的设计为社区做出贡献。此外,Pinshape 提供了一系列自定义选项,因此您可以调整和调整模型以满足您的特定需求。 使用说明: 要下载模型,请在网站上创建一个帐户,搜索所需的模型,然后单击下载按钮。该网站还为每种型号提供了一系列定制选项。 36.Yeggi Yeggi 提供了大量免费的 3D 模型,您可以下载各种格式的模型,例如 STL、OBJ 和 FBX。该网站易于使用,您可以按关键字、类别或特定网站搜索模型。 Yeggi 对于任何寻找 3D 模型的人来说都是一个很好的资源。它提供了大量的模型集合,从日常物品到复杂的机械,以及介于两者之间的一切。该网站的收藏量在不断增长,每天都有新的型号增加。 使用说明: 要下载模型,请在网站上搜索所需的模型,然后单击下载按钮。该网站还提供指向托管模型的原始网站的链接。 37. Open3DModel 来自开放3D模型的图像 Open3DModel具有各种类别的模型,包括建筑,车辆和角色。无论您需要建筑物,汽车还是人的3D模型,都可以在此网站上找到。 该网站易于浏览,您可以按类别或关键字搜索模型。每个模型都附带预览图像和详细信息,例如文件格式、大小和多边形数量。此信息可以帮助您选择适合您需求的模型。 使用说明: 要下载模型,请访问网站,从库中选择所需的模型,然后单击下载按钮。 使用最好的 3D 资产管理工具简化您的 3D 制作流程。立即试用它们,将您的 3D 项目提升到一个新的水平! 38. 3DExport 对于那些为其 3D 设计项目寻找 3D 模型、纹理和其他资源的人来说,该平台是一个很好的资源。该网站有大量模型可供选择,包括 3D 打印对象、游戏资产等。用户可以按类别、文件格式或价格范围浏览,以找到适合其项目的完美资源。此外,3DExport 还提供一系列教程和其他 3D 资源,以帮助用户提高技能并创建更令人印象深刻的设计。 使用说明: 要使用 3DExport,只需创建一个帐户并浏览可用型号。您可以按类别、格式和价格进行搜索,以找到所需的型号。找到喜欢的模型后,只需下载它并开始在您的项目中使用它。 39.Blend Swap Blend Swap是一个社区驱动的市场,提供与Blender软件兼容的各种免费3D模型。该平台允许用户共享和下载模型、纹理和其他资产,以便在他们的项目中使用。 使用说明: 创建免费帐户后,您可以浏览社区上传的大量3D模型。当您找到要使用的一个时,只需下载它并将其导入您选择的 3D 软件即可。 40. 3DShook 3DShook 是一个高级 3D 模型市场,提供一系列用于建筑、游戏等各个行业的高质量模型。该平台提供基于订阅的模型,具有不同的定价计划,允许用户访问一系列模型。 使用说明: 注册免费帐户后,只需浏览3D模型库,选择您喜欢的模型,然后以您需要的格式下载它们。 41. Smithsonian X 3D 史密森尼 X 3D 对于正在寻找历史文物和文物的高质量 3D 模型的设计师来说,这是一个独特的资源。该平台提供了大量3D模型,这些模型是根据史密森尼博物馆和研究中心中的真实物体扫描创建的。 使用说明:
-
向Excel基本功能系列第19弹学习:Datedif函数 - 按照规则计算两个日期之间的差距
-
如何画出色彩静物?色彩静物的绘画技巧分享!对于初学者来说,在开始学习色彩静物时可能会感到有些不知所措。这是因为在色彩方面,它与素描有着明显的不同。首先,工具上的区别就很大。素描通常使用铅笔,笔尖坚硬精细,因此准确性很高。然而,色彩则需要用水粉笔或扇形笔来绘制,这些笔尖较为柔软且宽大,准确性较低,因此使用起来比较困难。此外,两者在使用方法上也有所不同。素描主要是通过线条来描绘物体,而色彩则是通过笔触来表现。从色彩角度来看,素描只是一种单一的颜色,只需要关注形状、比例和明暗对比。而在色彩绘画中,除了需要注意这些因素外,还要注意色调、色相和明度等之间的关系,甚至每一笔都需要在调色板上混合出合适的颜色才能进行下一步操作。当然,色彩的感觉也是色彩绘画中非常重要的一部分。希望这些信息能帮助你更好地理解如何画出色彩静物,并在这个过程中找到属于自己的创作方法。