在前端的方向上，webGL是一个典型的利基领域，没有多少人真正理解它。甚至有些学生用三个申请编写了3D应用程序。
这样做的原因是WebGL技术堆栈与传统的Web Front -End技术有很大不同。从依次使用的是，传统的Web Front使用的API相对先进，并且没有太多的基础概念需要是理解。WebGL的核心是OpenGL，它是Web上的OpenGL的实现。Opengl用于通过操作GPU来完成图形图。因此，其API相对较低，并且使用复杂的使用，这使得某些工程师很难适应前端开发，因此他们会感到学习阈值更高。
实际上，了解和学习WebGL并不难。我们只需要了解GPU，了解IT和CPU之间的区别，然后了解运行GPU代码-GLSL的语言，了解颜色设备的基本概念和用法，您可以轻松地了解WebGL的基本原理，然后花一点时间和耐心，然后慢慢学习WebGL API来掌握WebGL技术。
那么什么是GPU，与CPU有所不同？让我们看一下以下图片：
上图是CPU的工作原理。就像管道一样。数据（图中的框）是从左侧输入的，该处理在CPU中完成，然后从右侧输出。您可以理解有6个这样的频道，因此您可以同时处理6个任务。
CPU的工作能力与管道本身（频率）的处理速度（频率）的数量有关。频率越高，操作处理单个任务的速度越快。任务越多。
尽管现代计算机的CPU计算能力非常强大，但它也有局限性。对于某些情况，它不擅长图形渲染。
我们知道计算机图像由像素组成。可以简单地理解为SO称为的像素为1x1颜色的小正方形，最终在显示器上呈现。
当前的显示设备非常高级，并且可以使用许多像素来准确组成。前端CSS中的单元是像素单元。长而宽的图片在逻辑上是由480,000个像素组成的。如果要计算此图片的像素并使用CPU计算，则单核CPU需要处理480,000个小任务，就像下面的图片：
并非CPU无法完成此类过程。每个像素的计算可能非常简单（只需处理颜色），但是数字太大，CPU的结构也会导致负担。GPU出现了。
与CPU不同，GPU可以被视为由大量小管道组成的结构。每根管道只能处理“一粒沙子”。这样，如果有一个600像素X800像素的图片，则形成了480,000个Pipelinesthe GPU，可以同时处理这480,000个像素！实际上，GPU几乎完成了。
WebGL使用JavaScript来准备数据，通过共享数据结构将数据传递到GPU，通过GPU着色，然后将处理的数据输出到帧缓冲区，最后将其呈现。
这些关键是前两个步骤，即准备数据和颜色处理。其中，准备数据通常是通过JavaScript的类型数组（TypedArray）的类型数组，并且着色处理是通过WebGL程序实现的，以实现特殊的GLSL语言。在WebGL中，着色阶段通常分为两个步骤，分为两个步骤，这些步骤是垂直的颜色和碎片颜色。
我之前还说，WebGL API相对较低，因此操作很乏味，但是也有许多JS库帮助我们封装了基本操作。因此，我们可以首先跳过乏味的API零件，并使用我的简单包装包装。开源库GL-Renderer学习WebGL的数据和颜色部分。
手动练习是理解问题的最佳方法之一，所以让我们编写一个代码。
https://code.juejin.cn/pen/7098235100726296589
在上面的代码中，JS部分已被充分理解，但是片段变量中有一个字符串，需要我们注意的部分。是的，这是两个着色器的颜色设备代码。
该代码用GLSL语言编写，但并不难理解。第一个句子显示颜色设备是WebGL 2.0版本的颜色设备。浏览器当前支持两个版本：WebGL 1.0和WebGL 2.0。但是差异不是很大。
第二句话表明浮点数的准确性是高精度。这可以暂时忽略。将来，将在一系列文章中详细解释。
第三个句子说明是输出变量。它的类型是四维矢量，用于表示RGBA颜色值。它与css.的颜色不同，但是在颜色设备中，RGBA的值为0到1。
这是主要函数，表明Fragcolor设置为红色。
？您可以尝试在掘金上修改掘金中的代码，将VEC4（1、0、0、1、1）更改为VEC4（0、1、0、1）以查看会发生什么？
有必要在这里解释为什么整个平板电脑会变成红色。我仍然记得GPU是并行计算的，即，该颜色设备代码平行于每个像素（严格地说，根据图形组件的结果，，执行相应区域的像素，但首先是Herlet的跳过），因此在整个画布，所有像素，您都可以认为您已经一遍又一遍地执行了颜色设备代码，并且在此处执行。同一时间和平行。因此，整个画布已变成红色。
我们可以修改上述示例的代码，以查看每个像素的不同颜色的情况：
我们修改了上述代码，并将其添加到颜色设备中。这是一个分辨率变量，该变量声明了两个维矢量。我们经过画布的宽高。
它是一个构建的变量，指示画布中当前渲染像素的坐标。左下角是[0,0]，右上角是[宽度，高度]，因此您可以“返回”坐标值（即将到来的值限制为0到0?1范围，这是数学在编写颜色时经常使用的技能）。然后我们将ST的价值传递给Fragcolor，因此最终操作的结果如下：
https://code.juejin.cn/pen/7098245674088612
通过此示例，我们可以简单地了解颜色设备片段的操作。颜色对图形非常重要。在随后的文章中，我们仍然有很多逐渐学习的技能。
但是现在我们首先回头解决问题。为什么这里的剪辑在整个画布上生效？
因此，让我们看一下另一个颜色设备：顶点颜色设备。
仍然是旧方法，练习-LET修改代码：
https://code.juejin.cn/pen/709824752191766542
y在WebGL中，默认范围从-1到1，因此WebGL平面坐标系的原始点位于中心，左下角为[-1，-1]，右下角为[1，-1]，右上角是[1，1]，左上角是[-1,1]。我们设置了位置的三个顶点后，屏幕上的绘图变成了三角形。
我们之所以没有指定顶点阴影，是因为GL-Renderer具有默认的顶点colorrist。代码如下：
我们还可以指定顶点阴影，我们可以继续修改代码：
https://code.juejin.cn/pen/7098253710907670564
上述代码我们指定顶点shamer。在其中，我们将我们传递给0.5的顶点坐标，因此最终绘制的三角形周长是原始的1/2。
由于三角形是WebGL的基本图形，因此WebGL支持点，行，三角形和其他基本图形。以下代码我们更改了地图。
https://code.juejin.cn/pen/7098254635743313927
最后，还有一个问题。当我们默认时，当我们默认时，绘制的图形为整个帆布范围，但是WebGL不支持四边形图形元素。那么如何定义我们的原始图纸范围？
我将这个问题视为本文的帖子问题，以解决下一篇讲座。
上述内容中有任何问题，欢迎在评论区域讨论。
原始：https：//juejin.cn/post/7098256201661546532