#WebGL学习历程以及使用WebGL展示MMD模型 MMD大约出现在五六年前，而WebGL的诞生的时间也大约是五六年前…… 当这两个东西同时出现在我的眼前的时候，我就有一个梦想，那就是用WebGL展示MMD模型…… 后来伴随着File API等html5技术渐渐浮现出来的时候，实际上技术早已经成熟了五年以上了…… 从我有这个梦想到我真正的静下心来学习WebGL已经经历了四年以上（中间有几次尝试，浅尝辄止），而从我学习WebGL到能够用它较好的显示MMD模型，不过经历了一个月的时间……再到我写这篇blog，已经经历了两三个月…… 我学习WebGL所使用的教程跟大家用的一样，就是[LearingWebGL.com](http://learningwebgl.com/blog/?page_id=1217 "LearingWebGL.com")教程——的翻译版本，[hiwebgl.com](http://www.hiwebgl.com/?p=42 "hiwebgl.com")。 为了督促我的学习，我建了一个[学习目录](http://1157.huaying1988.com/learnWebGL/index.html "我的WebGL学习-目录"),专门用来放我对这些课程的学习和进步过程…… 当我静下心来的时候，我发现我之前之所以没学进去，有一个很大的原因是因为这个教程的代码设计令初学者各种困惑，当我通过我的代码设计方式对教程中的代码进行重构的时候，各段代码所代表的用途渐渐清晰起来……之后的学习也变得不那么摸不到头脑了…… 这就是我的第一节课程的成果[HelloGL](http://1157.huaying1988.com/learnWebGL/HelloGL.html "HelloGL"),这是我根据我的理解组织出的相对简单的HelloWorld版本，好的开始是成功的一半，我觉得这个能将初学者从某些困惑中解脱出来…… 之后再对这个HelloWorld进行改造，成了真正的[第一个版本的HelloWorld](http://1157.huaying1988.com/learnWebGL/lesson1.html "我的WebGL学习1"),只是多了两个转换矩阵，视图矩阵和变换矩阵…… 之后，没啥难度，不过是[染上你的颜色](http://1157.huaying1988.com/learnWebGL/lesson2.html "我的WebGL学习2")…… 再之后[让它动起来](http://1157.huaying1988.com/learnWebGL/lesson3_0.html "我的WebGL学习3"),可以看出，一开始的时候我并不想添加复杂的矩阵运算，只是想让它先左右运动…… 然后第二步，添加属于我自己的矩阵运算，这些运算全是自己写的，虽然写的不好，但是这让我知道我的线性代数没白学，之后就可以[做各种变换性质的运动](http://1157.huaying1988.com/learnWebGL/lesson3_1.html "我的WebGL学习3_1")啦~ 之后改为[真正的3D图形](http://1157.huaying1988.com/learnWebGL/lesson4_1.html "我的WebGL学习4_1")也好,[添加纹理](http://1157.huaying1988.com/learnWebGL/lesson5.html "我的WebGL学习5")也好，并没有什么门槛…… [添加键盘交互](http://1157.huaying1988.com/learnWebGL/lesson6_1.html "我的WebGL学习6_1")也难不住我 [切换纹理过滤](http://1157.huaying1988.com/learnWebGL/lesson6_2.html "我的WebGL学习6_2")拦了我一段时间，但是很快就解决了…… 直到我学了第七节课，[添加光照](http://1157.huaying1988.com/learnWebGL/lesson7_1.html "我的WebGL学习7_1"),然后再[添加一些必要的交互](http://1157.huaying1988.com/learnWebGL/lesson7_2.html "我的WebGL学习7_2"),再[进行一番代码整理之后](http://1157.huaying1988.com/learnWebGL/lesson7_3.html "我的WebGL学习7_3"),我感觉我好像打开了新世界的大门！ 我找到很多之前我见到过的模型进行测试，有[Miku的葱](http://1157.huaying1988.com/learnWebGL/negi_3.html "Miku的葱")（[X3D展示对比](http://1157.huaying1988.com/x3d/negi.html "X3D对照")）,[斯坦福大学的兔子](http://1157.huaying1988.com/learnWebGL/bunny2.html "bunny练习（斯坦福大学著名bunny模型）")，还自己尝试[生成小球数据做展示练习](http://1157.huaying1988.com/learnWebGL/ball.html "小球的练习")…… 再之后我觉得应该玩点更高级的了，我仿照[glslsandbox.com](http://glslsandbox.com/ "GLSL Sandbox"),做了个类似的[GLSL测试](http://1157.huaying1988.com/learnWebGL/glsl.html "GLSL测试")…… 此时，我觉得用WebGL展示MMD模型数据的时机到了…… 我先在网上搜MMD的模型文件PMD文件的文件结构和数据格式……网上的资料一如既往的少…… 于是我一不做二不休，直接找著名开源项目MMD-Agent的源码，其中的Library_MMDFiles中就有关于PMD如何解析的代码……其中src/include/PMDFile.h保存的是解析PMD文件时的数据结构，src/lib/PMDModel_parse.cpp中是解析PMD文件的总流程，PMDModel_render.cpp中是渲染PMD模型的总流程…… 开始的时候，我只解析了模型数据，这一步还是相对很顺利的，同时，我也很顺利的把模型数据展示出来了…… 之后……是纹理文件，这个花费了我很长的时间……开始的时候的模型是一次渲染的，首先为了编程方便，根据不同的纹理进行了多次渲染，拼装成一整个模型…… 其次，关于纹理文件的加载过程也是废了一些功夫……然后就是纹理中存在alpha通道（透明度）的情况，原先是黑色的或白色的，经过我反复的查找终于找到了解决方案，将图片的alpha通道数据正确的传递到渲染器…… 再次，是tga格式的图片……其实我也不知道为啥，mmd模型的纹理中经常包含有tga格式的图片……由此有一大批模型不能正常显示，这个令我很苦恼……于是，我不得不支持tga格式的图片……在网上搜索tga格式的解析方法……然后去实现……这个没啥好说的…… 当前只支持tga简单类型，压缩类型后来由于满足了当前需求后来没再添加……一开始解析后的tga是反转的，导致一直显示效果不对，令我特别苦恼，直到后来，用canvas显示tga转换结果发现是反的之后，我对tga进行了反转，这个过程性能特别差…… 后来我想到了好的办法，或许可以直接将tga数据传入渲染器，让渲染器来解码的方式（设置isTGA标志，进行反转，然后当做rgb数据来读取，直接进行数据转换），这样效率或许高点，但是后来一直都没有去实现…… 于是最终做出的是这个[MMD模型渲染页面](http://1157.huaying1988.com/learnWebGL/mmdModel_5.html "MMD模型渲染测试")…… **下面展示几个效果较好，我比较喜欢的MMD模型** 这是显示洛天依模型的运行效果：  灵梦模型的运行效果：  樱初音模型的运行效果：  风晴雪模型的运行效果：  最后，有一个在目录中没有的文件，那就是[MikuMikuDancing](http://1157.huaying1988.com/learnWebGL/MikuMikuDancing.html "我想让小人跳舞"),我原来的想法是在这个阶段实现让PMD小人模型跳舞的想法……这个文件跟之前的那个渲染的页面唯一的不同是，源码的实现中有关于改变表情的函数调用changeFace(i),参数传递一个表情序号（一个0~最大表情序号的整数），然后模型表情就会变化为指定序号的表情……其实如果做个定时器动画效果还是很hi的~ 这是天依表情动画效果：  天依表情3：  天依表情23：  天依表情29：  是不是感觉很高大上？所有这些都是用JS实现的，而且全在一个html文件里，可以直接通过右键查看网页源码的方式查看实现方式~ 最后祝大家玩得愉快~