WebGL学习系列-WebGL简介

来源:互联网 发布:聚氨酯防水和js防水 编辑:程序博客网 时间:2024/05/09 09:17

前言

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

WebGL概述

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

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

OpenGL版本图

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

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

最后,再来看下WebGL程序的结构,先看下图:

WebGL程序结构

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

结束语

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

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

0 0