Web设计趋势-WebGL的应用将成为重点

Posted 2021-04-25 珠峰培训

       这么多年以来，网页似乎都停留在2D的世界。2012年末开始到整个2014年，涌现出非常多采用CSS 3D变形和Parallax（视觉差，通过鼠标滑动让网页上不同层次的内容以不同的速率位移而形成一种层次感）效果的网站，让这个2D的网络世界出现了丰富的层次和纵深感。但是真正的3D（除了flash实现的）似乎没有成为网页设计师的工具，不过这种情况应该会在2014年有所改变。

      目前在html里实现无插件3D内容呈现的技术就是WebGL，这个技术其实并不复杂，微软发布的IE11已经完美支持WebGL，加上Chrome和Firefox，可以说现在是时候在网页设计里加入3D元素了。

      谈到WebGL 3D，大家可能第一个想到的就是网页游戏，但其实WebGL在网页设计中也大有可为，我觉得WebGL不仅仅可以运用在大型的全屏体验中，也完全可以作为页面元素和其他内容融合在一起，给用户一种新奇的酷炫的体验

什么是WebGL?

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把javascript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

webGL的优势

WebGL完美地解决了现有的Web交互式三维动画的两个问题：
- 第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;
- 第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

浏览器为什么能绘制3D世界?

因为浏览器实现了opengl es 的规范，这套规范可以直接使用指令操作显卡，使显卡渲染的3D世界，直接反应到浏览器中。
现在主流的Web交互式动画由Flash等浏览器插件调用DirectX、OpenGL等操纵系统图形接口实现图形渲染，调用了硬件加速。但缺点是必须下载插件
而WebGL可以直接以OpenGL接口实现HTML5的Canvas标签调用，以统一的OpenGL标准，从Web脚本生成利用硬件加速功能的Web交互式3D动画的图形渲染

WebGL能做什么

      尽管HTML5中引入了canvas标签，这个标签本身支持Web交互式三维动画的制作，但是，如果没有WebGL的支持，它并不能调用图形硬件加速功能。因此，此前虽然很多浏览器支持canvas标记，但由于性能不够好，无法得到广泛的应用。可是，一旦加入了WebGL的支持，它的面貌就焕然一新了

• 互动音乐电视

• 数据可视化、

• 艺术展示

• 3D设计环境

• 3D空间建模

• 3D物体建模

• 绘制数学函数和创建物理模拟。

• 游戏

• 家居

• 虚拟现实

• 城市地图

• CAD制图

• …..

WebGL之three.js

Three.js是一个封装好的webgl库，它使WebGL的学习更为简单。

three.js实现超火的微信游戏跳一跳  

前段时间大家都在玩微信小程序游戏跳一跳感觉不错 正好且此机会运用我们的three.js简单实现一下跳一跳的游戏

为此特意准备一次公开课 ,跟大家一起来分享一下

代码效果展示：

        https://mengqian1117.github.io/jump/jump.html

     除了带领大家玩微信小程序游戏跳一跳以外，珠峰JS公开课还为你呈现当前最流行的Echarts开发，由浅入深，玩转Echarts；从数据展示到后端服务，让你深刻理解全栈开发的魅力；

公开课时间：2018年5月24日（周四）晚上8:00-9:30

零基础HTML+CSS开课时间：2018年5月28号上午9:30

JavaScript免费课开课时间：2018年5月29号上午9:30