OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话

简介: OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)本文遵循“署名-非商业用途-保持一致”创作公用协议转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

OpenGLES 与 WebGL 中顶点属性的组织格式的误解 - 一个不好笑的笑话

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino否则,出自本博客的文章拒绝转载或再转载,谢谢合作。


WebGL 中立方体顶点坐标数组:

    vertices = [
        // Front face
        -3.0, -3.0, 3.0,
        3.0, -3.0, 3.0,
        3.0, 3.0, 3.0,
        -3.0, 3.0, 3.0,

        // Back face
        -3.0, -3.0, -3.0,
        -3.0, 3.0, -3.0,
        3.0, 3.0, -3.0,
        3.0, -3.0, -3.0,

        // Top face
        -3.0, 3.0, -3.0,
        -3.0, 3.0, 3.0,
        3.0, 3.0, 3.0,
        3.0, 3.0, -3.0,

        // Bottom face
        -3.0, -3.0, -3.0,
        3.0, -3.0, -3.0,
        3.0, -3.0, 3.0,
        -3.0, -3.0, 3.0,

        // Right face
        3.0, -3.0, -3.0,
        3.0, 3.0, -3.0,
        3.0, 3.0, 3.0,
        3.0, -3.0, 3.0,

        // Left face
        -3.0, -3.0, -3.0,
        -3.0, -3.0, 3.0,
        -3.0, 3.0, 3.0,
        -3.0, 3.0, -3.0,
    ];

WebGL 中立方体面顶点坐标索引数组:

    var cubeVertexIndices = [
        0, 1, 2, 0, 2, 3,    // Front face
        4, 5, 6, 4, 6, 7,    // Back face
        8, 9, 10, 8, 10, 11,  // Top face
        12, 13, 14, 12, 14, 15, // Bottom face
        16, 17, 18, 16, 18, 19, // Right face
        20, 21, 22, 20, 22, 23  // Left face
    ];

iOS 中与上面的差别:

一是顶点坐标数组中有重复的三角形顶点组合;

二是面顶点坐标数组中仅是顶点坐标,未提供该点取纹理像素的坐标,也未提供灯光照射到该到上时光线反射计算的法线坐标;不过,WebGL 中分别提供了两个与顶点坐标数组对应的数组,分别对应顶点坐标数组中每个顶点坐标配对的纹理坐标和法线坐标;


茫然一阵后,放下,再捡起来,从稍外一层来看这个问题,

首先,对于使用顶点索引式绘制时,实际绘制是从面顶点索引缓存中来找绘制顺序,而顶点坐标缓存只是一个容器,并不决定顺序;

其次,使用顶点索引缓存的目的,就是避勉重复的顶点坐标存于缓存中,而代以坐标的索引的重复,大幅度降低了对 GPU 内存的占用;

最后,其实这是一个别人的测试代码,顶点坐标数组之所以那样存储,一是针对不使用索引方式绘制时使用,这叫做复用吗?哈哈,看您怎么理解了,方便呗,至少原作者非常的清楚其中的运行机理,所以敢于这样来写,以简化其测试的目的,这也给俺设了个难题,也正因为这个难题,让我深入理解了一些东西。二是,我好像看到它是用的四个点来表示一个未使用索引方式绘制的面?有木有?俺未做过 OpenGL 的四边形的东东,不太好说,行家们可能看得出来吧,至少不是 OpenGLES 的,这个在我了解的范围人,俺敢肯定!但,您别忘了,俺了解的范围,俺都不知道多还是少,所以您就别肯定了,还是再咨询下室外高人吧。


笑话讲完了,其实真的不好笑,不过俺刚明白的时侯,确实大气不出,小气不断地哼了几声,出人意料到是,元芳,你怎么看?有木有!





目录
相关文章
|
22天前
【ShaderToy中图形效果转译到UnityShaderlab案例分享,实现粒子场_ParticleField】
【ShaderToy中图形效果转译到UnityShaderlab案例分享,实现粒子场_ParticleField】
|
22天前
【ShaderToy中图形效果转译到UnityShaderlab案例分享,实现图形太阳_Sun】
【ShaderToy中图形效果转译到UnityShaderlab案例分享,实现图形太阳_Sun】
|
2月前
|
算法 C语言 计算机视觉
【软件设计师备考 专题 】简单图形的绘制,图像文件的处理方法(一)
【软件设计师备考 专题 】简单图形的绘制,图像文件的处理方法
25 0
|
2月前
|
算法 数据可视化 计算机视觉
【软件设计师备考 专题 】简单图形的绘制,图像文件的处理方法(三)
【软件设计师备考 专题 】简单图形的绘制,图像文件的处理方法
40 0
|
Web App开发 存储 前端开发
见微知著,细节上雕花:SVG生成矢量格式网站图标(Favicon)探究
Favicon是favorites icon的缩写,也被称为website icon(站点图标)、page icon(页面图标)或者urlicon(URL图标)。Favicon是与某个站点或网页相关联的图标,网站设计者可以多种方式建立这种图标,几乎所有浏览器都支持此功能,浏览器可以将favicon显示于浏览器的地址栏中,也可置于书签列表的网站名前,还可以放在标签式浏览界面中的页标题前
见微知著,细节上雕花:SVG生成矢量格式网站图标(Favicon)探究
|
vr&ar 图形学
【Unity3D 灵巧小知识点】 ☀️ | 使用代码控制 Image图片层级渲染 顺序
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、r美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。 Unity 平台提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、平板电脑、PC、游戏主机、增强现实和虚拟现实设备。
【Unity3D 灵巧小知识点】 ☀️ | 使用代码控制 Image图片层级渲染 顺序
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 四元数、欧拉角 与 方向向量 之间转换
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。
|
vr&ar 图形学
【Unity3D 灵巧小知识点】☀️ | Unity 屏幕坐标 和 世界坐标 之间相互转换
Unity 小科普 老规矩,先介绍一下 Unity 的科普小知识: Unity是 实时3D互动内容创作和运营平台 。 包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助 Unity 将创意变成现实。
|
JavaScript Android开发
第二十二章:动画(十一)
入口动画实际编程中的一种常见类型的动画是在页面首次可见时发生的。 页面上的各种元素可以在进入最终状态之前进行简要动画处理。 这通常被称为入口动画,可能涉及: 翻译,将元素移动到最终位置。 缩放,将元素放大或缩小到最终尺寸。
845 0
|
关系型数据库 C#
通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~
原文:通通玩blend美工(8)——动态绘制路径动画,画出个萌妹子~       2年前我在玩Flex的时候就一直有一个疑问,就是如何来实现一个蚊香慢慢烧完的Loading动画呢?     刚经历了某甲方高强度一个月的洗礼后,这几天刚好闲下来,这个问题又浮现在我脑海里。
948 0