webgl基础图形

WebGL的工作是绘制图形图像，了解WebGL的图形是至关重要的。

一、点

在WebGL中点是一个正方形，用一个三维坐标点vec3(x,y,z)表示点的位置，PointSize(float)表示该正方形的大小。在WebGL对应的绘制方法是gl.POINT。当然如果你想绘制一个圆形或者其他形状的点时，可以通过片元着色器来做改变，下面是一个绘制圆形点的像素着色器的代码，点一般常用来绘制粒子，关于像素着色器后面会详细介绍。

//绘制一会圆形的点。

// 取当前像素点的坐标

vec2 point = gl_PointCoord * 2.0 - vec2( 1.0 );

//如果当前像素点到中心的距离大于1就丢弃当前像素。

if( dot( point, point ) > 1.0 )

discard;

二、线

WebGL中的线在屏幕上宽度为1像素，线宽是固定不可被设置，线的类型由以下几类：

线( gl.LINES )：

线带( gl.LINE_STRIP )：

线环( gl.LINE_LOOP )：

如图介绍了 WebGL中线的绘制方法，分别对应的gl.LINES、gl.LINE_STRIP、gl.LINE_LOOP。

曲线

在WebGL中是没有曲线的，类似曲线或圆形是由很多线段(直线)构成，只是他们很细。下图解释了曲线的表示。

如果你以前没接触过图形，可能会有疑问，曲线如何绘制，在图形中，曲线也是用直线表示的，下图是一个8 16 32 64 边的圆，当边的。

三、三角形