前端图形学篇为随手记,在学习推进过程会根据个人了解进行二次修改,文章中的观点可能来自看到的各个网站书籍,存在的错误或不完善的地方请谅解
It's not what you look at that matters, it's what you see.
重要的不是你正看着的是什么,而是你从中所看到的是什么。——亨利·戴维·梭罗
顶点
顶点是指二维或三维空间中的一个点,比如二维或者三维图形的端点或交点
片元
可以了解成像素,但包括大小、颜色、光源等元素。
顶点着色器(Vertex shader) 用于描述顶点特征(如位置、颜色等)的程序,它能改变几何形状的位置。它处理每个顶点的数据,例如顶点坐标,法线,色彩,和纹理坐标。
片元着色器(Fragment shader)进行逐片元处理过程如光照的程序
例子中绘制一个10像素大小的点
着色器采用GLSL ES编程语言,其是OpenGL中GLSL全称是 Graphics Library Shader Language (图形库着色器语言)的一个子集,但其采用类C的写法并不难理解。
注意:
GLSL ES是大小写敏感的强类型语言,语句必须以分号(;)结束
GLSL ES是从main()函数开始执行,程序只能有一个mian()函数
顶点着色器指定点的位置及大小
var VSHADER_SOURCE =
'void main() {\n}' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0)\n' + //齐次坐标,浮点数,必须
' gl_PointSize = 10.0;\n' + //浮点数,非必须,默认为10.0
'}\n';
片元着色器指定点的颜色
var FSHADER_SOURCE =
'void main() {\n}' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)'\n' +
'}\n';
着色器以JavaScript字符串形式编写,主程序就可以将其传给webGL进行编译
初始化着色器
辅助函数initShaders()对字符串编写的着色器进行初始化
initShaders(gl, vshader, fshader)
参数
gl 指定渲染的上下文
vshader 指定顶点着色器字符串
fshader 指定片元着色器字符串
返回值
true 初始化着色器成功
false 初始化着色器失败
注意:着色器运行在webGL中,而不是在javascript中。
完整代码
JavaScript和着色器间的数据通信
WebGL程序将顶点的位置坐标从JS传到着色器,然后在对于位置上进行绘制。
attribute变量 传输的是顶点相关的数据,全局变量,只能用在顶点着色器
uniform变量 传输的是对于所有顶点都相同的数据,全局变量,如颜色
varying变量 是从顶点着色器向片元着色器传输数据,须在两种着色器中共同声明
主要步骤:
1.着色器中声明attribute变量
'attribute vec4 a_Position;\n' +复制代码
<存储限定符><类型><变量名>
词attribute为存储限定符,声明成全局变量
2.获取attribute变量的位置,赋值js中的变量
var a_Position = gl.getAttribLocation(al.program, 'a_Position');复制代码
3.对attribute变量进行赋值
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);复制代码
vertexAttrib3f(location, v1, v2, v3)作为传值函数,第一个参数为传值参数的地址,后面为传递的数值
同理,存在
vertexAttrib1f(location, v1)
vertexAttrib2f(location, v1, v2)
vertexAttrib4f(location, v1, v2, v3, v4)
vertexAttrib3f中的3f为参数个数+参数类型,“f”为浮点数,“i”为整数
复制代码
以上步骤可以动态设置webgl着色器的参数,因此这里就可以构成用户与图形交互的一个基础,如鼠标移动,获取移动的轨迹点,并通过attribute赋值着色器进行绘制。 相对应,如果需要对片元着色器进行处理,则使用uniform进行声明,getUniformLocation获取变量存储地址,uniform4f传输数据。
齐次坐标
通过(x, y, z, w)描述,等价于三维坐标上的(x/w, y/w, z/w),w为齐次坐标系中度量分量,当w为1时等同三维坐标系。