《WebGL编程指南》笔记——1 WebGL入门

逃离我推掉我的手 2022-02-28 01:42 518阅读 0赞

> 本篇内容对应《WebGL编程指南》第一章概述，以及第二章canvas部分。  
> 主要介绍webgl的历史背景，以及重温一下canvas的使用。

# 第一章：WEBGL概述 #

有一种专门用来开发3D图形的语言，叫OpenGL，WebGL正是OpenGL的其中一个版本——OpenGL ES在浏览器端的实现。  
WebGL在语法上和OpenGL没有任何差别，除了在写法上略有不同，基本可以认为WebGL就是OpenGL套了一个HTML／JavaScript的壳。  
WebGL在浏览器中的实现方式是在Html中，通过JavaScript字符串编写OpenGL的着色器，绘制到H5的canvas元素上。因为现在的浏览器大多都支持的webgl，canvas能够获取webgl上下文，从而可以调用webgl的方法完成图形绘制。  
OpenGl着色器，可以理解为用来定义图形该如何绘制的方法，比如图形应该在坐标中什么位置，什么颜色等。  
编写着色器的语言叫做着色器语言（GLSL ES)。这个语言和C语言很相似，在JS中我们用字符串作为载体书写GLSL ES。

# 第二章：WEBGL入门 #

## 重温canvas ##

### 用canvas画一个矩形 ###

<!DOCTYPE html>
    <html>
    <head>
      <title></title>
    </head>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    
    <script type="text/javascript">
      var canvas = document.getElementById('canvas') // 获取canvas
    
      var ctx = canvas.getContext('2d') // 获取上下文
    
      ctx.fillStyle = 'rgba(0,0,0,0.1)'
      ctx.fillRect(0, 0, 400, 400) // 先绘制一个以canvas原点为起点，宽高等于canvas画布宽高的矩形，当作背景
      ctx.fillStyle = 'rgba(0,0,255,1.0)'
      ctx.fillRect(120, 10, 150, 150) // 接着绘制一个蓝色的矩形
    </script>
    </body>
    </html>

可以看出，使用canvas绘制矩形可以分为这么几步：

1.  获取canvas元素
2.  获取上下文
3.  调用上下文提供的API，设置填充颜色，设置坐标，绘制图形

实际上，绘制其他图形也都是按着这个步骤进行的，看下效果：  
![图片描述][477735735-5b668800090a0_articlex]

### canvas坐标系 ###

canvas坐标系是以左上角顶点为原点（0,0,0），原点水平向右为x轴正方向，垂直向下为y轴正方向，z轴用来绘制3d图形，我记得z轴正方向是屏幕向观察者的方向。  
![图片描述][1998698154-5b669e9cb4182_articlex]

### WebGL坐标系 ###

使用webgl绘图虽然也是在canvas中，但是使用的坐标系并不是canvas坐标系，而是webgl自己的坐标系，webgl坐标系的原点在canvas的中心，x轴正向水平向右，y轴正向垂直向上，z轴正向是从屏幕向观察者方向：  
![图片描述][3846459940-5b66a740594a0_articlex]

# 总结 #

webgl使用canvas ，js，着色器语言绘制图形  
webgl坐标系和canvas坐标系不同，原点在canvas中心，不是左上角，且y轴正方向是水平向上，不是向下，和高中数学中用的坐标系一样，笛卡尔坐标系。

[477735735-5b668800090a0_articlex]: /images/20220228/548b872c74da4e2ebf8f2d7778e7e444.png
[1998698154-5b669e9cb4182_articlex]: /images/20220228/3bf7716e03ce466fbe72f671309a3082.png
[3846459940-5b66a740594a0_articlex]: /images/20220228/e2a851a9d23c4f66bf5f657730363192.png