webgl的基础

drawArrays() − 当使用这种方法，我们通过原语使用JavaScript数组的顶点。对应使用VBO，使用Float32Array存储顶点数据

顶点缓冲区对象 (VBO) − 它保持所述图形模型，要被渲染的每个顶点的数据。我们使用顶点缓冲对象中的WebGL存储和处理关于顶点诸如顶点坐标，法线，色彩，纹理坐标数据。

drawElements() − 当使用这种方法，我们通过这两个顶点和原语使用JavaScript数组的索引。对应IBO，使用Uint16Array存储索引

索引缓冲区对象(IBO) − 它保持所述图形模型的索引(索引数据)，这是要被渲染的。

var xformMatrix = new Float32Array([

sx, 0, 0, 0,

0, sy, 0, 0,

0, 0, 1, 0,

0, 0, 0, 1

]);

创建和绑定缓冲区

//vertex buffer
var vertex_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

//Index buffer
var Index_Buffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

 

OpenGL ES SL提供了片段着色器如下面的预定义变量-

S.No.	变量	描述
1	mediump vec4 gl_FragCoord;	保存帧缓冲器中的片段位置
2	bool gl_FrontFacing;	存放属于一个前置原语的片段
3	mediump vec2 gl_PointCoord;	存放在一个点(点仅光栅化)片段的位置
4	mediump vec4 gl_FragColor;	保存着色器的输出片段的颜色值
5	mediump vec4 gl_FragData[n]	持有该片段颜色的色彩附件n