～momoji.技术架构及算法～

选取python3为开发语言,版本python 3.7.3;

web架构为pyramid;

数据库访问采用sqlalchemy;

使用jinja2模板,也提供api,但非完全前后端分离;

前端使用了echarts2;

考虑该站点依靠iis挂了几个应用,80端口已占就用iis做了application request routing 和 url rewrite,后续考虑换为nginx;

数据库mysql,版本mysql 8.0.16.0;后续考虑换位文件系统;

存储结构具有为单父属性的节点,即tree或者multi-tree;但最终实现可成环的有向图,非dag(因为有向且成环);

～初试WebGL～

这几日玩了一下WebGL技术,将它应用到了momoji.

初次体验这种基于浏览器的,可以用js操作,展现于HTML5 Canvas上的3D技术,感觉很神奇;特别是看到了许多应用webgl的站点后,感觉非常震撼.

希望WebGL能给momoji的作者/读者们带来不一样的体验.

～three.js～

具体地,我采用的是Three.js,这是一个3D JavaScript库,封装了底层的图形接口.接触到了用Three.js生成:renderer,camera,scene,geometry,material,light;通过OrbitControls来控制相机位置角度;

通过对three.js的学习,重温了很多数学知识:立体几何中的点线面,坐标变换,投影,透视原理...

～galaxy～

WebGL或者说Three.js在momoji的第一个落地的应用是galaxy,可以通过菜单访问到;我把故事的每一章节想象成一颗的星球,一颗颗的星球组成为星系;星球与星球之间有航线联系着,体现了故事章节之间的联系;读者可以在星球之间穿梭,在故事星系中做一场星际旅行.

～galaxy坐标的确定～

制作故事星系，就要确定每颗故事星球的坐标，即它在三维坐标系内的(x,y,z)值；

在这里我借助echarts取了个巧：直接将echarts生成的force图中节点的(x,y)值作为三维坐标系坐标值的x，y这两个维度的值，也就是说，故事星系在xoy面（z=0）上的投影就是故事星盘；

那z值如何取呢？我想描绘出中间略凸的一个形状，于是采用了正态分布函数，具体而言是取星球在z=0面上的投影坐标点(x,y)到原点(0,0)的距离r（r=(x^2+y^2)^0.5）；将r带入正态分布概率密度函数公式，并乘一个系数算得z；正态分布是一个典型的在均值附近凸出的函数，只要调节公式中的均值（这里取0，因为要在原点处凸出）和方差（代表离散程度，表征了正态分布概率密度的集中性）即可得到不同的中凸点分布；

但这样有个问题：得到的星球将是朝一个方向凸出的（z轴正方向）；为了解决这个问题，我取了一个随机变量，来控制z值的正负，当随机数>=0.5时z值为+否则为-；这样就将点随机分到z=0平面上下两侧去了，因为随机分节点为0.5，所以上线两侧的点数基本相等，是对称的分布；

这样就形成了类似星系的形状。