尝试搭建webgl游戏引擎-起头

为了满足自己的好奇心
准备自己尝试搭一个小的webgl网页游戏引擎
然后 记录自己开发的进程和遇到的问题

立个flag。用自己的引擎开发一款《跳一跳》

进度效果展示

目前包含了

初阶webgl管理器
typescript+webpack框架
初阶资源、实体、组件架构
文字标签
2d图片
方盒子
初阶光照
初阶节点树

创建webgl管理器

主要参考了《webgl编程指南》这本书的第九章第二节

简单来说，需要如下步骤来做一个webgl地基

利用准备好的shader字符串，用webgl创建顶点和片元shader
创建webgl程序
编译shader并附加到webgl程序
链接webgl程序上下文

此步遇到的问题
第一个问题是加载和解读shader字符串。
因为需要把shader作为单独的资源来处理，所以创建了*.glsl来保存shader。
然后利用了webpack的raw-loader来加载shader。
我还想把顶点和片元shader写在一起。
所以就用特殊的分隔符来分开了顶点和片元内容。
然后用正则根据分隔符提取顶点和片元内容，提供给webgl管理器。

用的正则是：

some.glsl
vertex%{void main(){gl_Position=vec4(0,0,0,1.0);}
}%
fragment%{void main(){gl_FragColor=vec4(1.,1.,1.,1.);}
}%
some.ts
const vertex = shader.match(/vertex\%\{([^\%]+)\}\%/)![1].replace(/^[^# ]+/, '');
const fragment = shader.match(/fragment\%\{([^\%]+)\}\%/)![1].replace(/^[^# ]+/, '');

很简单，但是目前还是比较有效。

第二个问题是glsl版本问题
因为想要使用in out的功能。所以需要改版本号。
就是在shader内容第一行加上#version 300 es这样的东西。
但是因为《webgl编程指南》没有用到，所以在csdn里查了很久。
也不是很懂。一直没整出这一行来。
很长时间是只写了#version 300，怎么都会报错。
不让这不让那的。
最后查glsl版本的文章，才发现需要加es标识，表示嵌入式系统
用于Android, iOS, WebGL
ES是：
OpenGL for Embedded Systems
参考：webgl版本

没有系统学习过相关知识，所以解决问题还是很耗费时间。

绘制内容基础

如果要绘制基础形状，需要在这个基础上增加一些功能：

在顶点shader内添加坐标的输入，uv的输入。
启动对应的webgl程序。（一套shader对应一个程序）。
用代码给webgl程序添加对应的数据
清除背景，并绘制形状

顶点信息输入可以用layout（location=x）类型名称 来声明
这样在代码里就可以直接设置，不用获取地址了。

要绘制多个点，一般采用buffer的形式，可以一次性给顶点程序传入很多数据。

此步遇到的问题
这一步主要遇到的问题是程序切换的问题。
为了减少开销，创建数组和buffer和贴图等都只做一次。在切换程序后进行绑定。

——————
ok。先写到这。最近打球腰闪了。好久没运动了。
下一篇写文字的创建