一、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/app.css">
</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 = document.querySelector('#canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;const gl = canvas.getContext('webgl');gl.clearColor(0, 0, 0, 1);gl.clear(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.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader, vertexShaderSource);gl.compileShader(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.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader,fragmentShaderSource);gl.compileShader(fragmentShader);// 着色器程序const program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);gl.linkProgram(program);gl.useProgram(program);// 获取着色器程序中变量的指针位置const a_Position = gl.getAttribLocation(program, 'a_Position')const u_Color = gl.getUniformLocation(program, 'u_Color');// 定义三角形的三个顶点const positions = [0, 0.5, // 上顶点-0.5, -0.5, // 左顶点0.5, -0.5 // 右顶点];// 创建缓冲区const buffer = gl.createBuffer();// 绑定缓冲区并指定缓冲区的类型gl.bindBuffer(gl.ARRAY_BUFFER, buffer);// 往缓冲区中写入数据gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);// 将属性绑定到缓冲区gl.enableVertexAttribArray(a_Position);// 如何读取缓冲区数据// 指定要修改的顶点属性的索引（允许哪个属性读取当前缓冲区的数据） - a_Position// 指定每个顶点属性的组成数量（一次读取几个数据） - 2// 指定数组中每个元素的数据类型 - gl.FLOAT（32 位 IEEE 标准的浮点数，占用 4 个字节）// 当转换为浮点数时是否应该将整数数值归一化到特定的范围 - false（对于类型 gl.FLOAT 和 gl.HALF_FLOAT，此参数无效）// 步长（即：每个顶点所包含数据的字节数）0 表示一个属性的数据是连续存放的// 偏移量（指定顶点属性数组中第一部分的字节偏移量）（在每个步长的数据里，目标属性需要偏移多少字节开始读取；必须是类型的字节长度的倍数）0 * 4 = 0gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 随机颜色const { r, g, b, a } = randomColor();// 向片元着色器传递颜色信息gl.uniform4f(u_Color, r, g, b, a);// 绘制三角形// 指定绘制图元的方式 - gl.TRIANGLES（三角形）// 指定从哪个点开始绘制 - 0// 指定绘制需要使用到多少个点 - 3gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);</script>
</body>
</html>
