在WebGL中创建自己的FPS:1熟悉WebGL和BabylonJS

熟悉WebGL和BabylonJS

3D是一个美好的世界！充满顶点，着色器和其他乐趣，甚至在尝试使用WebGL进行开发之前，了解此宇宙非常重要。首先，我们将研究所有这些内容，然后我们将发现BabylonJS。在路上！ 

WebGL和BabylonJS：知道我们来自哪里，知道我们要去哪里！

WebGL

WebGL是Khronos Group创建的API，目的是允许使用OpenGL ES。

OpenGL？Khronos集团？API？ 

OpenGL创建于1992年，目标是执行2D，尤其是3D计算！同时，OpenGL ES是专门为手机，游戏机以及Web等移动平台创建的规范。

Khronos小组由大型公司（苹果，谷歌，Nvidia，英特尔和许多其他公司）组成的联盟，致力于创建可免费使用的API。这些允许在不同的平台和设备上创建多媒体应用程序。

赫罗诺斯集团

当具有API（也称为编程接口）时，它是一组功能和其他乐趣，它们将允许访问服务。在这里，我们通过API访问OpenGL：WebGL 

总而言之，WebGL是一种API，可让您在浏览器中创建3D应用程序。

巴比伦JS

BabylonJS是一个JavaScript库，它将使我们能够开发将在简单的canvas标记中创建的WebGL场景。该项目由两名Microsoft开发人员（David Catuhe和David Rousset）创建，于2013年开始使用一个相对简单的库，随着众多关注者的到来，该库变得越来越重要。语言的易用性，执行速度以及打开所有类型设备的特殊性使得它在最近特别受欢迎。 

因此，BabylonJS是一个简单的工具，可以在移动设备和计算机上使用。这就是为什么我们将在本课程中使用此框架的原因。

 3D基础

星际指挥官和星际公民：两个时代，一场比赛

自首款3D游戏和应用程序以来，我们的渲染和显示功能一直在不断提高。我们从几张小巧的图像过渡到完全由计算机生成的现实世界，屏幕上显示了数千个对象，有时甚至是数百万个。

但是，没有任何改变。相反，当时存在的与今天相同。唯一的区别是我们机器的计算能力，这使我们今天取得的一些最大成就成为可能。

我们将看到3D场景的基本要素是什么，这些要素对于创建应用程序必不可少。因此，我们将观察到玩家所看到的只是作品的一小部分，并且WebGL的局限性是什么。

现场

就像本章将要讨论的几乎所有内容一样，该阶段也不是一个可见的对象。它是一个将包含所有其他对象的对象。这是一切的基础！如果我们与电影平行，那么舞台就是演员扮演角色或进行所有动作的地方。它停在相机看到的位置，但相机可以移动到所需位置。 

图形引擎

当场景将元素分组时，图形引擎将负责将它们渲染到图像中。这意味着它将数学计算流程转换为人眼可见的图像，从而使您能够探索自己所创造的世界！

注意不要将其与物理引擎混淆，后者会计算轨迹和重力。图形引擎仅照顾屏幕上可见的内容。

相机

现在我们有了一个场景和一个图形引擎来计算里面的东西，我们必须告诉它要看什么！再次像在电影院中一样，您需要使用摄像头在屏幕上渲染图像。这将具有与传统和物理相机相同的特征。

灯

3DS Max软件中的灯光表示

我们的场景已创建，其中有一个在正确位置拍摄的相机和一个图形引擎，准备接收要进行的第一个计算。但是，如果现在添加一个对象，我们只会看到黑色。需要光！灯光将照亮对象并创建阴影以支持场景中对象的存在。

网格（或对象）

最后是第一个可见元素！它们由许多点组成，这些点定义了一组本身构成面的多边形。它们共同构成了一个在这里称为网格的对象。这就是用户所看到的。山，角色，海洋，无限的空间……屏幕上显示的所有对象都是网格。

着色器

Web上的着色器-山

着色器是与网格关联的元素，它将告诉图形引擎如何根据很多参数（光，颜色，材质等的折射和反射）做出反应。它将创建阴影，颜色，物体上的光的反应...总之，您知道，没有着色器的网格在我们的场景中没有任何价值。 

因此，我们有一个场景，其中图形引擎旋转并与着色器形成网格，并由灯光照明并由相机拍摄。！我们有一切吗？

好吧-我们几乎拥有一切！最后一个元素丢失了，它并不是真正的对象，但它同样重要：渲染循环！

渲染循环

现在我们有了所需的一切，告诉场景渲染我们创建的内容并将其显示在浏览器窗口中！否则，我们可能已经完成了初步工作，计算将无法自行激活！但是还必须执行几次才能每秒显示几张图像。通常，如果游戏可以每秒产生60帧或“ 60 FPS”，则据说运行良好。

X，Y，Z轴

现在我们有了词汇表，让我们稍微协调一下。

在3D场景中，我们具有三个维度，每个维度由一个字母表示：X，Y和Z。它们将使我们能够在场景中找到自己的方式。

X，Y和Z轴

通常，3D表示形式如上图所示，Y轴朝上。在BabylonJS中就是这种情况。

• X轴代表左右移动。

• Y轴代表上下运动。

• Z轴表示深度。

这三个轴非常重要，因为我们将从各个角度使用它们。在继续之前，请确保您了解它们！ 

  

在这里！有了这些，您便拥有了构成继续学习该课程所需的基本词汇的主要术语！通过创建我们的第一个场景，我们终于可以开始做生意了！来吧，邹！ 

转自https://openclassrooms.com/en/courses/3979376-creez-votre-propre-fps-en-webgl/3979383-familiarisez-vous-avec-le-webgl-et-babylonjs