计算机图形学之WebGL绘图入门

Posted 2021-04-25 绿色的玫瑰花

接着上一篇，我们来聊一聊该如何在浏览器窗口下绘制2D或者3D图形。

随着html5时代的到来，浏览器对2D,尤其3D图形的支持越来越好，WebGL也变得越来越成熟。通过在javascript脚本里调用WebGl的相关底层API，可以实现3D图形的渲染。

下面是WebGL的底层架构:

左边是传统网页，右边是基于WebGL的网页。可以发现在传统的javascript的基础上，又多了一种称为GLES ES 的语言，它的底层是基于OpenGL的。

我们可以在canvas标签里对3D图形进行渲染。

首先在html中这样定义:

定义一个id号为webgl的标签。

引入相关函数库:

webgl-utils.js，webgl-utils.js cuon-utils.js 等几个函数库是专门定义好的，用来辅助图形的渲染。

one.js是绘图代码:

顶点着色器:

上图黄色部分即为GLES语言，有点类似C语言

顶点着色器一般用来描述顶点特性（位置，大小等），比如上面设置坐标位置是(0.5,0.0,0.0),基于3D的坐标系统

片源着色器:

片源着色器:进行逐片源处理过程，比如光照。片源也可以 理解为像素，对像素进行着色。

使用JS定义一个main方法：

这里有一个initShaders()方法，是调用的函数库。getWebGLContext()也是如此。关于这两个方法下面会具体讲！

在html中调用如下:

效果:

我们来看一看上面JS的main方法代码的执行过程:

   过程就是这么简单明了！

我们还可以对上面着色器参数调整，以观察不同效果:

比如调整为:

效果:

注意这里WebGL的坐标系统范围是0~1,坐标原点默认在中间位置

修改片源着色器:

效果:

ok,这次先聊这么多，明天待续!