【小沐学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://www.mzph.cn/news/679373.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【C语言】C的整理记录

【C语言】C的整理记录

前言 该笔记是建立在已经系统学习过C语言的基础上&#xff0c;笔者对C语言的知识和注意事项进行整理记录&#xff0c;便于后期查阅&#xff0c;反复琢磨。C语言是一种面向过程的编程语言。 原想在此阐述一下C语言的作用&#xff0c;然而发觉这些是编程语言所共通的作用&#…
阅读更多...
Tdesign 常用知识

Tdesign 常用知识

Mock数据中的常见随机数&#xff1a; mock 数据中&#xff0c; 开头的是 Mock.js 的语法。Mock.js 是一个用于生成随机数据的库&#xff0c;它提供了一些特殊的语法&#xff0c;可以方便地生成各种类型的随机数据。 在这个 mock 数据中&#xff0c;使用了以下语法&#xff1a…
阅读更多...
C语言如何应⽤ gets()函数？

C语言如何应⽤ gets()函数？

一、问题 输⼊字符串使⽤的是 gets()函数&#xff0c;其作⽤是将读取的字符串保存在形式参数 str 变量中。那么该如何使⽤该函数呢&#xff1f; 二、解答 gets()函数将⼀直读取字符串&#xff0c;直到出现新的⼀⾏为⽌。其中&#xff0c;新的⼀⾏的换⾏字符将会转化为字符串中…
阅读更多...
一键打造属于自己漏扫系统

一键打造属于自己漏扫系统

0x01 工具介绍 本系统是对Web中间件和Web框架进行自动化渗透的一个系统,根据扫描选项去自动化收集资产,然后进行POC扫描,POC扫描时会根据指纹选择POC插件去扫描,POC插件扫描用异步方式扫描.前端采用vue技术,后端采用python fastapi。 0x02 安装与使用 1、Docker部署环境 编译…
阅读更多...
C语言学习记录

C语言学习记录

牛牛学说话之-字符_牛客题霸_牛客网 (nowcoder.com) 总结&#xff1a; 字符定义为char,对应%c 整数定义为int&#xff0c;对应%d 分数对应float&#xff0c;对应%f,内存小&#xff0c;速度快 分数对应double,对应%lf&#xff0c;范围广&#xff0c;精度高 保留几位小数就是…
阅读更多...
【JAVA WEB】JavaScipt-1

【JAVA WEB】JavaScipt-1

目录 JavaScipt是什么&#xff1f; JavaScipt能做什么&#xff1f; JavaScipt与HTML、CSS之间的关系 JavaScipt运行过程 JavaScipt的组成 JavaScipt的书写方式 1.行内式 2.内嵌式 3.外部式 语法概览 变量的使用 基本用法 动态类型 什么是强类型变量什么是弱类型…
阅读更多...
【MySQL】-21 MySQL综合-7（MySQL主键+MySQL外检约束+MySQL唯一约束+MySQL检查约束）

【MySQL】-21 MySQL综合-7（MySQL主键+MySQL外检约束+MySQL唯一约束+MySQL检查约束）

MySQL主键MySQL外检约束MySQL唯一约束MySQL检查约束 MySQL主键选取设置主键约束的字段在创建表时设置主键约束在创建表时设置复合主键在修改表时添加主键约束 MySQL外键约束选取设置 MySQL 外键约束的字段在创建表时设置外键约束在修改表时添加外键约束删除外键约束 MySQL唯一约…
阅读更多...
C++入门学习（二十七）跳转语句—break语句

C++入门学习（二十七）跳转语句—break语句

1、与switch语句联合使用 C入门学习&#xff08;二十三&#xff09;选择结构-switch语句-CSDN博客 #include <iostream> #include <string> using namespace std;int main() { int number;cout<<"请为《斗萝大路》打星(1~5※)&#xff1a;" &…
阅读更多...
分支解决冲突 分支管理策略 git merge命令详解

分支解决冲突 分支管理策略 git merge命令详解

git merge详解 git merge 命令用于合并两个分支的更改。以下是 git merge 命令的一些常用参数&#xff1a; git merge <分支名>&#xff1a; 将指定分支的更改合并到当前分支。 git merge feature-branchgit merge --no-ff <分支名>&#xff1a;这个选项确保总是…
阅读更多...
Linux操作系统基础（十一）：RPM软件包管理器

Linux操作系统基础（十一）：RPM软件包管理器

文章目录 RPM软件包管理器 一、rpm包的卸载 二、rpm包的安装 RPM软件包管理器 rpm&#xff08;英文全拼&#xff1a;redhat package manager&#xff09; 原本是 Red Hat Linux 发行版专门用来管理 Linux 各项软件包的程序&#xff0c;由于它遵循GPL规则且功能强大方便&…
阅读更多...
单片机学习笔记---AT24C02（I2C总线）

单片机学习笔记---AT24C02（I2C总线）

目录 有关储存器的介绍 存储器的简介 存储器简化模型 AT24C02介绍 AT24C02引脚及应用电路 I2C总线介绍 I2C电路规范 开漏输出模式和弱上拉模式 其中一个设备的内部结构 I2C通信是怎么实现的 I2C时序结构 起始条件和终止条件 发送一个字节 接收一个字节 发送应答…
阅读更多...
MySQL优化及索引

MySQL优化及索引

MySQL优化一般会从以下几方面进行入手:引擎&#xff08;MySAM、InnoDB等引擎的选择&#xff09;、表设计&#xff08;可以反三范式添加冗余字段提高检索效率&#xff09;、字段的数据类型&#xff08;数值型字段优于字符串字段&#xff09;、sql书写、索引等方面进行优化&#…
阅读更多...
虚拟机ens33没有显示ip

虚拟机ens33没有显示ip

1.然后输入命令 cd /etc/sysconfig/network-scripts或&#xff1a; vim /etc/sysconfig/network-scripts/ifcfg-ens33 2.先按 i 开始【编辑】&#xff1b; 3.再用方向键把光标移到ONBOOT这里,把no改成yes&#xff1b; 4.按esc退出编辑模式, 5.按shift: 【输入wq】保…
阅读更多...
Stable Diffusion 模型下载：ToonYou（平涂卡通）

Stable Diffusion 模型下载：ToonYou（平涂卡通）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十 下载地址 模型介绍 ToonYou 是一个平涂风格的卡通模型&#xff0c;它的画风独特、光感强烈、画面…
阅读更多...
c++ STL系列——（四）queue

c++ STL系列——（四）queue

在C中&#xff0c;标准模板库&#xff08;STL&#xff09;提供了许多容器和算法&#xff0c;其中之一便是queue。queue是一个先进先出&#xff08;FIFO&#xff09;的数据结构&#xff0c;它允许在队列的末尾添加元素&#xff0c;并从队列的开头移除元素。本文将深入探讨C STL中…
阅读更多...
Ubuntu Desktop - Details (设备详情)

Ubuntu Desktop - Details (设备详情)

Ubuntu Desktop - Details [设备详情] 1. OverviewReferences 1. Overview System Settings -> Details -> Overview ​ References [1] Yongqiang Cheng, https://yongqiang.blog.csdn.net/
阅读更多...
H5/CSS 笔试面试考题（51-60）

H5/CSS 笔试面试考题（51-60）

简述在使用 table 表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值 ( ) A：cellpadding: 0 B：padding: 0 C：margin: 0 D：cellspacing: 0 面试通过率：47.0% 推荐指数： ★★★★ 试题难度： 中级 试题类型： 选择题 答案：a、d 简述下…
阅读更多...
Flutter Web应用清理缓存

Flutter Web应用清理缓存

前言 应用清理缓存是一个常见的功能&#xff0c;在移动端清理缓存这个行为比较常见&#xff0c;但是游览器web应用清理缓存并不常见&#xff0c;很多人都不会特地去清理&#xff0c;与之相关的&#xff0c;flutter的web应用清理缓存的资料网上比较少&#xff0c;本文进行一些探…
阅读更多...
单片机在物联网中的应用

单片机在物联网中的应用

单片机&#xff0c;这个小巧的电子设备&#xff0c;可能听起来有点技术性&#xff0c;但它实际上是物联网世界中的一个超级英雄。简单来说&#xff0c;单片机就像是各种智能设备的大脑&#xff0c;它能让设备“思考”和“行动”。由于其体积小、成本低、功耗低、易于编程等特点…
阅读更多...
【C++第二阶段】赋值运算符重载

【C++第二阶段】赋值运算符重载

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 赋值运算符重载 赋值运算符重载 实验①&#xff0c;还没有对析构运算符重载时 #include<iostream> #include<string> using namespace std;clas…
阅读更多...
最新文章

Copyright @ 2022~2023