使用Latex书写论文

Posted on

最近忙着写论文,博客都快要长草了。。。但是我还是要坚持写下去!因为早就知道写论文排版会很麻烦,所以就选择了使用Latex来写论文。看到后期同学们在Word上一句一句的调整格式,我只能说学会了Latex真是磨刀不误砍柴工,后期真是太省心了,接下来就向大家介绍下如何使用Latex写论文,免除排版之忧。

Latex安装

推荐使用Tex Live来编写论文,从国内中科大的镜像源来下载每个平台对应的安装文件,Windows平台下载exe程序,Linux的各大发行版建议从官方镜像源下载。安装过程记住要首先选择国内的镜像源,根据网速来决定安装进度,基本上要安装很久,请耐心等待。

编辑器选择

Latex的主要功能是把tex文件编译成pdf文件,所以自带的编辑功能很难用。在此我推荐使用Sublime Text 2来编写论文,可以一键编译非常方便。安装好Sublime Text 2之后,我们还要安装相应的插件来配合Latex的使用,插件的启用请参考我之前的博文。在这里我们选择使用LaTeXTools来编译论文,虽然Github上有详细的配置说明,我还是简要介绍下,主要配置的就是Latex所对应的环境变量texpath。还可以配置默认的PDF阅读器进行反向搜索,Win下使用SumatraPDF,Linux使用Evince。配置完毕之后我们只需要在当前tex页面按下Ctrl+B 就可以一键编译成pdf文件。

Latex格式学习

网上有很多Latex的学习资料,不过我们也没必要详细学习,在此介绍一个简单的学习资料。一份不太简短的LATEX介绍基本上看完这个文档就可以大致明白如何利用Latex书写论文。

Latex模板

当然,我们也没必要一定要系统的学习,如果别人有做好现成的模板,我们直接套用就好,非常方便,中科大也有热心的小伙伴制作了模板。地址是USTC Thesis。近期抽时间的话,我会制作一个软件学院专用的论文模板。

相关学习资料

如何使用LaTeX排版论文

配置LaTEXTools

tagged: Latex

模块化JavaScript开发

Posted on

前端开发的节奏真是日新月异。。。短短几年竟然发展如此迅速,JavaScript的各种框架库可以说比其他语言的总和还多。Google家的AngularJS,和Facebook的React各领风骚。自己写的前端项目也越来越复杂, 单纯的面向过程开发和单文件已经不能满足现有的需求。虽然ES6早就引入模块化特性,但是目前的浏览器还没有实现。还需要借助其它前端工具进行编译。。。下面我就顺便介绍下Web开发的历史。。。

Server Rendered

以前开发Web项目,全部是服务器来渲染页面,从数据库读入数据,浏览器只负责解释页面,这种情况下不考虑交互性,其实完全不用写任何Js代码。但是缺点也很大,处理全部交给服务器,服务器压力大。而且每次都是刷新加载,所以用户体验也不是很好。

Server-Rendered + AJAX

后来使用AJAX无刷新技术,对于简单的登录交互我们没有必要刷新页面,而是直接使用Js发送认证数据进行交互和登录。一定程度上减少了服务器的压力。

Single Page App

后来出现了谷歌的AngularJS这样的富客户端Js框架,做到了真正的页面和数据分离。全部使用JavaScript进行页面的渲染和交互,只向服务器请求必要的数据,并使用JSON的数据格式来传输。这样不仅有利于减少服务器压力,而且还可以复用到各种平台。但是JavaScript代码变得越来越多和复杂,必须考虑合适的架构和模块化开发才有利于之后的维护。

Webpack模块化工具

webpack模块化工具可以把你写的符合模块化规范的代码进行打包和整合到一个单子文件,这样就可以模块化自己的项目。但是官方文档实在是很难学习,自己琢磨了一段时间才算稍微能上手。并且还遇到点小问题,在此记录下,我们可以使用命令$ npm install webpack -g 安装webpack.但是我们使用的时候经常还是遇到找不到webpack的问题,是因为缺少环境变量NODE_PATH 可以通过设置export NODE_PATH="/usr/lib/node_modules来解决。

相关学习资料

webpack指南

webpack-howto

tagged: JavaScript

WebGL渲染的知识介绍

Posted on

来到日本导师的研究方向是计算机图形学,由于我比较擅长Web开发,便选择了WebGL进行图形渲染的研究课题。学习了大半年,也该写点东西介绍下自己对WebGL的理解,如有错误,欢迎批评指正。

WebGL介绍

WebGL是基于OpenGL ES 2.0文档进行开发的,所以想了解相关API的话,直接查阅官方的OpenGL ES 2.0文档即可.WebGL的一大优势是可以使用GPU资源来进行图形渲染和相关的计算,但是使用GPU资源的话必须使用对于GPU友好的语言来进行编写,WebGL使用GLSL来编写用于GPU渲染的着色器。 JavaScript主要负责整个渲染流程的控制和GPU与CPU之间的数据交互,繁重的坐标变换计算全部交给GPU来处理。

WebGL渲染管道

获取WebGL

WebGL是基于canvas画布来进行渲染的,首先我们要使用getContext方法来获取gl对象。并判断浏览器是否支持WebGL.

    var gl = null;
    try{
        gl = canvas.getContext('experimental-webgl');
        if(gl == null){
            gl = canvas.getContext('webgl');
        }
    }
    catch(error){}

    if(gl != null){
        // WebGL is supported 
    }
    else{
        // WebGL is not supported
    }

顶点着色器

WebGL只支持绘制基本图元,复杂的图形也是有基本图元组合而成的,基本图元包括点、线段或三角形。三角形是最经常用来使用的,因为3D空间中的任何3个点都是一个三角形的顶点。顶点着色器一般用写在HTML中,并标上HTML无法识别的type,这样浏览器就不会解释执行。 顶点的X,Y,Z轴的取值范围全部是-1到1之间,所以要注意变换坐标。

    <script id="vs" type="x-shader/x-vertex">  
        attribute vec3 position;  
        uniform   mat4 mvpMatrix;

        void main(void){  
            gl_Position = mvpMatrix * vec4(position, 1.0);  
        }  
    </script>

前面的mvpMatrix矩阵是坐标变换用的,因为我们在实际渲染可能要应用到很多的矩阵变换以渲染到屏幕上。这部分知识可以看看基本的图形学相关书籍,我看的是《DIRECTX.9.0.3D游戏开发编程基础》,里面介绍了相关的矩阵概念和数学知识。顶点着色器负责绘制图元的顶点信息,接下来就要使用片段着色器绘制相关的颜色信息。

片段着色器

片段着色器接收到顶点着色器的顶点信息并在此位置绘制相应的颜色值。颜色的取值范围是0到1.

    <script id="fs" type="x-shader/x-fragment">  
        void main(void){  
            gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);  
        }  
    </script>

使用片段着色器可以给相应的顶点设置颜色值,在顶点与顶点之间的位置使用插值法设置颜色值。

渲染管道可以参考这张比较形象的流程图:

WebGl Pipeline

texture

GPU运算里面有个非常常用的数据结构,那就是texture,既可以存储图片数据,也可以存储frame数据。对于离屏渲染非常重要,不过在GPU运算里面非常重要的一点是一个变量不能既作为输入有作为输出。 在CPU运算里面我们经常写: a=a+1 但是在GPU运算里面是不能这样操作的,需要有一个临时变量存储输出的值,然后再传入到最终变量中。类似于:b=a+1;a=b这样。所以对于动画渲染,我们需要使用两个framebuffer 相互交换进行渲染。

离屏渲染

对于复杂的图形渲染,可能一次描绘无法完成最终效果,这时候我们可以把渲染的中间效果存储到framebuffer里面,再下一次渲染的时候继续使用,只需要简单的在渲染之前绑定framebuffer即可。

    gl.bindFramebuffer(gl.FRAMEBUFFER, Cube.FboHandle);

相关学习资料

WebGL MDN

WebGL 開発支援サイト

WebGL入门

tagged: WebGL