webGL程序的结构
在HTML中,动态网页包含HTML和JavaScript两种语言,引入webgl后,还需要加入着色器语言GLSLES。
我们是通过对GPU进行编程,进行渲染图形:对于GPU编程主要从下面两个方面进行编程:
webgl:APIglTranslate/glRotatefGLSL:顶点着色器-gl_Position和片元着色器-gl_FragColor
#webgl渲染管线
JavaScript通过显存的Buffer来实现顶点着色器与片元着色器的数据传递。
frameBuffer是帧缓冲区,保存顶点着色器与片元着色器渲染后的结果,可以进行进一步的操作。
#渲染过程
首先运行JavaScript程序,调用webgl的相关方法,然后顶点着色器和片元着色器就会指向,在颜色缓冲区内进行绘制,这时就清空了绘图区,最后,颜色缓冲区的内容会自动在浏览器的canvas上显示出来。
传入坐标计算显示坐标图元装备(根据坐标,组成图形)将装备好的图元变成像素的形式;(顶点着色器)片元着色器对每一个像素点进行渲染
顶点着色器的作用:将逻辑上的传入的顶点坐标,根据空间上的变换,进行计算屏幕上展示点的坐标。
#GLSL
OpenGL着色器语言让开发者可以对渲染过程拥有更多的控制
GLSL参考: