webGL

来源：互联网发布：三体电影跳票知乎编辑：程序博客网时间：2024/06/11 09:29

var canvas = document.getElementById(“”).getContext（’webgl’）访问webgl；用变量保存后进行相关操作。
创建缓冲区>>绑定缓冲区>>给缓冲区传送数据。
a. 创建缓冲区： var aBuffer = canvas.createBuffer();
b. 绑定缓冲区:canvas.bindBuffer(cxt.ARRAY_BUFFER,aBuffer);//前一个参数表示针对顶点，还可以是ELEMENT_ARRAY_BUFFER//针对索引。
c.给缓冲区数据
canvas.bufferData(canvas.ARRAY_BUFFER,data,STATIC_DRAW)
//第二个参数是一个数组，保存顶点信息，第三个参数表示缓冲区数据不产生任何变化，一次定义，多次使用，还可以是DYNAMIX_DRAW数据频繁变化，多次定义多次使用。STREAM_DRAW,一次性使用。
var data = [];
data[1.0,1.0,
0.5,0.5,
1.0,1.0];
var postion = canvas.getAttribLoction(program,’pos’)//返回属性索引，第一个参数是程序对象，之前初始化过，第二个参数是变量。
canvas.vertexAttribPointer(position,2,canvas.FLOAT,false,0,0);//第一个参数表示属性索引，第二个表示每个顶点的维度，第三个表示类型，第四个通常为false，后两个表示存储方式和起始位置。
canvas.enableVertexAttribArray(position);//激活指定的属性索引。
进行渲染。
init shader 初始化程序。
var program = initShader(canvas,vertexShaderSource,fragmentShaderSource);
第一个参数为访问webGL的变量，后两个参数为着色器的源代码。
更多信息可以学习three.js框架。

0 0