移动版星图产品设计笔记

2021-02-04  本文已影响0人  qiufeng1ye

1.需求分析

移动版电子星图比较常用的有以下几款:

Stellarium 是一款虚拟星象仪的计算机软件。它可以根据观测者所处的时间和地点,计算天空中太阳、月球、行星和恒星的位置,并将其显示出来。它还可以绘制星座、虚拟天文现象(如流星雨、日食和月食等)。
Stellarium 可以用作学习夜空知识的教具,还可以作为天文爱好者星空观测的辅助工具,或者仅仅是满足一下好奇心。由于其高质量的画质,一些天象馆将 Stellarium 用在了实际的天象放映中。有些天文爱好者还使用 Stellarium 绘制他们文章中用到的星图。

Stellarium中文官网
Stellarium WEB版
Stellarium APP版下载

移动天文台(Mobile Observatory Pro)是一款 Android 端的天文观测辅助软件,有了它,你就相当于将整个星空以及太阳系装入到你的 Android 手机中了。

移动天文台 APP下载

打开观测宇宙的窗户吧!将你的设备对着天空,Star Chart 会准确地将你所看到的内容告诉你。
Star Chart 利用设备的指南针、GPS、加速计和陀螺仪,实时计算每颗行星和可见星的当前位置,为你精确显示在夜空中的位置。

Starchart 星图绘制程序手册
星图 APP下载

2.功能设计

参考资料选用《天文观测完全手册》,《步天歌》;


在线天文平台
SKY-map中文版
ESASky中文版

3.程序开发

移动版星图产品的实现方式选择微信小程序开发。

如何使用小程序的AR能力?
如何在小程序开发AR?

程序技术路线一:

由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绘制的太阳系

在获取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))
      })
报错信息
上一篇下一篇

猜你喜欢

热点阅读