第二节 WebGL中着色器语言(GLSL ES)的简介

最新推荐文章于 2024-08-12 13:06:51 发布

置顶

coder_路远

最新推荐文章于 2024-08-12 13:06:51 发布

阅读量4.7k

点赞数 7

分类专栏： WebGL入门文章标签： webgl着色器着色器创建与编译 shader

本文链接：https://blog.csdn.net/qq_37338983/article/details/78556063

版权

本文主要介绍了WebGL中的着色器语言GLSL ES，包括着色器简介、着色器类型（顶点着色器和片段着色器）、着色器的数据值类型（attribute、uniform、varying）以及着色器的创建和编译方法。GLSL ES是针对移动端设备的优化版本，其语法接近C/C++。通过学习，读者可以理解如何在WebGL中使用着色器来处理顶点和颜色信息，以及进行纹理和光照计算。

摘要由CSDN通过智能技术生成

学习交流欢迎加群：789723098，博主会将一些demo整理共享

1 着色器简介

着色器语言(GLSL ES)由OpenGL的着色器语言GLSL简化而来，主要是为了适应目前的移动端手持设备，例如智能手机和平板电脑，由于这些手持设备受限于硬件条件，其性能远不如电脑。这意味着对这些手持设备硬件的利用和开销就要恰到好处，故由此催生了GLSL ES，是为了降低硬件的功耗和性能开销。具体的着色器技术文档我们可以参考官方网址：https://www.khronos.org/registry/OpenGL-Refpages/。

2 着色器类型

WebGL着色器只用到众多着色器中的两种：顶点着色器(vertex shader)和片段着色器(fragment shader)。对于这两个着色器，在这里并不去过多的做详述，可以先这样理解：顶点着色器负责接收来自javaScript程序的顶点数据和颜色信息，经过一系列操作（像剪切，光栅化等，这一系列操作可以不用去深入理解），再将颜色信息传至片段着色器，最后生成图像呈现在我们面前。下面就对这两个着色器的代码做一个初步了解：

(1) 顶点着色器