一、OpenGL和WebGL
WebGL基于OpenGL ES,它缺少常规OpenGL具有的许多功能,例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能,例如几何体着色器,镶嵌细分着色器和计算着色。在PC端web应用中,前端的webgl是通过js语句调用的是OpenGL部分接口,在移动设备是调用OpenGL ES部分接口来实现页面的图形渲染。WebGL只是绑定外面接口的一层。webGL和openGL的区别为：性质不同、插件支持不同、用途不同。WebGL 2.0基于OpenGL ES 3.0，确保了提供许多选择性的WebGL 1.0扩展，并引入新的API。
WebGL和openGL的区别为：性质不同、插件支持不同、用途不同。WebGL 2.0基于OpenGL ES 3.0，确保了提供许多选择性的WebGL 1.0扩展，并引入新的API。
一、性质不同
1、webGL：webGL的为。是一种用于展示各种3D模型和场景的绘图协议，并提供了3D图形的API。
2、openGL：openGL是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。
二、插件支持不同
1、webGL：webGL利用底层的图形硬件加速功能进行的图形渲染作，无需任何浏览器插件支持。
2、openGL：openGL通过HTML脚本本身实现Web交互式三维动画的制作，需要浏览器插件支持。
三、用途不同
1、webGL：webGL可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
2、openGL：openGL用于CAD、虚拟现实、科学可视化程序和电子游戏开发。
OpenGL：
OpenGL（Open Graphics Library），开放图形库/开放式图形库，用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API），这个接口由近350个不同的函数调用组成，用来绘制从简单的图形比特到复杂的三维景象，而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D，OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。
WebGL：
WebGL是一种 3D绘图标准，允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
二、基于HTML5/WebGL的建模
WebGL，定义了一套API，能够允许在网页中的canvas标签中使用类似于Open GL，实际上是一套基于OpenGL ES 2.0的3D图形API。
WebGL特点与优势
1、WebGL内嵌在浏览器中，不需要安装插件和库就可以直接使用；
2、由于WebGL基于浏览器，不是基于操作系统。所以可以直接在多种平台运行WebGL程序；
3、WebGL程序由HTML和JavaScript文件组成，可以直接发送给对方在浏览器中展示；
4、不需要搭建开发环境，可以直接通过文本编辑器开发；
5、由于WebGL继承自OpenGL，所以OpenGL相关资料都可以拿来参考。
WebGL的基本图元包括：点、线段、三角形。
一个代码案例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>绘制三角形</title>
-
<link rel="stylesheet" href="styles/">
-
</head>
-
<body>
-
<canvas id="canvas"></canvas>
-
-
<script>
-
const random = Math.random;
-
-
/**
-
* 获取随机颜色
-
* @returns { Object } 颜色对象
-
*/
-
function randomColor () {
-
return {
-
r: random() * 255,
-
g: random() * 255,
-
b: random() * 255,
-
a: random() * 1
-
}
-
}
-
-
const canvas = ('#canvas');
-
= ;
-
= ;
-
const gl = ('webgl');
-
(0, 0, 0, 1);
-
(gl.COLOR_BUFFER_BIT);
-
-
// 顶点着色器
-
const vertexShaderSource = `
-
// 设置浮点数据类型为中级精度
-
precision mediump float;
-
-
// 接收顶点坐标 (x,y)
-
attribute vec2 a_Position;
-
-
void main () {
-
gl_Position = vec4(a_Position, 0.0, 1.0);
-
}
-
`;
-
const vertexShader = (gl.VERTEX_SHADER);
-
(vertexShader, vertexShaderSource);
-
(vertexShader);
-
-
// 片元着色器
-
const fragmentShaderSource = `
-
// 设置浮点数据类型为中级精度
-
precision mediump float;
-
-
// 接收 JavaScript 传过来的颜色值（rgba）
-
uniform vec4 u_Color;
-
-
void main(){
-
vec4 color = u_Color / vec4(255, 255, 255, 1);
-
gl_FragColor = color;
-
}
-
`;
-
const fragmentShader = (gl.FRAGMENT_SHADER);
-
(fragmentShader,fragmentShaderSource);
-
(fragmentShader);
-
-
// 着色器程序
-
const program = ();
-
(program, vertexShader);
-
(program, fragmentShader);
-
(program);
-
(program);
-
-
// 获取着色器程序中变量的指针位置
-
const a_Position = (program, 'a_Position')
-
const u_Color = (program, 'u_Color');
-
-
// 定义三角形的三个顶点
-
const positions = [
-
0, 0.5, // 上顶点
-
-0.5, -0.5, // 左顶点
-
0.5, -0.5 // 右顶点
-
];
-
-
// 创建缓冲区
-
const buffer = ();
-
-
// 绑定缓冲区并指定缓冲区的类型
-
(gl.ARRAY_BUFFER, buffer);
-
-
// 往缓冲区中写入数据
-
(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-
-
// 将属性绑定到缓冲区
-
(a_Position);
-
-
// 如何读取缓冲区数据
-
// 指定要修改的顶点属性的索引（允许哪个属性读取当前缓冲区的数据） - a_Position
-
// 指定每个顶点属性的组成数量（一次读取几个数据） - 2
-
// 指定数组中每个元素的数据类型 - （32 位 IEEE 标准的浮点数，占用 4 个字节）
-
// 当转换为浮点数时是否应该将整数数值归一化到特定的范围 - false（对于类型 和 gl.HALF_FLOAT，此参数无效）
-
// 步长（即：每个顶点所包含数据的字节数）0 表示一个属性的数据是连续存放的
-
// 偏移量（指定顶点属性数组中第一部分的字节偏移量）（在每个步长的数据里，目标属性需要偏移多少字节开始读取；必须是类型的字节长度的倍数）0 * 4 = 0
-
(a_Position, 2, , false, 0, 0);
-
-
// 随机颜色
-
const { r, g, b, a } = randomColor();
-
// 向片元着色器传递颜色信息
-
4f(u_Color, r, g, b, a);
-
-
// 绘制三角形
-
// 指定绘制图元的方式 - （三角形）
-
// 指定从哪个点开始绘制 - 0
-
// 指定绘制需要使用到多少个点 - 3
-
(gl.TRIANGLE_STRIP, 0, 3);
-
</script>
-
</body>
-
</html>
