跳转到内容

GLSL 编程/简介

来自维基教科书,开放的书籍,开放的世界

关于 GLSL

[编辑 | 编辑源代码]

GLSL(OpenGL 着色语言)是几种常用的实时渲染着色语言之一(其他例子包括 Cg 和 HLSL)。这些着色语言用于编写着色器(即或多或少的小程序),这些程序在 GPU(图形处理单元)上执行,即计算机图形系统的处理器 - 与计算机的 CPU(中央处理单元)相对。

GPU 是大规模并行处理器,功能非常强大。如今大多数游戏和其他交互式图形应用程序中的实时图形如果没有 GPU 是不可能实现的。然而,要充分利用 GPU 的性能,有必要直接对其进行编程。这意味着必须编写可以由 GPU 执行的小程序(即着色器)。编写这些着色器的编程语言是着色语言。GLSL 是其中之一。事实上,它是几个 3D 图形 API(应用程序编程接口)的着色语言,即 OpenGL、OpenGL ES 2.x 和 WebGL。因此,GLSL 通常用于台式机、移动设备和 Web 应用程序。

关于学习 GLSL

[编辑 | 编辑源代码]

学习 GLSL 有很多好处

  • 它提供了对现代实时图形的洞察,即 GPU 的工作方式。大多数高性能实时图形应用程序(如游戏)在某种程度上依赖于 GPU 上的计算,即着色器程序。
  • 它使您能够编写 GLSL 着色器(从而编写高效的图形应用程序)并理解其他着色语言(如 Cg 和 HLSL),因为它们之间的差异并不太大。
  • 它还可以帮助您更好地理解和使用高级图形开发工具,因为它们通常也基于着色器。
  • 它可能有助于您找到工作,因为着色器编程技能对于游戏程序员、图形开发人员、技术美术师等来说是一个优势。

GLSL 并不是一种特别复杂的编程语言,用 GLSL 编写的典型程序(即着色器)相当小。尽管如此,学习 GLSL 仍然具有挑战性,原因如下:

  • GLSL 只是其他图形 API(如 OpenGL、OpenGL ES 2.x 和 WebGL)的一部分;因此,GLSL 通常与相当大的图形 API 一起学习,这通常是为图形应用程序设置 GLSL 代码和所需图形数据(如网格和图像)所必需的。
  • GLSL 编程需要一些关于 GPU 实现的可编程图形管道的知识。
  • 大多数 GLSL 着色器都需要矩阵和向量运算,这需要对向量和矩阵运算有一定的了解。
  • GLSL 很难调试。大多数情况下,图形只是简单地无法绘制,没有任何错误或崩溃。问题最好通过对 GLSL 基础知识的透彻理解来解决,而不是尝试许多小的代码更改或复制代码片段,就像其他形式的编程中常见的那样。

因此,如果你喜欢图形但讨厌编程和数学,GLSL 会很有挑战性。

关于这本维基教科书

[编辑 | 编辑源代码]

这本维基教科书是针对学生而创建的,他们不喜欢编程也不喜欢数学。这本书的基本动机是,学生在从事具体项目时,学习编程环境、编程语言和 API 的积极性要高得多。这样的项目通常是在特定平台上开发的,因此本书的方法是在特定平台或框架中展示 GLSL,例如 Unity 游戏引擎、Blender 游戏引擎、带有 GLUT 的 OpenGL、HTML5、PowerVR SDK、Android Java SDK、iOS SDK 等。几乎所有这些平台都不支持最新版本的 GLSL,并且它们都有自己的特定陷阱和缺陷。

因此,本书没有介绍最新版本的 GLSL(这对那些真正尝试用 GLSL 编程的学习者来说可能并不重要),而是试图介绍在特定平台上使用的 GLSL 的特定版本。当然,这些版本的 GLSL 之间有很大的重叠,但它们之间的差异通常很细微,可能会导致很多问题。事实上,要求学生弄清楚如何将教科书中 GLSL 着色器的示例适应某个平台的要求并不是一个好主意。相反,本书针对每个平台都提供了具体的示例。

这本维基教科书关于 Unity、Blender、带有 GLUT 的 OpenGL、HTML5 等中 GLSL 的部分是相互独立的。但是,它们之间有一定的顺序

  • Unity 几乎不需要任何设置代码;导入网格和纹理通常只需拖放和点击几下鼠标。
  • Blender 需要一些用 Python 编写的设置代码;网格和纹理可以在 Blender 中导入。
  • HTML5(WebGL)需要相当多的设置代码,但可以在任何现代 Web 浏览器中运行,无需编译和链接应用程序。(我没有研究在 WebGL 中导入网格和图像。)
  • 带有 GLUT 的 OpenGL 需要库(OpenGL、GLUT,通常还有 GLEW 或类似的库来访问所有扩展)、编译器和链接器,以及通常用于导入图像和网格的库。当然,它还需要大量的设置代码。
  • 在移动平台上进行 GLSL 编程在某种程度上是特定于操作系统或框架的(例如 PowerVR SDK)。

因此,即使您不打算在 Unity 或 Blender 中使用 GLSL,从 Unity 或 Blender 中开始编写 GLSL 代码可能也是一个好主意,这样可以快速学习基础知识,而不必担心设置代码和导入网格和图像的烦人细节。

这本维基教科书的每个部分都组织成一系列教程,其中包含产生特定效果的工作示例。这些示例决定了 GLSL 语法中哪些部分将被讨论。GLSL 语法的一份全面描述可以在 Khronos 组 的规范中找到:用于 OpenGL 的 GLSL用于 OpenGL ES 2.x 和 WebGL 的 GLSL

有一种趋势是将 OpenGL 图形管道逐级展示;然而,这种逐级的方法往往会使人们更难理解图形管道的各个部分如何以各种组合方式协同工作来产生特定效果。因此,对每个示例的讨论也决定了图形管道的哪些部分将被讨论。尽管如此,还是有一些平台无关的部分,用于提供图形管道的概述、传统矩阵变换的概述、GLSL 特定向量和矩阵运算的概述、关于如何将矩阵变换应用于点、向量和法线的讨论,以及其他一些通用主题。

这本维基教科书不涉及的内容

[编辑 | 编辑源代码]

显然,这本维基教科书不涉及 Cg、HLSL 或除 GLSL 之外的任何其他着色语言。(有关 Cg 的介绍,请参阅维基教科书 Cg 编程,Cg 与 HLSL 非常相似。)此外,这本维基教科书不涉及用于 Cg 和 HLSL 程序员的 GLSL。它适合所有人(包括 Cg 和 HLSL 程序员)。此外,这本维基教科书不涉及编写高效的 GLSL 着色器。它旨在让读者能够编写有效的着色器。优化会增加一整层额外的任务(引入适当的近似值、选择适当的精度修饰符、决定是否使用查找表、通过巧妙的算术表达式避免分支等),这些任务超出了 GLSL 入门的范围。当然,现实生活是不同的;然而,你不会通过参加一级方程式比赛来学习驾驶。

关于对本书的贡献

[编辑 | 编辑源代码]

欢迎来自所有人的贡献。在添加新的示例时,应确保不会侵犯版权,并且所有概念都已在示例本身或同一部分的先前示例中进行了解释。

除非另有说明,否则这本维基教科书中的所有示例源代码均归为公有领域。因此,您可以对其进行修改并根据您喜欢的任何许可证对其进行重新授权。源代码应嵌入在 <syntaxhighlight lang="..."> ... </syntaxhighlight> 中,以便使用语法高亮显示。

同一部分的其他维基页面应通过模板进行引用,例如{{GLSL Programming Unity SectionRef}},该模板应将维基页面的名称(例如 X)作为第一个参数。输出应类似于Section “X”。然而,在印刷版中,它应该包含一个节号。

在引用图时,请尝试使用适用于任何图位置的引用(例如“相应的图”),或者使用模板为在线版本和印刷书籍生成不同的引用(例如the figure {{Hide in print|to the left}}{{Only in print|below}})。忽略 PDF 版本的问题,因为在线版本是迄今为止最重要的版本,并且许多读者对书籍版本有很高的期望。

为了便于编辑图表,鼓励使用表格。例如,使用:

{|cellpadding="5px" cellspacing="0" style="text-align:center; vertical-align:center;"
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''first stage or input data'''
|style="width:1%; font-size:200%;" |←
|style="width:69%; background:#e0e0d0;"|additional input (optional, 1st style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left;"|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''second stage or processed data'''
|style="width:1%;font-size:200%;" |←
|style="width:69%; text-align:left;"|additional input (optional, 2nd style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''third stage or processed data'''
|style="width:1%;font-size:200%;" |
|style="width:69%; text-align:left;"|description of stage or data (optional)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''fourth stage or processed data'''
|style="width:1%;font-size:200%; " |→
|style="width:69%; background:#e0e0d0; "|additional output (optional, 1st style)
|-
|style="width:14%;"|
|style="width:1%; text-align:right; padding:5px 0 5px 0; font-size:200%;" |↓
|colspan="3" style="width:85%; text-align:left; "|communicated data or operation
|-
|colspan="3" style="width:30%; background:#e0e0d0;"|'''final stage or output data'''
|style="width:1%; font-size:200%;" |→
|style="width:69%; text-align:left; "|additional output (optional, 2nd style)
|}

获得:

第一阶段或输入数据 附加输入(可选,第一种样式)
通信数据或操作
第二阶段或处理数据 附加输入(可选,第二种样式)
通信数据或操作
第三阶段或处理数据 阶段或数据描述(可选)
通信数据或操作
第四阶段或处理数据 附加输出(可选,第一种样式)
通信数据或操作
最终阶段或输出数据 附加输出(可选,第二种样式)


< GLSL 编程

除非另有说明,本页面上的所有示例源代码均为公共领域。
华夏公益教科书