glsl着色器学习(三)

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

创建Program
javascript 复制代码
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))
};
  1. const prg = gl.createProgram();
    1. 使用Webgl的createProgram创建一个程序对象。这个程序对象包涵一个顶点着色对象和一个片段着色器对象,用于图形渲染。
    2. 如图,生成了一个prg对象。属性都为空。
    3. 此时,程序对象和顶点着色器对象以及片段着色器对象还没有关联起来
  2. gl.attachShaer(prg,vertexShader);
    1. 将之前创建并编译好的顶点着色器(vertexShader)附加到新创建的着色器程序对象(prg)上。
    2. 关联顶点着色器
  3. gl.attachShader(prg,fragmentShaer);
    1. 将之前创建并编译好的片段着色器(fragmentShader)附加到新创建的着色器程序对象(prg)上。这样,在后续的链接操作中,WebGL 会将这两个着色器组合成一个完整的渲染程序。
    2. 关联fragmentShader。
  4. gl.linkProgram(prg);
    1. 对附加了顶点着色器和片段着色器的程序对象进行链接操作。链接的过程会检查两个着色器之间的接口是否匹配,例如顶点着色器输出的变量是否能正确地被片段着色器接收等。同时,链接操作还会生成最终可在图形硬件上执行的程序代码。
  5. if (!gl.getProgramParameter(prg, gl.LINK_STATUS)) {... }
    1. 检查着色器程序的链接状态。如果gl.getProgramParameter返回的链接状态为false,则表示链接失败,此时会抛出一个错误,错误信息为通过gl.getProgramInfoLog(prg)获取的链接错误日志。
    2. link成功后的状态。
相关推荐
云上艺旅9 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得2059 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西10 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ10 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007510 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆11 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone11 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦11 小时前
HTML 音频(Audio)学习笔记
学习
瞌睡不来12 小时前
(学习总结32)Linux 基础 IO
linux·学习·io
Moonnnn.12 小时前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程