《WebGL编程指南》笔记——1 WebGL入门
脚本宝典收集整理的这篇文章主要介绍了《WebGL编程指南》笔记——1 WebGL入门，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本篇内容对应《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绘制矩形可以分为这么几步：
- 获取canvas元素
- 获取上下文
- 调用上下文提供的API，设置填充颜色，设置坐标，绘制图形
实际上，绘制其他图形也都是按着这个步骤进行的，看下效果：
canvas坐标系
canvas坐标系是以左上角顶点为原点（0,0,0），原点水平向右为x轴正方向，垂直向下为y轴正方向，z轴用来绘制3d图形，我记得z轴正方向是屏幕向观察者的方向。
WebGL坐标系
使用webgl绘图虽然也是在canvas中，但是使用的坐标系并不是canvas坐标系，而是webgl自己的坐标系，webgl坐标系的原点在canvas的中心，x轴正向水平向右，y轴正向垂直向上，z轴正向是从屏幕向观察者方向：
总结
webgl使用canvas ，js，着色器语言绘制图形
webgl坐标系和canvas坐标系不同，原点在canvas中心，不是左上角，且y轴正方向是水平向上，不是向下，和高中数学中用的坐标系一样，笛卡尔坐标系。
脚本宝典总结
以上是脚本宝典为你收集整理的《WebGL编程指南》笔记——1 WebGL入门全部内容，希望文章能够帮你解决《WebGL编程指南》笔记——1 WebGL入门所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 右脑编程系列-前言 2019-08-07
- C语言基础-数据类型 2019-07-03
- C语言-内存分配 2019-07-03
- C语言权威指南和书单 - 专家级别 2019-07-03
- C语言编译器不能帮你完成这项检查 2019-07-03
- 为什么 SQLite 用 C 编写？ 2019-07-03
- C语言备忘 2019-07-03
- C语言权威指南和书单 - 初学者 2019-07-03
- C语言权威指南和书单 - 中等级别 2019-07-03
- C语言学习笔记一 2019-07-03