学习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），可处理纹理采样、光照计算等。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]