您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

webgl是什么(gl的中文)

角形,顶点,颜色webgl是什么(gl的中文)

发布时间：2020-12-06加入收藏来源：互联网点击：

很多朋友想了解关于webgl的一些资料信息，下面是小编整理的与webgl相关的内容分享给大家，一起来看看吧。很多朋友想了解关于顶点坐标的一些资料信息，下面是小编整理的与顶点坐标相关的内容分享给大家，一起来看看吧。

参考号《WebGL编程指南》

随着学习的逐渐深入，我们对顶点着色器和片段着色器有了进一步的了解。上一篇文章《WebGL学习笔记——画三角形》直接忽略了片段着色器，因为我们没有学过片段着色器的知识。本文仍然以如何绘制三角形为例，介绍顶点着色器和片段着色器的作用，以及它们如何协作完成三角形的绘制。

目的

绘制一个彩色三角形，通过javascript代码将三角形的三个顶点的坐标和顶点对应的颜色数据(RGB)传入WebGL系统。

JavaScript创建的三角形顶点坐标和颜色值数据

varverticesColors=new float 32 array([

0.0，0.5，1.0，0.0，0.0，//第一点：坐标颜色(rgb)

-0.5，-0.5，0.0，1.0，0.0，//第二点：坐标颜色(rgb)

0.5，-0.5，0.0，0.0，1.0//第三点：坐标色(rgb)

]);最后，彩色三角形绘制的结果如下图所示。

画一个彩色三角形

WebGL系统绘制流程

WebGL应用绘制三角形的过程

整体绘制过程大致如上图所示。我经常看到类似的数字，但我以前从未理解过它们的含义。在这里，我把我对关键流程的理解记录如下：

首先，js通过WebGL提供的api创建一个buffer对象，将必要的三角形坐标和颜色信息传入缓冲区。这里传输的数据是三角形的三个顶点的坐标和三个顶点对应的颜色的RGB分量值。然后顶点着色器读取缓冲区对象的数据，根据传入的参数提取顶点坐标和三个顶点坐标对应的RGB颜色分量值。这里我想说明的是，顶点着色器不仅可以表示坐标数据，还可以处理颜色数据，甚至是任何你希望它处理的数据。之前我一直下意识的认为顶点着色器处理的是坐标数据。

得到三个顶点坐标的数据后，WebGL系统不知道是画三个点还是一个三角形。我们告诉你，我们需要画一个穿过gl的三角形。gl.drawArrays方法中的TRIANGLES参数(有关该参数的具体含义，请参见WebGL学习笔记-绘制三角形)。通过这一步，我们可以从三个顶点确定要画的三角形。从顶点确定图形(三角形)的过程称为图形组装。确定要画的三角形后，计算机仍然不知道怎么画，因为显示器是由一个个像素排列而成的(每个像素都有一个坐标值)，计算机只能通过显式发送指令“用(r，g，b)的颜色值填充(x，y)坐标的像素”来执行。所以下一步很明显就是把三角形覆盖区域的所有像素转换成这样的指令。将图形覆盖的区域转换为像素填充信息的过程称为光栅化。光栅化涉及反走样、采样算法等。这里不做介绍，只作为黑盒处理。详情请参考相关资料。你只需要知道，在这一步之后，WebGL系统会对三角形中所有像素的颜色数据进行插值。由于提供了三个顶点颜色数据，最终算法会得到平滑过渡到三个顶点颜色的颜色，这也是最终绘制结果是一个彩色三角形的原因。

光栅化

栅格化过程完成后，平铺着色器将被逐个调用。最后，每个像素将用光栅化的颜色填充，并写入颜色缓冲区(处理流程图中未显示颜色缓冲区)。在处理完最后一个图块之前，浏览器将显示最终的颜色三角形。

本文到此结束，希望对大家有所帮助呢。