～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中使用。

～galaxy中的shader（1）～

得到galaxy中各星球的球心坐标后，基于这些点集合进行shader材质的渲染：

具体地，是通过设置几何体的顶点，再将该几何体通过shader材质渲染出Three.Points：

var stars=new THREE.Geometry();

stars.vertices=verts;

galaxy=new THREE.Points(stars,galaxyMaterial);

scene.add(galaxy);

其中galaxyMaterial为shader材质，用vertex shader和fragment shader进行了着色：

galaxyMaterial=new THREE.ShaderMaterial({

  vertexShader:document.getElementById('vShader').textContent,

  fragmentShader:document.getElementById('fShader').textContent,

  uniforms:{

size:{type:'f',value:3.3},

t:{type:"f",value:0},

z:{type:"f",value:0},

pixelRatio:{type:"f",value:10000 } 

  },

  transparent:true,

  depthTest:false,

  blending:THREE.AdditiveBlending

});

～galaxy中的shader（2）～

着色器代码：

<script id='vShader' type='x-vertex/x-shader'>

  uniform float size;

  uniform float t;

  uniform float z;

  uniform float pixelRatio;

  

  varying vec3 vPosition;

  varying vec3 mPosition;//modified position

  varying float gas;

  

  float a,b=0.;

  

  void main(){

  

    vPosition=position;

    

    a=length(position);

    if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);

    if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));

    //mPosition=position*(1.+b*4.);

    mPosition=position * 1.9 ;

    vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);

    gl_Position=mvPosition*projectionMatrix;

    

    gas=max(.0,sin(-a/20.));

    gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);

  

  }

</script>

<script id='fShader' type='x-fragment/x-shader'>

  uniform float z;

      

  varying vec3 vPosition;

  varying vec3 mPosition;

  varying float gas;

      

  void main(){

    

    float a=distance(mPosition,vPosition);

    if(a>0.)a=1.;

    

    float b=max(.32,.0065*length(vPosition));

      

    float c=distance(gl_PointCoord,vec2(.5));

    float starlook=-(c-.5)*1.2*gas; 

    float gaslook=(1.-gas)/(c*10.);

    float texture=starlook+gaslook;

               

    gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);

    if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));

      

  }

</script>

～galaxy shader问题～

在使用过程中出现如下问题：

得到galaxy中各星球的球心xyz坐标后，我用了两种方式来表达这些星球：

1.通过上文中的Three.Points加Three.ShaderMaterial来表现星系的星光效果；

2.通过Three.SphereGeometry加THREE.MeshLambertMaterial来表达星球形状，主要是为了在鼠标点击时，通过THREE.Raycaster来求交集对象来选中星球；

原本预期这两种几何体（Points，Sphere）能够完美的重合在一起，毕竟每个点都对应一个球的球心，但实际效果是它们大多数情况下不能重合，当对星系进行旋转缩放时星光和星球不能重合在一起，，实际上只有在一个拉远的上视图中看，两者才重合；

这是为何？我没有找到确切原因，只怀疑跟shader的渲染计算有关系。