WebGL必须要面对和克服的困难:
- 因为OpenGL ES 2.0并没有被大多数的硬件平台所支持,所以将会导致很多设备无法运行WebGL。
- 因为OpenGL ES 2.0对JavaScript的依赖程度达到了100%,其利用JavaScript来处理应用程序的场景绘图,例如:1)计算场景中子父物体间的矩阵运算。2)Culling Calculating(计算不需要绘制的内容)。3)分类计算,用于处理透明对象等。4)计算场景所包含的所有动画数据。这些应用会因为JavaScript的计算瓶颈而受到不同程度的限制。
- 无法高效的利用Javascript处理Skinning,如果利用GPU的运算能力来处理,势必会占用过多GPU的资源,从而无法更好的协调其它效果,例如:Shadow mapping(绘制软边的阴影贴图算法)
- 借用一个例子来更进一步的剖析,例如:处理一个带有phong材质的物体,每一帧的渲染就接近多达10次以上的GL调用:
- 一、给Shader传递所包含的Matrix信息(通常1-5个Matrices)。
- 二、每个需要传递的Color参数信息都将占用一次GL调用,对于Phone材质而言,至少需要两次调用(Color &Shininess)。然而如果追求效果的最大化,那么可以把五个参数都用上(Emissive, Ambient,Diffuse,Specular, Shininess)一共产生五次GL调用。
- 三、处理定点坐标。
- 四、处理法线信息。
- 五、如果模型包含有贴图信息,那么还需要增加一次GL调用来传递UV信息。
- 六、最后再次执行GL调用完成对模型的绘制。
- 从上面的结果来看,最少也需要5次GL调用,最多可以达到14次。如果结合最终项目的需求以每秒30帧的频率来计算,其效率可想而知。
- WebGL并没有积极的去解决数据导入问题。目前为止,仅仅可以利用IMG tags来嵌入材质信息,暂不支持DXT图片压缩格式(而DXT已经被大多数的3D显卡硬件所支持)。暂无预处理技术,依然是在裸奔。在一个独立的File中不支持CubeMaps(是一个以较低性能损耗来描绘静态物体对周围环境的反射效果的捷径)。除了利用JavaScript的数组以外,没有更好的方式传递几何信息。
以上的信息可以对当前WebGL的情况有个基本的了解,其实无论比较的结果如何,未来遇到实际问题时,都是要根据实际情况来选择适用的解决方案。在这里没有谁有压倒性的优势,都各有利弊。对于开发者来讲,追求效率的同时,可以在要求不够严格的情况下选择最易上手的工具,缩短开发周期。
分享到:
相关推荐
适用于Unity WebGL的JsonNet,普通的JsonNet是不能运行在webgl上的
webgl打包后支持中文输入,unity2021已经测试,将webglinput.cs 脚本添加到inputfield组件上即可
该项目的目标是在Jam3上标准化基于WebGL和React的项目。 基于经验,它具有用于渲染和场景管理的高度优化的方法。 对于想直接进入webgl编码的创意编码人员来说,这是一个很好的起点。 特征 流 该项目使用类型。 一...
分享一套视频教程,名字叫:WebGL 可视化3D绘图框架:Three.js 零基础上手实战,挺不错的,喜欢大家喜欢
WebGL-水波纹-2D Aethersis的Water-Ripples-2D的WebGL实现-https: 观看直播: :
webgl编程指南(webgl programming guide:interactive 3D graphics programming with webgl)电子工业出版社,谢光磊翻译版本。
Unity WebGL复制和粘贴由于某种原因,Unity决定不支持WebGL中的复制和粘贴。 这是尝试将其重新添加。不保证它是完美的 :grinning_face_with_sweat: 目前,仅支持和 示例: : 指示下载并将其添加到您的项目中。 如果...
react-webgl-globe-basic-example 基本示例。 这是一个 安装 react-webgl-globe-basic-example 可作为。 npm install react-webgl-globe-basic-example 构建示例站点 安装所有依赖项后: npm install npm ...
《WebGL编程指南》的主要篇幅讲解了WebGL 原生API 和三维图形学的基础知识,包括渲染管线、着色器、矩阵变换、着色器编程语言(GLSL ES)等等,也讲解了使用WebGL 渲染三维场景的一般技巧,如光照、阴影、雾化等等。...
WebGL实验 免责声明 在查看,评估或使用此存储库中演示的任何代码或想法时,应始终牢记“实验”一词的用法。 概述 使用WebGL进行的各种实验的集合。 除了在各个演示中显示的想法外,该存储库还包含一个非常简单的...
WebGL教程_源码 # WebGL Tutorial * https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial * http://mdn.github.io/webgl-examples/tutorial/sample1/ * ...
原生UGUI的InputField空间,在WebGL中的支持不太好: 1、发布后,Arial默认字体会丢失,所以必须外部引用字体。推荐C:\Windows\Fonts\黑体.ttf 2、发布后,在InputField输入框中,无法输入中文。 *本资源主要解决...
CrossWindow-Graphics:仅用于标头的库,可简化创建:volcano:Vulkan:white_circle:OpenGL:globe_with_meridians:WebGL:cross_mark_button:DirectXwith使用CrossWindow创建金属数据结构
分享课程——WebGL可视化3D绘图框架:Three.js 零基础上手实战,附软件+PPT+代码+文档资料下载。 本课程主要的功效就是让你学习完本教程后,能够写出在浏览器上流畅运行的3D程序,包括但不限于:大数据可视化,360...
WebGL无限地形演示尝试演示。 它在Chrome浏览器中效果最好。 这是一个正在进行的工作! 到目前为止的样子: