0.webgl初识

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/hiwoshixiaoyu/article/details/102513589

WebGL是什么呢?

WebGL其实就是JavaScript的API.
它允许了我们直接在浏览器上展示实时交互的3D图形。
WebGL是一个被Khronos小组开发的web标准,其中
Opera与Google(Chrome)、Mozilla(Firefox)、Apple(Safari)和其他3D图形开发人员一起积极参与。
webgl作为html元素的特定上下文运行,这使您可以访问javascript中的硬件加速3d渲染。
因为它运行在元素中,webgl还与所有dom接口完全集成。该api基于opengl es 2.0,这意味着可以在许多不同的设备上运行webgl,如台式计算机、移动电话和电视。您可以在KHRONOS站点查看WebGL规范。

如何运行WebGL?

  • Opera12.00 或者更高版本
  • Chrome 9或者更高版本,在linux,Mac和windows
  • Firefox4或者更高的版本
  • Safari5.1或者更高的版本
    此外好的显卡可能回提高WebGl的性能。

WebGL用来干什么?

![Alt text][https://dev.opera.com/articles/introduction-to-webgl-part-1/webgl.jpg]

  • 交互式音乐视频
  • 游戏
  • 数据可视化
  • 艺术
  • 3D设计环境
  • 空间3D建模
  • 绘制数据函数
  • 创建物理模拟

WebGL是怎么工作的?

webglbii传统的web技术复杂一点,因为它是直接使用显卡而设计的。
所以,这是比较底层的。这样就使得了他可以快速进行复杂的三维渲染,
包括大量计算。

你不需要完全理解webgl的内部工作原理。有几个webgl库可以用于减少其的复杂性。
然而你想用这些库中不包含的特性的时候,了解webgl其实更有必要。或者你想更深入了解
掌握这门技术,知道这些库咋实现的。这时候就有必要了解了解webgl内部工作原理了。

在webgl中编程时,通常要渲染某种场景。这通常包括多个后续绘制作业或“调用”,每个都是通过一个称为渲染管线的过程在Gpu中执行的。

在webgl中,与大多数实时3d图形一样,三角形是绘制模型的基本元素。因此,在webgl中绘图的过程涉及到使用javascript生成指定这些三角形将在何处以及如何创建,以及它们的外观(颜色、阴影、纹理等)的信息。然后,这些信息被输入gpu,gpu对其进行处理,并返回场景的视图。接下来我们将更详细地了解最后一点是如何发生的。

webGL渲染管线,此处略去,后续详解

我们怎么开始使用WebGL

首先要做的是获得一个支持webgl的浏览器。您可以使用您喜爱的javascript开发环境对webgl进行编码。
我们这里使用vscode的是vscode
如果要是做项目的话,我建议使用webgl的库。
因为直接调用webgl API很辛苦,它很底层。
设计webgl的人为什么这么设计呢,这是为了保持它的灵活性,通用性。
他们想的是别人的库会增加便利性,加速简化开发

大多数库都提供了现成的模型、顶点着色器和片段着色器的选择,它们可以极大地减少需要编写的代码量。如果你仍然不相信,可以看看一个月球三维模型的例子代码-有一个库,没有一个库。即使您只是简单地看一下,代码的长度和复杂度的差异也是显而易见的,这是使用库的一个很好的理由。

有许多webgl库。大多数人所做的是在WebGL的基础上创建对3D环境直观的元素,如场景、相机、光源、环境光、现成的形状、材质、纹理和效果(如雾和浮动粒子)。这些元素的概念在各个库中几乎保持不变。但是,它们的使用方式取决于库的体系结构。因为webgl可以是交互式的,所以大多数库也提供了处理事件的简单方法。最后,大多数库还提供了一些顶点和片段着色器。

选择一个WebGL的库

1.Three.js (Github)是一个轻量级的3d引擎,复杂度非常低——这是一个很好的方法。引擎可以使用、 和webgl进行渲染。这是一些关于如何开始的信息,其中对场景中的元素有很好的描述。下面是three.js api文档。就用户数量而言,three.js也是最受欢迎的webgl库,因此如果你陷入困境,可以指望一个热情的社区(irc.freenode.net上的three.js)来帮助你。

2.PhiloGL (Github)

3.GLGE (Github)

4.3D (Github)


查看WebGL源码

总结

猜你喜欢

转载自blog.csdn.net/hiwoshixiaoyu/article/details/102513589