WebGL学习笔记四点一-白红宇

WebGL学习笔记四点一

阅读量：6677 次

发布时间：2019-06-25

本文共 3067 字，大约阅读时间需要 10 分钟。

上一章是对图形的变换，这一章的第一节主要介绍了光栅化的过程，在创建多个颜色的三角形的过程中顶点着点器的过程如下，1、首先通过attribute的变量从javascript中获取数据，根据drawArrays()的第一个参数将获取的第一个个点的坐标值放入图形装配区，然后将值传入片元着点器，进行光栅化，就是将顶点所围城的图形内一个个像素的分片，这些分片带有本身的坐标信息然后再颜色缓冲区上色，有多少片元就调用多少次的片元着色器。重点是片元都带有坐标信息可以通过片元着色器的内置对象gl_FragCoord（gl_FragCoord.xgl_FragCoord.y）为不同片元着色.浏览网址

效果图

上代码：

<!DOCTYPE html>

<html>

<head>

<title>ColoredTriangle.html</title>

var VSHADER_SOURCE=//定点着色器

'attribute vec4 a_Position;\n'+//定义vec4的变量并且声明该变量是attribute型的

'attribute float a_PointSize;\n'+

'attribute vec4 a_Color;\n'+

'varying vec4 v_Color;\n'+

'void main(){\n'+

'gl_Position=a_Position;\n'+//将attribute的变量赋值给内部

'gl_PointSize=a_PointSize;\n'+

'v_Color=a_Color;\n'+//将数据传给片元着色器

'}\n';

var FSHADER_SOURCE=//片元着色器

'precision mediump float;\n' +

'uniform float u_Width;\n'+

'uniform float u_Height;\n'+

'void main(){\n'+

'gl_FragColor=vec4(gl_FragCoord.x/400.0,0.0,gl_FragCoord.y/400.0,1.0);\n'+//从定点着色器中接收数据

'}\n';

function main(){

var canvas=document.getElementById("webgl");

var gl=getWebGLContext(canvas);

if(!gl){

console.log("gl load fail!");

return;

}

if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器

console.log("fail init shader()!");

return ;

}

var n=initVertexBuffers(gl);

if(n<0){

console.log("failed to set the positions of the vertices");

return;

}

gl.clearColor(0.0,0.0,0.0,1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES,0,n);

}

function initVertexBuffers(gl){

var verticesColors=new Float32Array([

0,0.5,2,1,0,0,

-0.5,-0.5,4,0,1,0,

0.5,-0.5,6,0,0,1,

-0.25,0,8,1,0,0,

0.25,0,10,0,1,0,

0,-0.5,12,0,0,1,]);//类型化数组

var n=6;//点的个数

var vertexColorBuffer=gl.createBuffer();//在webGL中创建缓冲区

if(!vertexColorBuffer){

console.log("failed to create the buffer object!");

return -1;

}

gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途

gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化

var FSize=verticesColors.BYTES_PER_ELEMENT;//数组中每个元素的字节大小

//alert(FSize);

var a_Position=gl.getAttribLocation(gl.program,'a_Position');

gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,6*FSize,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数 3*FSize表示相邻两个顶点间相距的字节数也可以理解为每隔3*FSize字节取俩值是这些 0表示它的其实偏移量就是从哪开始的

gl.enableVertexAttribArray(a_Position);//开启attribute变量

//设置点的颜色

//设置点的大小

var a_PointSize=gl.getAttribLocation(gl.program,'a_PointSize');

gl.vertexAttribPointer(a_PointSize,1,gl.FLOAT,false,6*FSize,2*FSize);

gl.enableVertexAttribArray(a_PointSize);

return n;

}

</script>

</head>

</body>

</html>