新手织梦网建设网站,wordpress简洁博客模板,wordpress关闭头像,做网站app优惠活动的知识了解#xff1a; 着色器#xff1a; 顶点着色器: 用来描述顶点的特性,如位置、颜色等#xff0c;其中#xff0c;顶点#xff1a;是指二维或三维空间中的一个点比如交点或者端点。 片元着色器#xff1a;用来进行逐片元处理操作#xff0c;比如光照、颜色叠加等 着色器 顶点着色器: 用来描述顶点的特性,如位置、颜色等其中顶点是指二维或三维空间中的一个点比如交点或者端点。 片元着色器用来进行逐片元处理操作比如光照、颜色叠加等其中片元可以理解为像素逐片元处理就是逐个对像素进行处理。 初始化着色器 initShaders (gl, vshader, fshader)在WebGL系统内部建立和初始化着色器。 gl:指定渲染上下文 vshader:指定顶点着色器程序代码(字符串) fshader:指定片元着色器程序代码(字符串) html页面和JavaScript脚本
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlescript src./lib/webgl-utils.js/scriptscript src./lib/webgl-debug.js/scriptscript src./lib/cuon-utils.js/scriptscript src./js/helloPoint.js/script
/headbody onloadmain()canvas idcanvas width400 height400/canvas
/body/html // helloPoint.js
// 6-13行是是顶点着色器程序GLS ES语言作为字符串被存储在变量vshader_source中。其中顶点着色器程序本身从main()开始运行和c语言程序一样。
// 逐点操作)顶点着色器: 用来描述顶点的特性,如位置、颜色等
// 顶点是指二维或三维空间中的一个点比如交点或者端点
/*** GLSE中的数据类型* type float:表示浮点数* type vec4:表示由四个浮点数组成的矢量。矢量可译为向量是既有大小又有方向的量* 齐次坐标使用如下的符号描述:(x,y,z,w)。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果齐次坐标的第4个分量是1,你就可以将它当做三维坐标来使用。w的值必须是大于等于0的。如果w趋近于0,那么它所表示的点将趋近无穷远,所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在,使得用矩阵乘法来描述顶点变换成为可能,三维图形系统在计算过程中,通常使用齐次坐标来表示顶点的三维坐标。* type vec3:表示由三个浮点数组成的矢量* 注意,如果向某类型的变量赋一个不同类型的值,就会出错。*/
var vshader_source
void main(){// 设置点的位置,必需赋值,否则无法正常工作gl_Position vec4(0.0,0.0,0.0,1.0);// 设置点的大小尺寸,这个是可选的,默认是1.0gl_PointSize 10.0;
}// 17-22行是是片元着色器程序GLS ES语言作为字符串被存储在变量fshader_source中
// 逐片元操作)片元着色器用来进行逐片元处理操作比如光照、颜色叠加等
// 片元可以理解为像素逐片元处理就是逐个对像素进行处理
var fshader_source
void main(){//设置点颜色gl_FragColor vec4(1.0,0.0,0.0,1.0);
}//以上着色器以JavaScript字符串形式编写的着色器语言程序
// 以下是主程序JavaScript语言
function main () {// 获取canvas元素var canvas document.getElementById(canvas)// 获取webGl绘图上下文var gl getWebGLContext(canvas)if (!gl) {console.log(获取webGl绘图上下文失败)return}// 初始化着色器/*** initShaders (gl, vshader, fshader)* 在WebGL系统内部建立和初始化着色器。* 参数* param gl:指定渲染上下文* param vshader:指定顶点着色器程序代码(字符串)* param fshader:指定片元着色器程序代码(字符串)* 返回值* return true:初始化着色器成功* return false:初始化着色器失败*/// 可以简单理解gl_Position和gl_PointSize两个全局变量从顶点着色器传递到片元着色器if (!initShaders(gl, vshader_source, fshader_source)) {console.log(初始化着色器失败)return}// 设置canvas背景色gl.clearColor(0.0, 0.0, 0.0, 1.0)// 清空canvasgl.clear(gl.COLOR_BUFFER_BIT)// 绘制一个点// gl.drawArrays (mode, first, count)/*** gl.drawArrays (mode, first, count)* 执行顶点着色器,按照mode参数指定的方式绘制图形。* 参数* mode 指定绘制的方式,可接收以下常量符号:gl.POINTS, gl.LINES, gl.LINE STRIP, gl.LINE LOOP, gl.TRIANGLES, gl.TRIANGLE STRIP, gl.TRIANGLE FAN * first 指定从哪个顶点开始绘制(整型数)* count 指定绘制需要用到多少个顶点(整型数)* 返回值 无 * 错误 * INVALID ENUM 传入的mode参数不是前述参数之一* INVALID VALUE 参数first或count是负数*/gl.drawArrays(gl.POINTS, 0, 1)
}
效果
