WebGL着色器入门简介

Posted 2021-08-09 HelloCesium

WebGL着色器入门(一)简介

概述

早期的系统中，可能只有一个处理器，即CPU，常规的处理和图形处理都由他完成，现在，几乎所有的图形系统都使用了专用的图形处理单元GPU，它专门用来完成图形处理的功能；

着色器语言是一种类C的语言，它可以用来控制GPU的绘制图形；

对于一个图形来说，它有顶点和填充信息(比如红色的三角形有三个顶点，顶点围成的面积用红色来填充)，对应的着色器有两种，一种是顶点着色器(描述顶点特性，位置颜色等)，一种是片元着色器，三角形围成面积里的每一个像素都由它来绘制；

这里是个人的理解，不是特别的准确，但是随着学习的深入，你就会对于它有更深的了解。

起源

最开始有OpenGL(Open Graphics Library)，由SGI开发并开源的桌面端三维图形标准；

接着有了OpenGL ES(OpenGL for Embeddled Systems)版本，为手机、Pad等嵌入式设备而设计的，是OpenGL的一个子集；

接着有了WebGL，为Web浏览器上工作专门设计的版本。

从2.0版本开始，OpenGL支持了一项非常的那个重要的特性，即可编程着色器语言，该特性被OpenGL ES2.0继承并成为WebGL1.0标准的核心部分。

优势

1. 编写环境简单，并且跨平台

• 只需要使用文本编辑器编写，用浏览器查看

  
  

2. 发布容易

• 直接发布网页

  
  

3. 轻量，功能强大且硬件功耗低

• 利用底层的图形硬件加速功能进行的图形渲

是否值得学

Cesium是在webGL的基础上构建的。对于想用知识武装自己的学习者来说，Cesium是招式，webGL是内功，对于一个有javascript经验的学习者来说，可能很快能学会Cesium库的各种接口调用，参考官方示例写出各种功能，但是想要更进一步做出一些特效的时候，如果不知道怎么运用着色器，就会发觉异常艰难，想要深入研究的学习者都慢慢的从单纯的接口调用转到了webGL的研究，着色器的研究。

图形学的知识，都比较难学，然而这也是一个门槛，能迈进去的人，会发现更广阔的世界。

需要做哪些准备

1. 最好有一门 C 系列语言的基础，当然，没有的话，可以学习，基本的语法并不难

   
   

2. 做好心理准备，需要有耐心，着色器的调试比较麻烦，整个绘制过程，有很多位置计算

   
   

3. 最重要的一点，知行合一，尽快开始学起来，最好是现在~~

如何开始

下一节我们来搭建环境