webgl学习笔记2--图形绘制的几个重要方法详解

来源：互联网发布：php知名开源商城编辑：程序博客网时间：2024/05/21 08:37

上一章内容介绍了如何在2D范围内绘制一个基本的图形，本章将重点介绍webgl再绘制图形中用到的几个方法：

一, 创建着色器程序的几个方法：

1.gl.createShader(type) 根据传入type类型创建一个着色器对象

type: gl.VERTEX_SHADER或gl.FRAGMENT_SHADER

2.gl.shaderSource(shader, shaderSource)将着色器的源代码传入着色器对象

shader为刚创建的着色器对象，shaderSource为着色器源代码，即ESGL着色语言写的顶点或片元

3.gl.compileShader(shader) ,着色对象传入数据后，可以用此方法编译，返回编译好的着色器

此时，着色器对象shader已经是编译后、并区分类型的着色器

4.gl.createProgram(), 创建着色器收集程序来保存上方的着色器对象

var shaderProgram = gl.createProgram();

// 将着色器对象保存到程序上

gl.attachShader(shaderProgram, shader);

// 执行链接操作，

gl.linkProgram(shaderProgram);

// 告诉webgl引擎，这个程序对象绘制图形可用

gl.useProgram(shaderProgram);

// 将aVertexPosition的引用从着色程序中提出（方便将来赋值），至此，着色器程序已经准备

var shaderProgram.属性 = gl.getAttribLacation(shaderProgram. 'aVertextPostion');

二、创建数据缓存的几个方法

1.createBuffer(), 建立一个webglBuffer对象（可以看作数据缓冲区），保存顶点数据

2.gl.bindBuffer(gl.ARRAY_BUFFER, bufferObject); 将新建的buffer对象绑定为当前数据缓存对象

3.gl.bufferData(gl.ARRAY_BUFFER, triangleVertices, gl.STATIC_DRAW); 用顶点数据trianglevertices写到当前的webglBuffer对象中，

0 0