WebGL 创建和初始化着色器过程

Posted Heavi的博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WebGL 创建和初始化着色器过程相关的知识,希望对你有一定的参考价值。

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 创建和初始化着色器过程的主要内容,如果未能解决你的问题,请参考以下文章

webgl 初识2

第二篇: WebGL 着色器和GLSL

WebGL纹理颜色原理

WebGL 纹理颜色原理

WebGL入门与进阶3

WebGL入门(四十)-通过切换着色器实现一个页面同时展示多个立方体