vlambda博客
学习文章列表

WebGL着色器入门(一)简介

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. 最重要的一点,知行合一,尽快开始学起来,最好是现在~~

如何开始

下一节我们来搭建环境