～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,可以通过菜单访问到;我把故事的每一章节想象成一颗的星球,一颗颗的星球组成为星系;星球与星球之间有航线联系着,体现了故事章节之间的联系;读者可以在星球之间穿梭,在故事星系中做一场星际旅行.

～shader～

为了增强视觉效果，让星系的星光更真实，我采用了shader。

shader程序是运行在gpu上的，分为两种vertex shader和fragment shader。先运行vertex再运行fragment。shader的程序跟之前接触过的不一样，因为目标很明确和具体，即对顶点和面片进行各种效果的着色，shader这个“框架”给出了固定的变量类型定义和一系列相应的函数，所做的就是按需定义各种类型的变量，并调用函数对变量进行计算和赋值，某些类型的变量可以通过shader的“管线”进行向后的传递，比如在vertex shader中处理过的varying变量可以传递到fragment shader中使用。