移动版星图产品设计笔记
1.需求分析
移动版电子星图比较常用的有以下几款:
-
虚拟天文馆 Stellarium APP
虚拟天文馆 Stellarium APP
虚拟天文馆 Stellarium WEB
Stellarium 是一款虚拟星象仪的计算机软件。它可以根据观测者所处的时间和地点,计算天空中太阳、月球、行星和恒星的位置,并将其显示出来。它还可以绘制星座、虚拟天文现象(如流星雨、日食和月食等)。
Stellarium 可以用作学习夜空知识的教具,还可以作为天文爱好者星空观测的辅助工具,或者仅仅是满足一下好奇心。由于其高质量的画质,一些天象馆将 Stellarium 用在了实际的天象放映中。有些天文爱好者还使用 Stellarium 绘制他们文章中用到的星图。
-
移动天文台 APP
移动天文台 APP
移动天文台(Mobile Observatory Pro)是一款 Android 端的天文观测辅助软件,有了它,你就相当于将整个星空以及太阳系装入到你的 Android 手机中了。
-
星图 Starchart APP
星图 Starchart APP
打开观测宇宙的窗户吧!将你的设备对着天空,Star Chart 会准确地将你所看到的内容告诉你。
Star Chart 利用设备的指南针、GPS、加速计和陀螺仪,实时计算每颗行星和可见星的当前位置,为你精确显示在夜空中的位置。
2.功能设计
参考资料选用《天文观测完全手册》,《步天歌》;
-
西方星图和实用工具
星图的用途和使用
实用天文软件
在线天文平台
SKY-map中文版
ESASky中文版
-
古代中国星图
三垣
二十八宿
3.程序开发
移动版星图产品的实现方式选择微信小程序开发。
程序技术路线一:
由Three.js 小程序 WebGL来展示银河系星图,星图使用gltf模型(点击看3D星图模型效果,可导出gltf格式)。
小程序canvas组件官方文档
Three.js 小程序 WebGL 的适配版本
关于在微信小程序使用WebglCanvas和ThreeJs开发的二三事(二)
关于在微信小程序使用WebglCanvas和ThreeJs开发的二三事(三)
最终卡在了模型加载处,原因可能是最新的开发者工具导致的?(20210201)
example在最新的开发者工具中无法运行
工具类库下面的threejs-miniprogram 的example有报错?
程序技术路线二:
由小程序2d canvas来展示2D银河系星图,星图使用图片数据。
星图数据来源:中国天文数据底片数据库
程序技术路线三:
由Three.js 小程序 WebGL来绘制3D太阳系星图,星图使用代码渲染生成。
Three.js 中文教程
Three.js 参考手册
github:Galaxy based on threejs
github:我是如何用three.js创造一个宇宙的?
github:星空连线demo
github:根据THREE.js库学习WebGL的过程
土星环的实现参照了下文:
three.js实现土星绕太阳自转体系
解决报错:Texture is not power of two.
https://stackoverflow.com/questions/29421702/threejs-texture
在获取webgl离屏参数时,调用OffscreenCanvas.getContext(),生成的离屏实例获取不了参数,参照WebGL 1.0 定义的方法getActiveAttrib()。由于报错信息不明,目前卡在了这个位置上(20210205)
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec((res) => {
const canvas = res[0].node
this.canvas = canvas
const THREE = createScopedThreejs(canvas)
renderSolar(canvas, THREE)
var offscreen = wx.createOffscreenCanvas()
var webgl = offscreen.getContext('webgl')
console.log(webgl)
console.log(webgl.getContextAttributes())
//console.log(webgl.getProgramInfoLog(renderSolar()))
//console.log(webgl.getProgramParameter(renderSolar(),'ACTIVE_ATTRIBUTES'))
//console.log(gl.getActiveAttrib(renderSolar(),100))
})
报错信息