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)