前端技术栈是不是都玩过,那WebGL呢?

栏目: 编程工具 · 发布时间: 6年前

内容简介:前端技术栈是不是都玩过,那WebGL呢?

前端技术栈是不是都玩过,那WebGL呢?

经常玩前端代码的朋友对前端技术栈肯定都有所涉猎,例如与HTML5相关的一些新特性:localStorage、文件API、WebSocket、富媒体、canvas等。那么,WebGL您熟悉吗?

从市场价值来看,目前大部分的浏览器都支持WebGL,受众群体很广。近几年发展很迅猛,整个技术生态构建的越来越完善。

前端技术栈是不是都玩过,那WebGL呢?

早期的WebGL是由标准组织科纳斯组织(Khronos Group)发起并维护的,这个组织还运作着OpenGL、COLLADA及一些其它标准化规范。

WebGL有几大核心优势:

  • 免费授权使用,高性价比。
  • 可以做跨平台API,把 Java 作为唯一的入口语言,是一套编程API,与2D绘图类似,也是使用Canvas元素。
  • 基于OpenGL ES 2.0,OpenGL ES是3D渲染标准OpenGL的精简版。我们的移动设备商,大部分使用OpenGL ES进行3D渲染,Web GL继承了它的优良价值(性能强劲、跨平台、协调一致等)。

听了这么多好处,那WebGL究竟能做出什么呢?看看下图,一个动态的水池,是不是很酷?

前端技术栈是不是都玩过,那WebGL呢?

2D的图形世界是建立在笛卡尔儿坐标系中绘制的,写过这方面项目的都知道x坐标与y坐标。为了传递空间感知,WebGL的绘制是建立在3D坐标系中,相对于2D又新增加了一个z轴,如下图:

前端技术栈是不是都玩过,那WebGL呢?

x轴是水平由左到右,y轴是垂直由下到上,z轴是由屏幕里面指向外面。熟悉2D坐标系的朋友对于理解3D应该不是很难。

除了3D坐标系之外,WebGL是如何绘制图形的呢?我们常用的方法是用网格(Mesh)。网格是由一系列的多边形构成的物质,通过多个顶点(x,y,z)定义多边形在3D坐标系空间中的位置。3D网格另一个别名叫模型(model),示例图如下:

前端技术栈是不是都玩过,那WebGL呢?

有了网格之后,除了顶点坐标外,还需要更多的网格的属性,才能够更好的描述物质。例如物质的颜色、反光程度、光泽度等。其中,网格表面可以用位图来定义,也就是我们通常所说的纹理映射(texture map)或叫做纹理。纹理可以描述一个物质的外观,不同的纹理组合可以构建更加酷炫的效果。另外,网格的表面特性,例如一个物体的透明度、颜色和反光度等效果一般称为材质(material),它通常依赖于光源的照射呈现外观。


以上所述就是小编给大家介绍的《前端技术栈是不是都玩过,那WebGL呢?》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法神探

算法神探

[美] 杰瑞米·库比卡 / 啊哈磊、李嘉浩 / 电子工业出版社 / 2017-2 / 65

《算法神探:一部谷歌首席工程师写的CS小说》围绕程序设计典型算法,精心编织了一个扣人心弦又趣味横生的侦探缉凶故事。小说主人公运用高超的搜索技巧和精深的算法知识,最终识破阴谋、缉拿元凶。其间,用二分搜索搜查走私船、用搜索树跟踪间谍、用深度优先搜索逃离监狱、用优先队列开锁及用最佳优先搜索追寻线索等跌宕起伏又富含算法精要的情节,让读者在愉悦的沉浸式体验中快速提升境界,加深对程序世界的理解。《算法神探:一......一起来看看 《算法神探》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具