一、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>

OpenGL，WebGL基于HTML5/WebGL的建模及构建3D场景相关推荐

c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用
前言在目前大数据时代背景之下,数据可视化的需求也变得越来越庞大,在数据可视化的背景之下,通过智能机器间的链接并最终将人机链接,结合软件和大数据分析的工业互联网也将变得越来越容易实现! 国家也敏锐意识 ...
基于 HTML5 WebGL 的加油站 3D 可视化监控
前言随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA.SC ...
基于 HTML5 WebGL 的虚拟现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
基于 HTML5 WebGL + WebVR 的 3D 虚实现实可视化培训系统
前言 2019 年 VR, AR, XR, 5G, 工业互联网等名词频繁出现在我们的视野中,信息的分享与虚实的结合已经成为大势所趋,5G 是新一代信息通信技术升级的重要方向,工业互联网是制造业转型升级 ...
基于 HTML5 WebGL 的发动机 3D 可视化系统
前言工业机械产品大多体积庞大.运输成本高,在参加行业展会或向海外客户销售时,如果没有实物展示,仅凭静态.简单的图片说明书介绍,无法让客户全面了解产品,不仅工作人员制作麻烦,客户看得也费力.如果能在 ...
html5动画变形效果,碉堡了，基于HTML5 WebGL的图像扭曲变形动画开源特效
简要说明这是一款基于HTML5 WebGL的图像扭曲变形动画特效.该特效中,通过Three.js来制作从一幅缩略图,扭曲变形为全屏大图的动画特效,共有6种炫酷的动画效果. 视频加载中... 该特效提 ...
html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果
原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...
基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用
前言得益于 HTML5 WebGL 技术的成熟,从技术上对工控管理的可视化,数据可视化变得简单易行!完成对工控设备的管理效率,资源管理,风险管理等的大幅度提高,同时也对国家工业4.0计划作出有力响应 ...
基于 HTML5 WebGL 的高炉炼铁厂可视化系统
前言在当今工业4.0 新时代的推动下,不仅迎来了工业互联网的发展,还开启了5G时代的新次元.而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位,而对于 ...

OpenGL，WebGL基于HTML5/WebGL的建模及构建3D场景

一、OpenGL和WebGL

二、基于HTML5/WebGL的建模

OpenGL，WebGL基于HTML5/WebGL的建模及构建3D场景相关推荐

最新文章

热门文章