关于WebGL你需要了解的一切

IT资讯 2018-08-06 63 次浏览 0 条评论

传统上,Web浏览器使用CPU来呈现内容,但近年来浏览器已经采用了对硬件加速的支持,这意味着Web开发人员现在可以利用设备的GPU来渲染复杂的图形。

这个JavaScript API使网络更加身临其境。

可以在浏览器中使用3D技术来创建美观且极具吸引力的交互式用户体验。 WebGL是一种JavaScript API,用于在浏览器中实时渲染3D和2D图形。它基于OpenGL ES--用于智能手机和平板电脑等嵌入式系统的软件API。

 

使用three.js开始使用WebGL
这是一种难以理解的语言,但幸运的是,有许多JavaScript库使WebGL更易于访问,例如Babylon.js和three.js。这种技术正在融合传统网络开发人员,游戏开发人员和视觉特效艺术家之间的技能,所有这些学科共同合作,在网络上开发互动体验。

了解基本的视觉特效原则至关重要 - 照明,相机,动画和3D几何都会发挥作用 - 掌握JavaScript框架和HTML至关重要。

为Web导出3D

与将3D资产导出到WebGL环境相关联的特定问题是文件的权重。在处理3D模型等重型资产时,在资产创建过程中必须格外小心,以确保模型的有效加载。

有许多因素可以增加3D模型的大小,但有三个很好的规则可以帮助减轻浏览器的重量:

1.良好的拓扑结构

拓扑是指3D模型的网格流 - 网格越清晰,模型越有效,意味着使用的多边形越少,资产的总重量就越小。

2.法线贴图

这是在3D资源上创建详细凸起纹理同时保持低多边形数量的绝佳方法。这些地图创建的细节是假的,但可以非常有效。通常,使用详细网格创建更高分辨率的模型,由此可以导出法线贴图并将其包裹在下部多边形模型周围以创建详细对象的错觉。

3.文件格式

当WebGL最初发布时,开发人员创建了自定义导出器,以将3D资产交付到WebGL引擎中。没有标准或管道,导致不一致的结果和错误。最近,Khronos集团创建了文件格式glTF,用于开发一种用于共享3D图形的开放,免版税的可互操作格式,并被称为“JPEG for 3D”。

创建GlTF是为了满足对3D的通用图形文件格式的需求,这与JPEG是照片的标准化非常相似。 GlTF可以保留与3D文件相关的复杂信息,例如场景数据,材质,几何体,动画,皮肤,GLSL着色器和纹理文件。

GLTF仍然是一种非常新的文件格式,时间将告诉大型3D软件包是否采用它。但是,Khronos Group已经发布了几个glTF出口商,用于Unity和Blender等流行工具。

WebGL的实际用例

与任何新媒体一样,WebGL首次发布时会产生一系列创造力,随着开发人员和艺术家对该技术进行实验,会产生各种奇怪而美妙的体验。随着采用率的提高,最近才开始出现实际应用。

大品牌采用WebGL来更有效地渲染图形 - 例如,PS4 UI由WebGL提供支持

过去,教育机构创建了Flash应用程序,以用作交互式学习工具。虽然当时这些对于吸引学生并以易于理解的形式教授复杂科目非常有用,但现在它们已经过时,不可扩展,并且在现代浏览器中不受支持。 WebGL取代了Flash,在这种情况下,它被用于创建可以应对复杂图形和交互的直观学习工具。

大品牌也采用了WebGL来更有效地渲染图形。例如,PS4 UI由WebGL提供支持,使其菜单和元素能够以最小的延迟平稳运行。当用户登录PS4时,他们正在运行WebGL代码。

建筑行业也在大力投资,使3D可视化更易于访问,甚至进一步融入WebVR,以便在展示属性时让客户沉浸其中。在电子商务中,特别是对于高价值物品,WebGL被用于以复杂的细节渲染3D模型。它为用户提供了一层交互式自定义工具,使他们能够实时更新其产品可视化。这种方法使产品对潜在客户变得更加真实和有形。
探索虚拟现实

WebGL是开始探索其他3D技术(如WebVR和WebAR)的跳板。谷歌,Mozilla和微软都在帮助定义VR和AR如何成为未来浏览体验的一部分。

将VR引入网络的美妙之处在于随之而来的可访问性。允许通过URL轻松访问VR内容 - 以及无需通过应用商店即可创建和分发内容的能力 - 为品牌,教育工作者和零售商提供了前所未有的感受。这仍然是一个新世界,但它正在迅速普及和需求。

作为VR浏览器的强大先锋,2015年底,Mozilla通过推出A-Frame使这项技术更加便捷:支持Vive,Rift,Daydream,Gear VR,Google Cardboard和桌面的三人组合VR架构经验。

随着A-Frame的推出,Mozilla使这项技术更加便捷

A-Frame为网络上的VR提供了一个界面,使开发人员能够相对轻松地创建真正的VR体验。它可以处理设置虚拟现实所需的左右摄像头并提供默认行为,包括使用移动设备的陀螺仪以允许使用耳机在场景周围进行自由旋转移动。 A-Frame还推出了耳机图标,以便为兼容的移动设备提供VR体验。

A-Frame为当今称为WebVR的浏览器规范铺平了道路。然而,由于可以体验到的设备范围,在浏览器中体验VR可能有些不可预测。由于老一代手机难以渲染场景并导致帧速率下降,因此在智能手机上观看内容时仍然存在问题。由于体验的重量,它还需要良好的互联网连接。所有这些因素都可以轻松打破VR体验的沉浸。

对于媒体而言,现在还处于初级阶段,但随着VR变得越来越主流,看到网络如何适应提供这种类型内容的更易于访问的版本并观看开发人员在这个领域发挥他们的创造力,这是令人鼓舞的。

增强现实

WebAR是浏览器的下一个合乎逻辑的步骤,它将数字内容与现实世界相结合,以创建增强现实。虽然它仍处于初期和实验阶段,但谷歌在这一领域取得了很大进展,并发布了多种工具和演示。

WebARonARKit和WebARonARCore都是iOS和Android的实验性应用程序,使开发人员能够使用Web技术创建AR体验。 Three.js发布了three.ar.js,通过在three.js之上添加帮助类,可以更轻松地创建AR体验。由于这项技术处于早期阶段,因此它确实意味着这些体验只能在实验性浏览器中查看。

随着VR,AR和最终混合现实的采用,浏览器不可避免地通过提供身临其境的在线体验来效仿。 3D网络技术的使用速度比以往任何时候都快。随着WebAR背后的巨大推动,看到景观如何发展并为浏览增添另一个维度令人兴奋。

0
小包子

【 飞龙网.com:小包子】为你推荐!我的文章如同我的名字,香甜可口,咸淡适宜,油而不腻,阅后令你回味无穷尽哦~

发表评论