学习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 的关系

1. • 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 使用：

1. JavaScript 负责：

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

2. GLSL ES 负责：

   • 在 GPU 上执行具体的图形计算（顶点变换、像素着色）。

着色器（Shaders）

GLSL（OpenGL Shading Language）专门用于编写运行在 GPU 上的小程序，这些小程序被称为 “着色器（Shaders）”，负责控制图形渲染管线中的特定阶段。

GLSL 编写的着色器主要分为两类：

顶点着色器（Vertex Shader）

处理每个顶点的位置变换（如平移、旋转、投影），输出最终的顶点位置（gl_Position）

片元着色器（Fragment Shader）

计算每个像素的最终颜色（gl_FragColor），可处理纹理采样、光照计算等。