当前位置：首页 > article >正文

glsl着色器学习（三）

article 2024/9/21 1:39:26

前面两篇文章已经创建好了顶点着色器和片段着色器并编译成功，下面将创建program(程序)，将着色器链接起来

创建Program

const prg = gl.createProgram();
gl.attachShader(prg, vertexShader);
gl.attachShader(prg, fragmentShader);
gl.linkProgram(prg);
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {
  throw new Error(gl.getProgramInfoLog(prg))
};

const prg = gl.createProgram();
1. 使用Webgl的createProgram创建一个程序对象。这个程序对象包涵一个顶点着色对象和一个片段着色器对象，用于图形渲染。
2. 如图，生成了一个prg对象。属性都为空。
3. 此时，程序对象和顶点着色器对象以及片段着色器对象还没有关联起来
gl.attachShaer(prg,vertexShader);
1. 将之前创建并编译好的顶点着色器（vertexShader）附加到新创建的着色器程序对象（prg）上。
2. 关联顶点着色器
gl.attachShader(prg,fragmentShaer);
1. 将之前创建并编译好的片段着色器（fragmentShader）附加到新创建的着色器程序对象（prg）上。这样，在后续的链接操作中，WebGL 会将这两个着色器组合成一个完整的渲染程序。
2. 关联fragmentShader。
gl.linkProgram(prg);
1. 对附加了顶点着色器和片段着色器的程序对象进行链接操作。链接的过程会检查两个着色器之间的接口是否匹配，例如顶点着色器输出的变量是否能正确地被片段着色器接收等。同时，链接操作还会生成最终可在图形硬件上执行的程序代码。
if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {... }
1. 检查着色器程序的链接状态。如果gl.getProgramParameter返回的链接状态为false，则表示链接失败，此时会抛出一个错误，错误信息为通过gl.getProgramInfoLog(prg)获取的链接错误日志。
2. link成功后的状态。