WebGL学习系列-WebGL简介

Posted 2022-12-11 那个天真的人

前言

本篇简要介绍一下WebGL的历史以及用途。

WebGL概述

相信大家都知道Web中有个叫canvas的画布，通过其提供的一些API，我们可以很方便的在浏览器的页面上画点、线、多边形、图片等。现在很多的html5小游戏也是由canvas来实现的。canvas技术相当于所见即所得，你画什么就在页面上展示什么，原理比较好懂。但是canvas主要是针对2D的，所以通常我们主要用于实现2D类的游戏。

要说WebGL，得提提OpenGL。OpenGL是一套开放的图形库，用于在pc端上绘制3D图形，它是一套开放的标准API，在不同平台上底层有不同的实现。可以把WebGL看成是Web端的OpenGL。先来看下OpenGL的版本图，如下所示：

可以看到，目前Web端使用的WebGL为WebGL1.0，它是基于OpenGL ES2.0的， 而
OpenGL ES主要服务于一些嵌入式设备。可以说，我们将要学习的WebGL和OpenGL ES2.0是比较像的，至少很多原理都是共通的。所以有时候，当你遇到WebGL一些问题的时候，可以尝试通过OpenGL关键字去查找相关的资料。

OpenGL从2.0开始便支持可编程着色器，着色器通俗的说，就是给界面中的每一个像素上色，这个很快就会了解到了。自然的，WebGL也继承了这个重大的特性。

最后，再来看下WebGL程序的结构，先看下图：

左边为传统的web页面开发，右边为包含了WebGL的网页，GLSL ES是用于编写着色器的语言，开发WebGL程序的时候，除了直接调用WebGL相关的api，我们还要编写着色器。

结束语

借由WebGL，我们可以打开通往3D的一个切入点，因为学习WebGL是需要学习计算机图形学一些基础知识的，当然，这里不会假设你懂的很多。笔者也是在学习过程中一点一点弥补的。笔者水平有限，但仍然会尝试使用最最简单的语言来进行表述，这也是自我提升的一种方式。

参考资料：
<<WebGL编程指南>>