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

bertZuo 2019-06-28

本篇内容对应《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,设置填充颜色,设置坐标,绘制图形

实际上,绘制其他图形也都是按着这个步骤进行的,看下效果:
《WebGL编程指南》笔记——1 WebGL入门

canvas坐标系

canvas坐标系是以左上角顶点为原点(0,0,0),原点水平向右为x轴正方向,垂直向下为y轴正方向,z轴用来绘制3d图形,我记得z轴正方向是屏幕向观察者的方向。
《WebGL编程指南》笔记——1 WebGL入门

WebGL坐标系

使用webgl绘图虽然也是在canvas中,但是使用的坐标系并不是canvas坐标系,而是webgl自己的坐标系,webgl坐标系的原点在canvas的中心,x轴正向水平向右,y轴正向垂直向上,z轴正向是从屏幕向观察者方向:
《WebGL编程指南》笔记——1 WebGL入门

总结

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

相关推荐