HTML5+WebGL:构建 3D 网页新世界

2024-02-15 15:08

本文主要是介绍HTML5+WebGL:构建 3D 网页新世界,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今年下半年, HTML5 和 WebGL 变成极热门词语,3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展,各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D 物体形象的展示。


何谓  WebGL ?

WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口,提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准,提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。

简单的说,在此之前,3D 物体形象在网页上不能直接展示,必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案,使程序员可以直接在网页上展示物体的 3D 形象,并且这种展现直接使用设备的图形处理器的处理能力,其绘图性能能够得到保证。3D 网页技术应用很广,体验 3D 网页也非常简单,我们只需要桌面电脑支持现代的图形显示设备,同时,必须安装足够高版本的新型浏览器,诸如 firefox 和 Chrome 即可。

3D 网页游戏

先说说 3D 网页游戏,在这场技术浪潮中,先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎,为 3D 网页游戏潮流的到来提前进行技术储备。

Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”的 WebGL 3D 游戏引擎,CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎,在其网站上提供了一批 WebGL 游戏场景范例,其中不少的 3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 ResureFox 和 ambiera 网站看到。

3D 地图

而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比,3D 地图可以以旋转的视角查看街景、建筑物的立体形状,用户有身临其境的感觉,体验非华丽、无以形容。在 MapsGL 项目中,3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法,他们在“重新打造了 Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果,以及能更方便地访问街景视图。”

要查看其效果,你可以直接访问 Google Maps 网页,并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候,平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图,转动图上的罗盘或者移动鼠标,查看的视角随之转动,其效果仿佛本人在曼哈顿的街道上闲逛。


可以想象,当每个城市都完成了 3D 的建模,并通过网页提供服务,3D 地图之上能够叠加各种有趣的服务,例如:3D 寻路导航、虚拟旅游、美食查找、网络社交、网络游戏等等。这些应用目前都有 2D 版本,安装插件也可以实现不怎么流畅的 3D 效果,但在未来的 3D 网页中,逼真的 3D 城市街景呈现了流畅的视角转换后,它将带来迥异的用户体验。

3D 社交网络

3D 技术能演变出有趣应用,其中,最有趣的当属基于 3D 地图的网络社交。目前现在的社交 SNS 网站是都是基于文字、图片、视频的内容,所使用的地图是平面的地图。试想一下,未来的网络社交的背景是逼真的 3D 街景,您在“街上”行走的时候,可以真实的推开其中的一扇店门,“真实”的去某个咖啡店买一杯咖啡,还能看到朋友的 3D 形象,坐在靠窗的桌子上看书,您可以走过去和“他/她”说话。

这并非痴人说梦,Google正在做这方面的尝试:在 YoubeQ 项目中构建 Google Earth 里的 3D 社交网络。用户化身为一个 3D 小人,在Google Earth展示的街景中闲逛,碰到朋友能聊聊天。这个项目在Google Earth能够支持网页模式之后,访问势必更加简单直接。

移动设备中的 3D

和我们日常相关的,还有平板电脑上的 3D 网页应用。相比其他设备,平板电脑更适合运行 3D 网页应用。在平板电脑中,三维的立体形象与手指的操作能够很好的结合在一起。比如,Google 的 3D 圆筒书架 是在 PC 电脑实现的 3D 网页应用,书架实现为巨大的柱状多层转筒, 鼠标拖曳可以模拟 手转动书架找书。想象一下,如果该应用用在平版电脑上,用手指转动书架,然后使用一个手指向上的手势来取书,是不是更爽一些?


3D 我们的世界

可以想象,3D 网页技术普及之后,我们的世界将被充分的 3D 模型化,大到地球、宇宙天体、小到汽车、房子、电子产品、微生物、细菌,都可以有详尽的细节的 3D 形象,我们可以以此趣味的展示和探索周围精彩的世界。去年年底,Google 推出的人体浏览器 3D 网页应用,把人体进行 3D 建模,能够以各种视角 360 度查看人体每个器官,包括骨骼、肌肉、内脏器官、神经系统等。(此应用为 Google 实验室的成果,目前该应用的 Google 网页已经关闭,相关的人体 3D 医学影像由 Zygote 网站继续提供运营。有兴趣的朋友可以看看 人体浏览器的运行视频)


瓶颈

然而,先进技术的发展需要一个漫长的过程。其中,复杂物体的 3D 建模是 3D 网页主要的应用瓶颈之一,举例来说,程序员需要展示一个 3D 的轮船,把这个轮船表示为计算机能理解的多边形平面的组合是一个复杂的事情,对网页开发程序员来说,最好有现成的轮船的 3D 模型可以使用,不需要关注建模的细节。3D 网页的世界也许需要一个价格低廉的巨大 3D 模型库,囊括周围世界的各种物体。对此,Google 的做法是发动全球的爱好者 创建和共享 3D 模型,这种做法是否会造成资源垄断,和未来的中小 3D 应用开发者能否得益,那是今后值得思考的问题。

这篇关于HTML5+WebGL:构建 3D 网页新世界的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/711734

相关文章

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件:nginx.conf脚本化操作:nginx.shnpm 脚本集成总结:对前端的意义很多

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,:本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”:浏览器到底缓存了谁?三、设计思路:把“发版”做成“自愈”四、代码

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢?... 目录1. 早期的解决方案2. 交叉观察者:IntersectionObserver2.1 Inter

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

前端导出Excel文件出现乱码或文件损坏问题的解决办法

《前端导出Excel文件出现乱码或文件损坏问题的解决办法》在现代网页应用程序中,前端有时需要与后端进行数据交互,包括下载文件,:本文主要介绍前端导出Excel文件出现乱码或文件损坏问题的解决办法,... 目录1. 检查后端返回的数据格式2. 前端正确处理二进制数据方案 1:直接下载(推荐)方案 2:手动构造

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni