1.编译GLSL ES代码,创建和初始化着色器供WebGL使用。这些过程一般分为7个步骤:

创建着色器对象(gl.createBuffer());

向着色器对象中填充着色器程序的源代码(gl.shaderSource());

编译着色器(gl.compileShander());

创建程序对象(gl.createProgram());

为程序对象分配着色器(gl.attachShader());

连接程序对象(gl.linkProgram());

使用程序对象(gl.useProgram());

2.着色器对象和程序对象

着色器对象:着色器对象管理一个顶点着色器或一个片元着色器。每个着色器都有一个着色器对象。

程序对象:程序对象是管理着色器对象的容器。WebGl中,一个程序对象必须包含一个顶点着色器和一个片元着色器。

3.gl.createShader(type)创建着色器

创建由type指定的着色器对象。参数:

type:指定创建着色器对象的类型,gl.VERTEX_SHADER表示顶点着色器,gl.FRAGEMENT_SHADER表示片元着色器

4.gl.deleteShader(shader)

删除shader指定的着色器对象。参数:

shader:待删除的着色器对象

5.gl.shaderSource(shader, source)指定着色器对象的代码

将source指定的字符串形式代码传入shader指定的着色器。如果之前已经向shader传入过代码了,旧的代码会被替换掉。参数:

shader:指定需要传入代码的着色器对象

source:指定字符串形式的代码

6.gl.compileShader(shader)编译着色器

编译shader指定的着色器中的源代码。参数:

shader:待编译的着色器

7.gl.getShaderParameter(shader, pname)

获取shader指定的着色器中,pname指定的参数信息。参数:

shader:指定待获取参数的着色器

pname:自定待获取参数的类型,可以是gl.SHADER_TYPE、gl.DELETE_STATUS或者gl.COMPILE_STATUS

返回值:根据pname的不同,返回不同的值。type为gl.SHADER_TYPE,返回时顶点着色器(gl.VERTEX_SHADER)还是片元着色器(gl.FRAGEMENT_SHADER);type为gl.DELETE_STATUS返回着色器是否被删除成功;type为COMPILE_STATUS,返回是否编译成功。

8.gl.getShaderInfoLog(shader)

获取shader指定着色器的信息日志。参数:

shader:包含日志信息的字符串

9.gl.createProgram()

创建程序对象。如前所述,程序对象包含了顶点着色器和片元着色器

10.gl.deleteProgram(program)

删除program指定的程序对象,如果该程序对象正在被使用,则不立即删除。而是等它不在被使用后再删除。参数:

program:指定待删除的程序对象

11.gl.attachShader(program, shader)

将shader指定的着色器对象分配给program指定的程序对象。参数:

program:指定程序对象

shader:指定着色器对象

着色器在附给程序对象前,并不定义要为其指定代码或进行编译(也就是说,把空的着色器附给程序对象也是可以的)。

12.gl.detachShader(program, shader)

取消shader指定的着色器对象对program指定的程序对象的分配。参数:

program:指定程序对象

shader:指定着色器对象

13.gl.linkProgram(program)

连接program指定的程序对象中的着色器。参数:

program:指定程序对象

程序对象进行着色器连接操作,目的是保证:(1)顶点着色器和片元着色器的varying变量同名同类型,且一一对应;(2)顶点着色器对每个varying变量赋了值;(3)顶点着色器和片元着色器中的同名uniform变量也是同类型的;(4)着色器中的attribute变量、uniform变量和varying变量的个数没有超过着色器的上限,等等。

14.gl.getProgramParameter(program, pname)

获取program指定的程序对象中pname指定的参数信息。返回值随着pname的不同而不同。参数:

program:指定程序对象

pname:指定待获取参数的类型,可以是gl.DELETE_STATUS、gl.LINKE_STATUS、gl.VALIDATE_STATUS、gl.ATTACHED_SHDERS、gl.ACTIVE_ATTRIBUTES或gl.ACTIVE_UNIFORMS

返回值:根据pname的不同。返回不同的值。pname为gl.DELETE_STATUS,返回是否被删除(true或false);pname为gl.LINKE_STATUS,程序是否连接成功(true或false);pname为gl.VALIDATE_STATUS,程序是否已经通过验证(true或false);pname为ATTACHED_SHDERS,已被分配给程序的着色器数量;pname为gl.ACTIVE_ATTRIBUTES,顶点着色器中attribute变量的数量;pname为gl.ACTIVE_UNIFORMS,程序中uniform变量的数量。

15.gl.getProgramInfoLog(program)

获取program指定的程序对象的信息日志。参数:

program:指定待获取信息日志的程序对象

16.gl.useProgram(program)

告知WebGl系统绘制时使用prgoram指定的程序对象。参数:

program:指定待使用的程序对象

WebGL 创建和初始化着色器过程的更多相关文章

  1. [WebGL入门]十一,着色器编译器和连接器

    注意:文章翻译http://wgld.org/,原作者杉本雅広(doxas).文章中假设有我的额外说明.我会加上[lufy:].另外.鄙人webgl研究还不够深入.一些专业词语,假设翻译有误.欢迎大家 ...

  2. Initialize the shader 初始化着色器

    目录 Loads the shader files and makes it usable to DirectX and the GPU 加载着色器文件并使其可用于DirectX和GPU Compil ...

  3. WebGL中的OpenGL着色器语言

    在webgl中,调用了OpenGL-ES-2.0的API,而在OpenGL-ES专为嵌入式设备设计,其和其它设备一样,都是使用GLSL(GL Shading Language)来编写片段程序并执行于G ...

  4. webgl巧妙方式写着色器代码

    var VSHADER_SOURCE = function(){ /* void main(){ gl_Position = vec4(0.0,0.0,0.0,1.0); gl_PointSize = ...

  5. WebGL编程指南案例解析之多数据存储于一个缓冲区以及着色器通信

    //顶点着色器往片元着色器传值 //多个参数值存于一个缓冲对象中 var vShader = ` attribute vec4 a_Position; attribute float a_PointS ...

  6. WebGL简易教程(二):向着色器传输数据

    目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述 在上一篇教程<WebGL ...

  7. OpenGl中使用着色器的基本步骤及GLSL渲染简单示例

    OpenGL着色语言(OpenGL Shading Language,GLSL)是用来在OpenGL中着色编程的语言,是一种具有C/C++风格的高级过程语言,同样也以main函数开始,只不过执行过程是 ...

  8. OpenGL ES着色器语言之静态使用(static use)和预处理

    OpenGL ES着色器语言之静态使用(static use) 在OpenGL ES中有一个术语叫静态使用(static use),什么叫静态使用呢? 在写代码中,对于一个变量可能具有以下三种情况: ...

  9. 【Android 应用开发】OpenGL ES 2.0 -- 制作 3D 彩色旋转三角形 - 顶点着色器 片元着色器 使用详解

    最近开始关注OpenGL ES 2.0 这是真正意义上的理解的第一个3D程序 , 从零开始学习 . 案例下载地址 : http://download.csdn.net/detail/han120201 ...

随机推荐

  1. htmlunit 导致高cup占用的坑

    原文:http://blog.csdn.net/qq_28384353/article/details/52974432#reply 将爬虫部署到服务器上运行后,在查看服务器的状态监控时发现,天猫爬虫 ...

  2. 《C#语言和数据库技术基础》单词必备

    <C#语言和数据库技术基础> 第一章1..NET Framework   框架2.sharp            尖锐,强烈的3.application      应用程序4.devel ...

  3. Yii 2.0 ActiveForm生成表单 ,控制表单label和filed样式,filed一旦报错,前面lable颜色跟着变,看图,帮你解决

    需要生成如下图的表单样式,图一:

  4. (0)写给Web初学者的教案-----Web基础

    0,Web基础 一.    What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...

  5. Videojs视频插件在React中的应用

    1.介绍video.js视频插件 1.1 简单介绍 Video.js是一个通用的在网页上嵌入视频播放器的JS库,支持电脑端和移动端.Video.js自动检测浏览器对Html5的支持情况,如果不支持Ht ...

  6. java aes encrypt

    本次使用aes 对称加密算法. 选用aes的原因是,可以还原加密串. 程序如下: public static String encode(String content){ KeyGenerator k ...

  7. Bootstrap 组件之 Navbar

    一.简介 Navbar 指导航条,它在移动设备上显示为折叠状态,在宽屏幕上水平展开.这里 是一个线上例子. 响应式导航条依赖 collapse 插件,定制 Bootstrap 时务必要包含. {设备的 ...

  8. 通过composer管理工具安装laravel

    当安装好composer管理工具后,将composer的bin目录添加至环境变量中(PATH),方便在任意目录下执行composer命令. 方法1:我们通过laravel工具安装laravel 首先, ...

  9. Android Things教程:电气基础之直流电路理论

    译者注:由于本人水平有限,译文中难免会出现概念模糊.晦涩难懂,如果实在没心思看下去,请发挥你的学习能动性,到原文中自行翻译,感谢!!!点这里,直达英文各种长句的世界. 好了,既然你选择继续往下看,那就 ...

  10. 5种方法推导Normal Equation

    引言: Normal Equation 是最基础的最小二乘方法.在Andrew Ng的课程中给出了矩阵推到形式,本文将重点提供几种推导方式以便于全方位帮助Machine Learning用户学习. N ...