【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

🍺三维数字地球系列相关文章如下🍺：
1【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第一期
2【小沐学GIS】基于C++绘制三维数字地球Earth（OpenGL、glfw、glut）第二期
3【小沐学GIS】基于C++绘制太阳系SolarSystem（OpenGL、glfw、glut）
4【小沐学GIS】基于OpenSceneGraph(OSG)绘制三维数字地球Earth
5【小沐学GIS】基于C#绘制三维数字地球Earth（OpenGL）
6【小沐学GIS】基于Python绘制三维数字地球Earth（OpenGL）
7【小沐学GIS】基于Android绘制三维数字地球Earth（OpenGL）
8【小沐学GIS】基于WebGL绘制三维数字地球Earth（OpenGL）

文章目录

  • 1、简介
    • 1.1 WebGL简介
    • 1.2 WebGL入门示例
      • 1.2.1 初始场景
      • 1.2.2 绘制点
      • 1.2.3 绘制单色三角形
      • 1.2.4 绘制彩色三角形
  • 2、开源代码
    • 2.1 cambecc/earth（3d全球气象地球）
    • 2.2 mapbox/webgl-wind（2d风场地球）
    • 2.3 github（3dgithub地球）
    • 2.4 cesium.js
  • 13、测试代码
    • 13.1 WebGL
    • 13.2 WebGL / three.js
    • 13.3 WebGL / Babylon.js
  • 结语

1、简介

1.1 WebGL简介

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和 数据视觉化 。
在这里插入图片描述
OpenGL ES则是从OpenGL中移除了许多陈旧无用的特性之后的一个轻量级的OpenGL框架，在保持轻量级的同时，OpenGL ES仍然具有足够的能力来渲染出精美的三维图形。
在这里插入图片描述
相对于传统网页，支持WebGL的浏览器底层接入了OpenGL/OpenGL ES标准，WebGL通过实现标准支持着色器语言编程语言GLSL ES，在我们实际开发过程中，GLSL ES通常是以字符串的形式存在JavaScript中，我们可以通过JavaScript修改GLSL ES字符串来改变着色器程序。

1.2 WebGL入门示例

  • WebGL绘图流程如下
    第 1 步 - 准备画布并获取 WebGL 渲染上下文，我们获取当前的 HTML canvas 对象并获取其 WebGL 渲染上下文。
    第 2 步 - 定义几何并将其存储在缓冲区对象中，我们定义几何的属性，如顶点、索引、颜色等，并将它们存储在 JavaScript 数组中。然后，我们创建一个或多个缓冲区对象并将包含数据的数组传递给相应的缓冲区对象。在示例中，我们将三角形的顶点存储在 JavaScript 数组中，并将该数组传递给顶点缓冲区对象。
    第 3 步 - 创建和编译着色器程序，我们编写顶点着色器和片段着色器程序，编译它们，并通过链接这两个程序来创建组合程序。
    第 4 步 - 将着色器程序与缓冲区对象相关联，我们关联缓冲区对象和组合着色器程序。
    第 5 步 - 绘制所需对象（三角形），此步骤包括清除颜色、清除缓冲区位、启用深度测试、设置视口等操作。最后，您需要使用方法之一绘制所需的图元 - drawArrays()或drawElements()。

在这里插入图片描述

  • WebGL着色器执行过程
    在这里插入图片描述

1.2.1 初始场景

<canvas id="canvas"></canvas>
<script>const canvas=document.getElementById('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;const gl=canvas.getContext('webgl');gl.clearColor(0.5,0.5,0.5,1);gl.clear(gl.COLOR_BUFFER_BIT);
</script>
  • 测试如下：
    在这里插入图片描述

1.2.2 绘制点

<canvas id="canvas"></canvas>
<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">void main() {gl_Position = vec4(0.0, 0.0, 0.0, 1.0);gl_PointSize = 100.0;}
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">void main() {gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);}
</script>
<script>// canvas 画布const canvas = document.getElementById('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;// webgl画笔const gl = canvas.getContext('webgl');// 顶点着色器const vsSource = document.getElementById('vertexShader').innerText;// 片元着色器const fsSource = document.getElementById('fragmentShader').innerText;// 初始化着色器initShaders(gl, vsSource, fsSource);// 指定将要用来清理绘图区的颜色gl.clearColor(0., 0.0, 0.0, 1.0);// 清理绘图区gl.clear(gl.COLOR_BUFFER_BIT);// 绘制顶点gl.drawArrays(gl.POINTS, 0, 1);function initShaders(gl,vsSource,fsSource){//创建程序对象const program = gl.createProgram();//建立着色对象const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);//把顶点着色对象装进程序对象中gl.attachShader(program, vertexShader);//把片元着色对象装进程序对象中gl.attachShader(program, fragmentShader);//连接webgl上下文对象和程序对象gl.linkProgram(program);//启动程序对象gl.useProgram(program);//将程序对象挂到上下文对象上gl.program = program;return true;}function loadShader(gl, type, source) {//根据着色类型，建立着色器对象const shader = gl.createShader(type);//将着色器源文件传入着色器对象中gl.shaderSource(shader, source);//编译着色器对象gl.compileShader(shader);//返回着色器对象return shader;}
</script>
  • 测试如下：
    在这里插入图片描述

1.2.3 绘制单色三角形

<!doctype html>
<html><body><canvas width = "300" height = "300" id = "my_Canvas"></canvas><script>/* Step1: Prepare the canvas and get WebGL context */var canvas = document.getElementById('my_Canvas');var gl = canvas.getContext('experimental-webgl');/* Step2: Define the geometry and store it in buffer objects */var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];// Create a new buffer objectvar vertex_buffer = gl.createBuffer();// Bind an empty array buffer to itgl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);// Pass the vertices data to the buffergl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);// Unbind the buffergl.bindBuffer(gl.ARRAY_BUFFER, null);/* Step3: Create and compile Shader programs */// Vertex shader source codevar vertCode ='attribute vec2 coordinates;' + 'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';//Create a vertex shader objectvar vertShader = gl.createShader(gl.VERTEX_SHADER);//Attach vertex shader source codegl.shaderSource(vertShader, vertCode);//Compile the vertex shadergl.compileShader(vertShader);//Fragment shader source codevar fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';// Create fragment shader objectvar fragShader = gl.createShader(gl.FRAGMENT_SHADER);// Attach fragment shader source codegl.shaderSource(fragShader, fragCode);// Compile the fragment shadergl.compileShader(fragShader);// Create a shader program object to store combined shader programvar shaderProgram = gl.createProgram();// Attach a vertex shadergl.attachShader(shaderProgram, vertShader); // Attach a fragment shadergl.attachShader(shaderProgram, fragShader);// Link both programsgl.linkProgram(shaderProgram);// Use the combined shader program objectgl.useProgram(shaderProgram);/* Step 4: Associate the shader programs to buffer objects *///Bind vertex buffer objectgl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);//Get the attribute locationvar coord = gl.getAttribLocation(shaderProgram, "coordinates");//point an attribute to the currently bound VBOgl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);//Enable the attributegl.enableVertexAttribArray(coord);/* Step5: Drawing the required object (triangle) */// Clear the canvasgl.clearColor(0.5, 0.5, 0.5, 0.9);// Enable the depth testgl.enable(gl.DEPTH_TEST); // Clear the color buffer bitgl.clear(gl.COLOR_BUFFER_BIT);// Set the view portgl.viewport(0,0,canvas.width,canvas.height);// Draw the trianglegl.drawArrays(gl.TRIANGLES, 0, 3);</script></body>
</html>
  • 测试如下：
    在这里插入图片描述

1.2.4 绘制彩色三角形

<canvas id="canvas"></canvas>
<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">attribute vec4 a_position;attribute vec4 a_color;varying vec4 vColor;void main(){gl_Position = a_position;vColor = a_color;}
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">precision mediump float;varying vec4 vColor;void main() {gl_FragColor = vColor;}
</script>
<script>// canvas 画布const canvas = document.getElementById('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;// webgl画笔const gl = canvas.getContext('webgl');// 顶点着色器const vsSource = document.getElementById('vertexShader').innerText;// 片元着色器const fsSource = document.getElementById('fragmentShader').innerText;// 初始化着色器initShaders(gl, vsSource, fsSource);// 初始化场景// gl.viewport(0, 0, canvas.clientWidth, canvas.clientHeight);gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);//区别在这里，用上面那行代码三角形无法显示gl.clearColor(0, 0, 0, 1);gl.clear(gl.COLOR_BUFFER_BIT);//获取的是着色器里的position变量var attLocation = gl.getAttribLocation(gl.program,'a_position');//获取顶点着色器中的color变量var attLocationColor = gl.getAttribLocation(gl.program,'a_color');var vertex_data = [0, 0,0, 0.5,0.7, 0]var vertex_color = [1.0, 0.0, 0.0, 1.0,0.0, 1.0, 0.0, 1.0,0.0, 0.0, 1.0, 1.0];var vertex_vbo = create_vbo(vertex_data);gl.bindBuffer(gl.ARRAY_BUFFER, vertex_vbo);gl.enableVertexAttribArray(attLocation);gl.vertexAttribPointer(attLocation, 2, gl.FLOAT,false,0,0);var color_vbo = create_vbo(vertex_color);gl.bindBuffer(gl.ARRAY_BUFFER,color_vbo);gl.enableVertexAttribArray(attLocationColor);gl.vertexAttribPointer(attLocationColor, 4, gl.FLOAT,false,0,0);gl.drawArrays(gl.TRIANGLES, 0, 3)function initShaders(gl,vsSource,fsSource){//创建程序对象const program = gl.createProgram();//建立着色对象const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);//把顶点着色对象装进程序对象中gl.attachShader(program, vertexShader);//把片元着色对象装进程序对象中gl.attachShader(program, fragmentShader);//连接webgl上下文对象和程序对象gl.linkProgram(program);//启动程序对象gl.useProgram(program);//将程序对象挂到上下文对象上gl.program = program;return true;}function loadShader(gl, type, source) {//根据着色类型，建立着色器对象const shader = gl.createShader(type);//将着色器源文件传入着色器对象中gl.shaderSource(shader, source);//编译着色器对象gl.compileShader(shader);//返回着色器对象return shader;}function create_vbo(data){// 生成缓存对象var vbo = gl.createBuffer();// 绑定缓存gl.bindBuffer(gl.ARRAY_BUFFER, vbo);// 向缓存中写入数据；gl.STATIC_DRAW这个常量，定义了这个缓存中内容的更新频率gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);// 将绑定的缓存设为无效；这是为了防止WebGL中的缓存一致保留，而出现和预想不一致的情况gl.bindBuffer(gl.ARRAY_BUFFER, null);// 返回生成的VBOreturn vbo;}
</script>
  • 测试如下：
    在这里插入图片描述

2、开源代码

2.1 cambecc/earth（3d全球气象地球）

https://github.com/cambecc/earth
一个全球天气状况可视化项目。

  • 依赖安装，需提前安装 Node.js 和 npm。
  • 使用git下载项目并安装npm依赖包。
git clone https://github.com/cambecc/earth
cd earth
npm install

在这里插入图片描述
在这里插入图片描述

  • 启动服务器
node dev-server.js 8080

在这里插入图片描述

  • 浏览器服务器访问地址
http://127.0.0.1:8080

在这里插入图片描述

2.2 mapbox/webgl-wind（2d风场地球）

https://github.com/mapbox/webgl-wind
WebGL 驱动的风力发电可视化。 能够以 60fps 的速度渲染多达 100 万个风粒子。

  • 执行如下脚本：
npm install
npm run build
npm start
# open http://127.0.0.1:1337/demo/

在这里插入图片描述

  • 浏览器访问如下：
http://127.0.0.1:1337/demo/

在这里插入图片描述

2.3 github（3dgithub地球）

在这里插入图片描述

2.4 cesium.js

【小沐学GIS】基于Cesium实现三维数字地球Earth（CesiumJS入门安装）

13、测试代码

13.1 WebGL

基于WebGL基础代码实现地球绘制效果。

  • 地球测试代码的运行效果如下：
    在这里插入图片描述

13.2 WebGL / three.js

https://threejs.org/
three.js是在Web端创建3D程序的图形引擎，WebGL是一个只能画点、线、三角形的底层图形系统，直接使用WebGL开发应用往往需要写大量的代码，three.js对其进行了封装大大简化了Web 3D应用的开发。
在这里插入图片描述

  • 地球测试代码的运行效果如下：
    在这里插入图片描述

13.3 WebGL / Babylon.js

https://www.babylonjs.com/
Babylonjs是一个开源的Web3D渲染引擎，支持高性能3D、WebXR、glTF等多种格式和技术。
在这里插入图片描述

  • 地球测试代码的运行效果如下：
    在这里插入图片描述
    在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2780705.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

0212作业

0212作业

阅读更多...
计算机科学与导论 第一章绪论和第二章数字系统

计算机科学与导论 第一章绪论和第二章数字系统

文章预览&#xff1a; 1. 计算机软硬件常识(第一章)1. 冯诺依曼2. 计算机历史3. 计算机的诞生 2. 数字系统&#xff08;第二章&#xff09;1. 位置化的数字系统1. 十进制系统2. 二进制系统3. 八进制系统4. 十六进制系统 2. 转换1. 其他进制转换到十进制的转换2. 十进制到其他进…
阅读更多...
新年福利：《YOLO目标检测》送书活动

新年福利：《YOLO目标检测》送书活动

博主简介 AI小怪兽&#xff0c;YOLO骨灰级玩家&#xff0c;1&#xff09;YOLOv5、v7、v8优化创新&#xff0c;轻松涨点和模型轻量化&#xff1b;2&#xff09;目标检测、语义分割、OCR、分类等技术孵化&#xff0c;赋能智能制造&#xff0c;工业项目落地经验丰富&#xff1b; …
阅读更多...
最全面的Docker安装部署，配置镜像加速

最全面的Docker安装部署，配置镜像加速

安装Docker 卸载旧版 首先如果系统中已经存在旧的Docker&#xff0c;则先卸载&#xff1a; yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 配置Docker的yum仓库 首先…
阅读更多...
【Git】上传本地文件到Git（以Windows环境为例）

【Git】上传本地文件到Git（以Windows环境为例）

Git 的下载参考&#xff1a;Git 安装及配置 一、Git 上传的整体流程 1、工作区 > 本地仓库 将本地文件上传到Git&#xff0c;需要先上传到本地仓库&#xff0c;然后再上传到远程仓库。要上传文件到本地仓库&#xff0c;不是直接拷贝进去的&#xff0c;而是需要通过命令一步…
阅读更多...
【数据结构】哈希表的开散列和闭散列模拟

【数据结构】哈希表的开散列和闭散列模拟

哈希思想 在顺序和树状结构中&#xff0c;元素的存储与其存储位置之间是没有对应关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过多次的比较。 顺序查找的时间复杂度为0(N)&#xff0c;树的查找时间复杂度为log(N)。 我们最希望的搜索方式&#xff1a;通过元素…
阅读更多...
STM32 新建寄存器版本MDK工程简要步骤

STM32 新建寄存器版本MDK工程简要步骤

新建工程文件夹 新建一个工程根目录文件夹&#xff0c;并在该文件夹里新建D/M/O/P/U文件夹。 Drivers&#xff1a;存放与硬件相关的驱动层文件Middlewares&#xff1a;存放正点原子提供的中间层组件文件和第三方中间层文件Output&#xff1a;存放工程编译输出文件Projects&am…
阅读更多...
linux系统下vscode portable版本的python环境搭建003：venv

linux系统下vscode portable版本的python环境搭建003：venv

这里写自定义目录标题 python安装方案一. 使用源码安装&#xff08;有[构建工具](https://blog.csdn.net/ResumeProject/article/details/136095629)的情况下&#xff09;方案二.使用系统包管理器 虚拟环境安装TESTCG 本文目的&#xff1a;希望在获得一个新的系统之后&#xff…
阅读更多...
Vue核心基础4：绑定样式、条件渲染、列表渲染

Vue核心基础4：绑定样式、条件渲染、列表渲染

1 绑定样式 【代码】 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>绑定样式</title><s…
阅读更多...
FL Studio版本升级-FL Studio怎么升级-FL Studio升级方案

FL Studio版本升级-FL Studio怎么升级-FL Studio升级方案

已经是新年2024年了&#xff0c;但是但是依然有很多朋友还在用FL Studio12又或者FL Studio20&#xff0c;今天这篇文章教大家如何升级FL Studio21 FL Studio 21是Image Line公司开发的音乐编曲软件&#xff0c;除了软件以外&#xff0c;我们还提供了FL Studio的升级服务&#…
阅读更多...
C++11中的简化声明

C++11中的简化声明

auto 用于自动类型推断&#xff0c;显示定义变量&#xff1a; typeid typeid推导出来的是字符串&#xff0c;只能看不能用&#xff0c;通过打印来查看变量的类型&#xff0c;用法如上。 decltype 同样是用来自动推导类型&#xff0c;与auto的区别是&#xff0c;auto在定义时必…
阅读更多...
MySQL篇----第十四篇

MySQL篇----第十四篇

系列文章目录 文章目录 系列文章目录前言一、MySQL 数据库作发布系统的存储，一天五万条以上的增量，预计运维三年,怎么优化？二、锁的优化策略三、索引的底层实现原理和优化四、什么情况下设置了索引但无法使用前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽…
阅读更多...
PKI - 借助Nginx实现_客户端使用自签证书供服务端验证

PKI - 借助Nginx实现_客户端使用自签证书供服务端验证

文章目录 Pre概述在 Nginx 中实现客户端使用自签名证书供服务器验证1. 生成客户端密钥对2. 生成自签名客户端证书3. 配置 Nginx4. 重启 Nginx 修5. 验证 在浏览器中安装客户端证书以便进行访问 Pre PKI - 借助Nginx 实现Https 服务端单向认证、服务端客户端双向认证 PKI - 数…
阅读更多...
线性代数的本质——1 向量

线性代数的本质——1 向量

向量是线性代数中最为基础的概念。 何为向量&#xff1f; 从物理上看&#xff0c; 向量就是既有大小又有方向的量&#xff0c;只要这两者一定&#xff0c;就可以在空间中随便移动。 从计算机应用的角度看&#xff0c;向量和列表很接近&#xff0c;可以用来描述某对象的几个不同…
阅读更多...
人力资源智能化管理项目（day05:角色管理）

人力资源智能化管理项目（day05:角色管理）

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/humanResourceIntelligentManagementProject 搭建页面结构 分页组件&#xff1a;设置layout&#xff0c;表示需要显示的内容&#xff0c;用逗号分隔&#xff0c;布局元素会依次显示。prev表示上一页&#xff0c;next为…
阅读更多...
HP Pavilion Laptop 15-cs3xxx原装出厂Win10.20H1系统

HP Pavilion Laptop 15-cs3xxx原装出厂Win10.20H1系统

惠普笔记本HP Pavilion - 15-cs3030tx原厂Windows10系统镜像下载 链接&#xff1a;https://pan.baidu.com/s/1LmdJoN7F3BGvt49ovq-eww?pwdzgmt 提取码&#xff1a;zgmt 适用型号&#xff1a; 15-cs3001tx&#xff0c;15-cs3030tx&#xff0c;15-cs3031tx&#xff0c;15-cs…
阅读更多...
数据结构：并查集讲解

数据结构：并查集讲解

并查集 1.并查集原理2.并查集实现3.并查集应用4.并查集的路径压缩 1.并查集原理 在一些应用问题中&#xff0c;需要将n个不同的元素划分成一些不相交的集合。开始时&#xff0c;每个元素自成一个单元素集合&#xff0c;然后按一定的规律将归于同一组元素的集合合并。在此过程中…
阅读更多...
寒假作业2024.2.11

寒假作业2024.2.11

请使用递归实现n! #include <stdio.h> #include <stdlib.h> #include <string.h> #include <math.h> #include <unistd.h> int fun(int n) {if (n0) {return 1;} else {return n*fun(n-1);} } int main(int argc, const char *argv[]) {int n…
阅读更多...
Vue核心基础3：计算属性和监视属性

Vue核心基础3：计算属性和监视属性

1 计算属性 这边以姓名案例&#xff0c;来介绍计算属性 <body><div id"root"><!-- 姓&#xff1a;<input type"text" v-model:value"firstName"><br>名&#xff1a;<input type"text" v-model:value&…
阅读更多...
《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）

《CSS 简易速速上手小册》第10章：未来的 CSS（2024 最新版）

文章目录 10.1 CSS 的新特性和趋势10.1.1 基础知识10.1.2 重点案例&#xff1a;使用 CSS Grid 创建响应式图库10.1.3 拓展案例 1&#xff1a;利用 CSS 变量实现主题切换10.1.4 拓展案例 2&#xff1a;使用 lab() 颜色和 layer 规则优化样式 10.2 CSS Houdini&#xff1a;魔法般…
阅读更多...
最新文章

Copyright @ 2022~2023