全阳霁 发表于 2025-6-19 10:31:23

学习webgl的第二天day2

HTML 脚本标签中的着色器

在当今世界一可以让浏览器无需插件即可调用 GPU 做 3D 渲染。我们先学习一下相关的语言。
标准 GLSL 是桌面 GPU 着色器语言的 “母体” → 简化出 GLSL ES 适配移动 / 浏览器场景 → WebGL 作为浏览器 3D API
GLSL 的全称是 OpenGL Shading Language(OpenGL 着色语言 ),它是专门为配合 OpenGL(Open Graphics Library,开放图形库 )这种跨语言、跨平台的 2D/3D 图形渲染 API 而设计的编程语言,用于编写运行在 GPU 上的着色器程序(如顶点着色器、片元着色器等 ),让开发者能精细控制图形渲染过程,像定义顶点如何变换、像素最终呈现什么颜色等。
GLSL ES 的全称是 OpenGL ES Shading Language(OpenGL ES 着色语言 ) 。其中,OpenGL ES(OpenGL for Embedded Systems )是 OpenGL 的子集,主打嵌入式系统、移动设备等资源相对受限的场景(像手机、平板等 )。
GLSL ES(OpenGL Shading Language for Embedded Systems)
WebGL 不是编程语言,而是 JavaScript API(应用程序编程接口 ),用于在 Web 浏览器中渲染实时的 2D 和 3D 图形 。WebGL 是 为浏览器图形渲染场景设计的接口规范主要是给 JavaScript 提供操作 GPU 、绘制图形的能力,需结合 JavaScript 等语言(还会搭配 GLSL ES 着色器语言写 GPU 执行的渲染逻辑 )才能发挥作用 。
WebGL 与 GLSL 的关系

[*]

[*]WebGL 1.0 默认使用 GLSL ES 1.00(基于 OpenGL ES 2.0)。
[*]WebGL 2.0 支持 GLSL ES 3.00(基于 OpenGL ES 3.0),功能更强大(如接口块、原子操作)。

在 WebGL 中,GLSL 以 GLSL ES(OpenGL ES Shading Language) 的形式存在,必须配合 JavaScript 使用:

[*]JavaScript 负责:

[*]创建 WebGL 上下文、缓冲区、纹理等资源;
[*]编译 GLSL 着色器代码;
[*]向着色器传递数据(如顶点坐标、颜色);
[*]控制渲染流程。

[*]GLSL ES 负责:

[*]在 GPU 上执行具体的图形计算(顶点变换、像素着色)。

着色器(Shaders)

GLSL(OpenGL Shading Language)专门用于编写运行在 GPU 上的小程序,这些小程序被称为 “着色器(Shaders)”,负责控制图形渲染管线中的特定阶段。
GLSL 编写的着色器主要分为两类:
顶点着色器(Vertex Shader)

处理每个顶点的位置变换(如平移、旋转、投影),输出最终的顶点位置(gl_Position)
片元着色器(Fragment Shader)

计算每个像素的最终颜色(gl_FragColor),可处理纹理采样、光照计算等。

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

粒浊 发表于 2025-11-20 14:38:16

过来提前占个楼

辉伫 发表于 2025-12-11 14:31:10

这个有用。

石娅凉 发表于 2025-12-16 06:29:42

收藏一下   不知道什么时候能用到

诞楮 发表于 2025-12-25 03:44:05

用心讨论,共获提升!

迫蔺 发表于 2026-1-13 18:04:21

东西不错很实用谢谢分享

届表 发表于 2026-1-14 09:46:52

谢谢楼主提供!

套缈 发表于 2026-1-14 20:31:27

谢谢楼主提供!

吮槌圯 发表于 2026-1-16 14:30:24

过来提前占个楼

水苯 发表于 2026-1-19 23:23:40

过来提前占个楼

任俊慧 发表于 2026-1-20 02:15:44

前排留名,哈哈哈

赫连如冰 发表于 2026-1-20 14:53:41

用心讨论,共获提升!

龙梨丝 发表于 2026-1-22 13:22:29

用心讨论,共获提升!

柏雅云 发表于 2026-1-24 02:19:03

用心讨论,共获提升!

剩鹄逅 发表于 2026-1-24 08:33:33

鼓励转贴优秀软件安全工具和文档!

羡渥蛛 发表于 2026-1-26 05:28:51

东西不错很实用谢谢分享

廖彗云 发表于 2026-1-28 07:26:20

谢谢分享,辛苦了

沦嘻亟 发表于 2026-1-28 09:09:52

不错,里面软件多更新就更好了

轩辕琳芳 发表于 2026-1-28 22:13:26

这个有用。

党新苗 发表于 2026-2-1 05:26:47

这个好,看起来很实用
页: [1] 2
查看完整版本: 学习webgl的第二天day2