VC6环境下OpenGL配置

发表于 2020-12-08

最近调试一个使用VC6开发环境，使用OpenGL编写的遗留程序。记录一下VC6开发环境下GLUT库的配置。

参考链接

(一)VC6.0写第一个OpenGL程序,by wang_liang.
OpenGL开发：官方GLUT库的环境配置,by heguorui.

支持Windows7的Nodejs最高版本

发表于 2020-11-10 | 更新于 2020-11-21

目前最新的Nodejs LTS已不再支持Windows7。如需在Windows7上安装Nodejs，需安装12.19.1或之前的版本。

参考链接

windows安装Node JS及配置,by 兰若惜.

使用Electron和Vuejs创建桌面应用程序的方法

发表于 2020-11-10 | 更新于 2020-11-22

最近遇到一个奇特的需求，要求构建一个评估系统，分为前后端。它的前端是桌面应用程序，后端也是桌面应用程序。前后端之间的通信是通过前端导出一个数据包文件，然后交给后端导入完成的。由于熟悉Nodejs前后端开发，我选择Electron加Vuejs的解决方案。具体的技术选型如下：

前端：electron+vuejs+indexedDB+localForage，前端程序需要存储数据，但数据量会比较小，通常使用indexedDB就足够了。
后端：electron+vuejs+sqlite3+sequlize，后端程序会汇总前端程序导出的数据包，并做一些统计查询，存储数据量大，读写效率要求高。因此选择sqlite3数据库，可随electron打包到一起安装。

技术简介

Electron简介

Electron（原名为Atom Shell）是GitHub开发的一个开源框架。它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。Electron现已被多个开源Web应用程序用于前端与后端的开发，著名项目包括GitHub的Atom和微软的Visual Studio Code。

一个基础的Electron包含三个文件：package.json（元数据）、main.js（代码）和index.html（图形用户界面）。框架由Electron可执行文件（Windows中为electron.exe、macOS中为electron.app、Linux中为electron）提供。开发者可以自行添加标志、自定义图标、重命名或编辑Electron可执行文件。

vuejs简介

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

Vuejs适合开发单页应用程序。

indexedDB数据库简介

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

indexedDB的API不够友好，建议使用localForage，支持类Storage API语法的客户端数据存储polyfill，支持回退到Storage和Web SQL

项目构建过程

构建Vuejs项目

使用如下命令构建Vuejs项目脚手架：

npm install -g @vue/cli
vue create vue-electron-app
# 可选，添加组件
vue add vuetify
# 使用如下命令查看脚手架效果
npm run serve

构建Electron项目

在上一节创建Vuejs项目的基础上，使用如下命令为Vuejs项目添加Electron支持，从而生成桌面应用程序：

1
2
3

vue add electron-builder
# 查看Electron效果
npm run electron:serve

构建Sqlite3数据库

使用如下命令为项目添加Sqlite3数据库支持：

1 2	npm install sequelize --save --registry https://registry.npm.taobao.org npm install sqlite3 --save --registry https://registry.npm.taobao.org

构建32位安装程序

使用如下命令构建32位Electron安装程序：

1	npm run electron:build -- --ia32

或者

1	yarn electron:build --ia32

问题备注

Electron构建程序下载依赖包失败

请参考 Electron：运行npm run build构建环境失败解决方案。

Electron makensis构建失败

当遇到如下错误时, 解决方法很简单,打包项目路径不能包含中文路径。

1	.electron-builder\Cache\nsis\nsis-3.0.3.2\Bin\makensis.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE

Electron Vuejs显示空白页

请参考Blank screen on builds, but works fine on serve。

支持平台

electron支持macOS、Windows、Linux。在Windows平台，electron仅支持 Windows 7 或更高版本, 旧版操作系统已不再支持(并且无法运行).

参考链接

Create an Electron application with Vue and Vuetify,by bromix.
Electron：运行npm run build构建环境失败解决方案,by 请给我一杯冰可乐.
How to build app for Windows 32bit version?,by nklayman.
支持平台,by electronjs.
Electron应用数据库选型暨indexedDB扫盲,by shenlvmeng.
LOCALFORAGE,by localforage.
IndexedDB,by mozilla.
浏览器数据库 IndexedDB 入门教程,by ruanyifeng.
electron集成sqlite3，win10上折腾了2天,by 兴哥.
Electron笔记,by 小羽信息.
Blank screen on builds, but works fine on serve,by Vue CLI Plugin Electron Builder.
Remove menubar from Electron app,by stackoverflow.

Simulink仿真视频教程记录

发表于 2020-11-06

看了吴菁老师的几个Simulink教学视频，很不错，记录一下。

参考链接

使用Simulink和Stateflow快速实现飞行器的设计仿真,by 吴菁.
使用Simulink 和Stateflow完成建模、仿真和飞行控制设计,by 吴菁.
使用 MATLAB 和 Simulink 让控制系统的开发更轻松,by 吴菁.
四旋翼飞行器的建模仿真和控制,by 吴菁.

游戏开发的基本概念

发表于 2020-10-19 | 更新于 2020-11-06

使用Unity做游戏开发，那么它的一些基本概念不可不知。

场景

游戏对象

组件

资产

序列化和反序列化

参考文献

Unity游戏开发者需知的基本概念,by Eyas.

Cesium支持GLTF动画研究

发表于 2020-10-04

Cesium在很早之前就支持GLTF模型动画，例如：

var czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
  },
  {
    id: "aircraft model",
    name: "Cesium Air",
    position: {
      cartographicDegrees: [-77, 37, 10000],
    },
    model: {
      gltf: "../SampleData/models/CesiumAir/Cesium_Air.glb",
      scale: 2.0,
      minimumPixelSize: 128,
    },
  },
];

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

var dataSourcePromise = viewer.dataSources.add(
  Cesium.CzmlDataSource.load(czml)
);

这种方法存在一定局限性，只能支持全局动画，不能控制动画的起止。但最近版本中，Cesium进行了一定改进，可以支持在一定程度上控制GLTF动画了。示例代码如下：

var czml = [
  {
    id: "document",
    name: "CZML Model",
    version: "1.0",
    clock: {
      interval: "2019-06-01T16:00:00Z/2019-06-01T16:10:00Z",
      currentTime: "2019-06-01T16:00:00Z",
      multiplier: 60,
      range: "LOOP_STOP",
      step: "SYSTEM_CLOCK_MULTIPLIER",
    },
  },
  {
    id: "test model",
    name: "Cesium Air",
    position: {
      cartographicDegrees: [-77, 37, 10000],
    },
    model: {
      gltf: "https://assets.agi.com/models/launchvehicle.glb",
      scale: 2.0,
      minimumPixelSize: 128,
      runAnimations: false,
      articulations: {
        "Fairing Open": {
          epoch: "2019-06-01T16:00:00Z",
          number: [0, 0, 600, 120],
        },
        "Fairing Separate": {
          epoch: "2019-06-01T16:00:00Z",
          number: [0, 0, 400, -50],
        },
        "Fairing Drop": {
          epoch: "2019-06-01T16:00:00Z",
          interpolationAlgorithm: "LAGRANGE",
          interpolationDegree: 2,
          number: [0, 0, 80, 0, 100, 0, 120, -1, 600, -120],
        },
      },
    },
  },
];

var viewer = new Cesium.Viewer("cesiumContainer", {
  shouldAnimate: true,
});

var dataSourcePromise = viewer.dataSources.add(
  Cesium.CzmlDataSource.load(czml)
);

dataSourcePromise
  .then(function (dataSource) {
    viewer.trackedEntity = dataSource.entities.getById("test model");
  })
  .otherwise(function (error) {
    console.error(error);
  });

这段示例代码的原理还有待分析，我将launchvehicle.glb导入blender 2.90中，但并没有看到上述代码中的三段动画。按照链接Model Articulations “Number” variable的说法，这三段动画是通过GLTF扩展实现。

参考链接

Model Articulations “Number” variable,by cesium.
glTF 2.0 Quick Reference Guide ,by KhronosGroup.
glTF,by KhronosGroup.
Cesium Model Articulations,by cesium.

Cesium去掉黑色星空背景并透明的方法

发表于 2020-09-28

为了使Cesium与整个网页的背景融合，需要去掉Cesium的黑色星空背景，具体方法如下：

viewer.scene.skyBox.destroy();
viewer.scene.skyBox = undefined;
viewer.scene.sun.destroy();
viewer.scene.sun = undefined;
viewer.scene.moon.destroy();
viewer.scene.moon = undefined;
viewer.scene.skyAtmosphere.destroy();
viewer.scene.skyAtmosphere = undefined;

viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);

参考链接

Scene Background Transparent,by cesium dev.

Cesium样条插值方法

发表于 2020-09-19 | 更新于 2020-09-27

Cesium样条插值主要有三种：Linear、Lagrange、Hermite。理解Cesium样条插值对生成平滑飞行路径十分关键。

插值概念

在数学的数值分析领域中，内插或称插值（英语：interpolation）是一种通过已知的、离散的数据点，在范围内推求新数据点的过程或方法。求解科学和工程的问题时，通常有许多数据点借由采样、实验等方法获得，这些数据可能代表了有限个数值函数，其中自变量的值。而根据这些数据，我们往往希望得到一个连续的函数（也就是曲线）；或者更密集的离散方程与已知数据互相吻合，这个过程叫做拟合。

与插值密切相关的另一个问题是通过简单函数逼近复杂函数。假设给定函数的公式是已知的，但是太复杂以至于不能有效地进行评估。来自原始函数的一些已知数据点，或许会使用较简单的函数来产生插值。当然，若使用一个简单的函数来估计原始数据点时，通常会出现插值误差；然而，取决于该问题领域和所使用的插值方法，以简单函数推得的插值数据，可能会比所导致的精度损失更大。

在数值分析这个数学分支中，样条插值是使用一种名为样条的特殊分段多项式进行插值的形式。由于样条插值可以使用低阶多项式样条实现较小的插值误差，这样就避免了使用高阶多项式所出现的龙格现象，所以样条插值得到了流行。

插值定义

给定$n$个离散数据点（称为节点）${\displaystyle (x_{k},y_{k})}(x_{k},y_{k})，{\displaystyle k=1,2,…,n}$。对于${\displaystyle x,(x\neq x_{k},k=1,2,…n)}$，求${\displaystyle x}$所对应的$y$的值称为内插。

$f(x)$为定义在区间$[a,b]$上的函数。${\displaystyle x_{1},x_{2},x_{3}…x_{n}}$为$[a,b]$上 $n$ 个互不相同的点，$G$ 为给定的某一函数类。若$G$ 上有函数$g(x)$ 满足：

$$g(x_{i})=f(x_{i}),k=1,2,…n$$

则称 $g(x)$为 $f(x)$ 关于节点 $x_{1},x_{2},x_{3}…x_{n}$ 在 $G$ 上的插值函数。

参考链接

Cesium摄像头进入地面下问题跟踪

发表于 2020-09-06 | 更新于 2020-09-27

Cesium摄像头进入地面下的Bug已经在Cesium 1.66版本中修复。

1.66.0 - 2020-02-03

Deprecated ⏳

The property Scene.sunColor has been deprecated and will be removed in Cesium 1.69. Use scene.light.color and scene.light.intensity instead. #8493

Additions 🎉

useBrowserRecommendedResolution flag in Viewer and CesiumWidget now defaults to true. This ensures Cesium rendering is fast and smooth by default across all devices. Set it to false to always render at native device resolution instead at the cost of performance on under-powered devices. #8548
Cesium now creates a WebGL context with a powerPreference value of high-performance. Some browsers use this setting to enable a second, more powerful, GPU. You can set it back to default, or opt-in to low-power mode, by passing the context option when creating a Viewer or CesiumWidget instance:
1
2
3
4
5
6
7
var viewer = new Viewer('cesiumContainer', {
contextOptions : {
webgl : {
powerPreference: 'default'
}
}
});
Added more customization to Cesium’s lighting system. #8493
- Added Light, DirectionalLight, and SunLight classes for creating custom light sources.
- Added Scene.light for setting the scene’s light source, which defaults to a SunLight.
- Added Globe.dynamicAtmosphereLighting for enabling lighting effects on atmosphere and fog, such as day/night transitions. It is true by default but may be set to false if the atmosphere should stay unchanged regardless of the scene’s light direction.
- Added Globe.dynamicAtmosphereLightingFromSun for using the sun direction instead of the scene’s light direction when Globe.dynamicAtmosphereLighting is enabled. See the moonlight example in the Lighting Sandcastle example.
- Primitives and the globe are now shaded with the scene light’s color.
Updated SampleData models to glTF 2.0. #7802
Added Globe.showSkirts to support the ability to hide terrain skirts when viewing terrain from below the surface. #8489
Added minificationFilter and magnificationFilter options to Material to control texture filtering. #8473
Updated earcut to 2.2.1. #8528
Added a font cache to improve label performance. #8537

Fixes 🔧

Fixed a bug where the camera could go underground during mouse navigation. #8504
Fixed a bug where rapidly updating a PolylineCollection could result in an instanceIndex is out of range error. #8546
Fixed issue where RequestScheduler double-counted image requests made via createImageBitmap. #8162
Reduced Cesium bundle size by avoiding unnecessarily importing Cesium3DTileset in Picking.js. #8532
Fixed a bug where files with backslashes were not loaded in KMZ files. #8533
Fixed WebGL warning message about EXT_float_blend being implicitly enabled. #8534
Fixed a bug where toggling point cloud classification * visibility would result in a grey screen on Linux / Nvidia. #8538
Fixed a bug where a point in a PointPrimitiveCollection was rendered in the middle of the screen instead of being clipped. #8542
Fixed a crash when deleting and re-creating polylines from CZML. ReferenceProperty now returns undefined when the target entity or property does not exist, instead of throwing. #8544
Fixed terrain tile picking in the Cesium Inspector. #8567
Fixed a crash that could occur when an entity was deleted while the corresponding Primitive was being created asynchronously. #8569
Fixed a crash when calling camera.lookAt with the origin (0, 0, 0) as the target. This could happen when looking at a tileset with the origin as its center. #8571
Fixed a bug where camera.viewBoundingSphere was modifying the offset parameter. #8438
Fixed a crash when creating a plane with both position and normal on the Z-axis. #8576
Fixed BoundingSphere.projectTo2D when the bounding sphere’s center is at the origin. #8482

参考链接

Camera Controller can go underground,by cesium.
Prevent camera from going underground during mouse navigation,by cesium.

求三个球交点的方法

发表于 2020-09-04 | 更新于 2020-10-01

我们知道，在使用美国GPS时，需要获得三颗GPS卫星信号，才能够定位自身位置。那么其背后的原理是什么呢？很简单，用数学语言表述，就是通过求解三个球的交点。通常三个球的交点会有两个点，排除位置较高的那个点，剩下的点就是我们空间位置点。

GPS定位原理示意图

图1 GPS定位原理示意图

参考链接

How Does GPS Work?,by Aryaman Sharda.
三个球的交点,by sinat_27504423.