WebGL2 WebGLProgram和WebGLShader

WebGLProgram

创建

WebGLProgram 是 WebGL API 的一部分,它由两个WebGLShaders (webgl 着色器)组成,分别为顶点着色器片元着色器(两种着色器都是采用 GLSL 语言编写的)。创建一个 WebGLProgram 需要调用 GL 上下文的createProgram() 方法,然后调用attachShader()方法附加上着色器,之后你才能将它们连接到一个可用的程序。

  • WebGLRenderingContext.createProgram()
  • WebGLRenderingContext.attachShader(programName,vertexShaderName/fragmentShaderName)
  • WebGLRenderingContext.linkProgram(programName)

使用

WebGLProgram 在使用的过程中要分为几步,包括告知 GPU 来使用这段着色器程序(有时候一个 WebGL 应用包含多个 program,所以在使用某个 program 绘制之前,我们要先启用它。),绑定合适的数据缓冲区,配置相关选项,最终把图像绘制到屏幕上。

如果在连接着色器程序的过程中发生了错误,或者你希望删除一个已经存在的着色器程序,你可以调用代码 WebGLRenderingContext.deleteProgram(),这将释放连接着色器程序的内存。

  • WebGLRenderingContext.useProgram(programName)

WebGLShader

WebGL API 的 WebGLShader 可以是一个顶点着色器(vertex shader)或片元着色器(fragment shader)。每个 WebGLProgram 都需要这两种类型的着色器。

创建

要创建一个 WebGLShader 需要使用 WebGLRenderingContext.createShader,通过 WebGLRenderingContext.shaderSource() 然后挂接GLSL源代码 , 最后调用 WebGLRenderingContext.compileShader() 完成着色器(shader)的编译。 此时 WebGLShader 仍不是可用的形式,他需要被添加到一个 WebGLProgram里.

  • WebGLRenderingContext.createShade(type)
    • gl.createShader(type);//type:参数为 gl.VERTEX_SHADER 或  gl.FRAGMENT_SHADER 两者中的一个。
      
  • WebGLRenderingContext.shaderSource(shaderName,sourceName)
    • void gl .shaderSource(着色器,源代码);//  着色器 甲WebGLShader对象,其中设置的源代码。 资源 DOMString包含要设置的GLSL源代码。
  • WebGLRenderingContext.compileShader(shaderName)

猜你喜欢

转载自blog.csdn.net/lamanchas/article/details/100588592