05 WebGL初始化着色器
来源:互联网 发布:虚拟骑行软件 编辑:程序博客网 时间:2024/05/20 11:21
初始化着色器函数initShaders()被定义在了cuon.util.js中
使用:
initShaders(gl, vshader, fshader);
参数:
gl 指定渲染的上下文
vshader 指定顶点着色器程序代码(字符串)
fshader 指定片元着色器程序代码(字符串)
返回值:
true 初始化着色器成功
false 初始化着色器失败
顶点着色器
var VSHADER_SOURCE="" + "void main(){\n" + " gl_Position = vec4(0.0,0.0,0.0,1.0);\n" +//设置坐标 " gl_PointSize = 10.0;\n" +//设置尺寸 "}\n";首先用js声明了一个变量将书写的GLSL ES着色器语言代码字符串赋值变量。
类似于C语言,必须包含一个main()函数, void代码这个函数不会有返回值,而且你不能为main()指定参数。
函数内部的两行代码
gl_Position 类型:vec4 表示顶点的位置 必须设置
gl_PointSize 类型:float 表示点的尺寸(像素数) 如果不设置,默认为1.0
GLSL ES数据类型
float 表示是浮点数
vec4表示由四个浮点数组成的矢量
由4个分量组成的矢量被称为齐次坐标,它能够提高处理三维数据的效率,所以被大量使用
齐次坐标:(x,y,z,w)。齐次坐标(x,y,z,w)等价于三维坐标(x/w,y/w,z/w)。所以如果齐次坐标的第四个分量是1,你就可以将它当做单位坐标来使用。w的值必须大于等于0的。如果w趋近于0,那么它所表示的点将趋近于无穷远,所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在,似的用矩阵乘法来描述顶点变换成为可能,三维图形系统在计算过程中,通常使用齐次坐标来表示顶点的三维坐标。
片元着色器
//片元着色器程序 var FSHADER_SOURCE = "" + "void main(){\n" + " gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" +//设置颜色 "}\n";顶点着色器控制点的位置和大小,片元着色器控制点的颜色。片元就是显示在屏幕上的像素(严格意义上来说,片元包括这个像素的位置、颜色和其他信息)。
片元着色器的作用就是处理片元,使其显示在屏幕上。
片元着色器将点的颜色赋值给gl_FragColor变量,该变量是片元着色器唯一的内置变量,它控制着像素在屏幕上的最终颜色。
gl_FragColor 类型:vec4 描述:指定片元颜色(RGBA格式)。
对这个内置变量赋值后,相应的像素就会以这个颜色值显示。类型和顶点着色器中的顶点位置一样,也是vce4类型。四个浮点分量,分别代表RGBA值。
绘制操作
//绘制一个点 gl.drawArrays(gl.POINTS,0,1);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.POINTS,第二个参数表示从第1个顶点开始画起,第三个参数表示仅绘制的一个点。
- 05 WebGL初始化着色器
- 51 WebGL切换着色器
- WebGL中的OpenGL着色器语言
- WebGL笔记 第二章 着色器
- 04 WebGL绘图之着色器
- WebGL笔记_着色器(三)
- WebGL 着色器语言(GLSL ES)
- 05 WebGL 着色器编程语言GLSL ES的结构体
- [WebGL入门]八,着色器的说明和基础
- [WebGL入门]十一,着色器的编译和连接
- WebGL-片元着色器 1.Bloom特效实现
- WebGL-片元着色器 2.灰度图实现
- WebGL学习系列-片元着色器简介
- 01 WebGL 着色器编程语言GLSL ES概述
- 06 WebGL 着色器编程语言GLSL ES的数组
- 10 WebGL 着色器编程语言GLSL ES的函数
- WebGL自学教程——关于WebGL着色器中的自定义函数
- 39 WebGL着色器和着色器程序对象:initShader()函数的作用
- 如何解决Nginx的session一致性问题
- cinder创建云硬盘的时候 出现 cinder-volume | linux-node2@lvm | nova | enabled | down | 2017-04-26T22:45:47.
- Java学习日志 17.04.26 新的开始
- Unity中Json转换类 JsonUtility
- Css3学习笔记
- 05 WebGL初始化着色器
- mysql5.5忘记密码重置方法
- Android 权限问题(未获取用户权限问题)
- 设计模式之建造者模式
- java JVM的内存区域(运行时数据区域)
- 15---RAID 和 LVM
- UE4快速实现涂鸦功能
- android属性动画完全解析
- Hbase高并发读写优化