说起来也是有趣，本来是研究一下 WebSocket 准备给论坛/博客增加实时更新之类的特性，结果看着看着就脑洞大开搞了这么个玩意儿（（
首先明确一下，这里说的 Web Terminal 是指再网页中实现的，类似于终端模拟器的玩意儿。举例的话应该是类似于 Linode 的 LiSH 和 Visual Studio Code 中内置的那个终端，而不是 ConoHa 提供的 VNC 式的终端（其实那玩意儿是个远程桌面了）。最终目标的效果就是和 Secure Shell 类似：打开一个网页，就能启动一个网页所在服务器的 shell，比如到处都有的 bash 或者非常强大的 zsh，然后就可以与这个终端进行交互式的操作，比如使用 vim 编辑文件，或者查阅 man 中的手册。
之前我们已经看到了如何利用 HTML 的 WebAudio API 播放一段自定义的音频，其实难度并不大，主要步骤就是创建音频上下文，创建缓冲区和音频源，之后在缓存区内暴力写入波形数据，就可以播放了。
有了这些功能，理论上我们是可以在浏览器里使用 JavaScript 解码任意的音频文件并播放的，然而实际上 JavaScript 本身算是个半残废语言，而且既然能用 HTMLAudio 标签来播放音频，为什么要自己解码呢（
不过话说回来，不是所有代码都是写了拿去用的，有的时候折腾折腾一些比较奇怪的东西也非常有趣。想到世界上有一个叫 WAV(audio/x-wave) 的音频格式，其结构听说也是非常的简单粗暴，在解码上基本没有什么复杂度。于是为什么不尝试着自己用 JavaScript 把 wav 音频通过音频上下文接口播放出来呢？
前天尝试了一波那个什么 MediaSourceExtension，结果发现那套API目前限制蛮大的，而且对我来说没什么帮助（audio/x-wav 完全不正常支持，audio/mpeg 也只能在 Chrome 上使用）于是只能放弃折腾了 QAQ
昨天突然想起之前写 nanoPlayer 的时候，使用了一个叫 Audio Context 的接口，nanoPlayer 用了这个 API 里的 createAnalyser 方法，来获得音频的频率数据，进而实现了一个频谱可视化功能。之前就注意到了这个接口中有个自定义 AudioBufferSource 的方法，可以指定若干 Float32Array 并交给浏览器播放，应该是蛮有意思的。
这里就实现一个可制定频率的正弦波音频吧，如果这个实现起来没有什么难度的话，就准备试试浏览器端解码 WAV 音频。
MediaSource 是 HTML5 中的一个实验性特性，用于给 `HTMLMediaElement` 对象提供数据源。这里的数据源通常是使用 `XMLHttpRequest` 获得的数据。在 XHR 取得数据后，我们可以使用 JavaScript 对数据进行一些操作，比如提取 ID3、修改封装类型等等。 某 bilibili 开源的 Flv.js 就是使用这个特性实现的在 HTML5 环境下播放 H264 + AAC 格式的 FLV 视频。
最近在写 `Nano Player` 的时候遇到了两个比较尴尬的问题：1、ID3 信息必须手动指定；2、网易云音乐上下载的 MP3 由于某些原因必须缓冲 2MB 才能播放（详见MP3缓冲2MB才开始播放的解决方法）。于是想到是不是可以用这个 MediaSource 来暴改 MP3 呢？我也不知道
不管怎样，要用这个 MSE 来解决问题，首先就是要用它来播放文件（如果获得的数据直接喂给 MSE 都不能播放那还讨论个什么鬼）
之前的代码实现了描绘一个巨大的、正方形的、红色的点，但是，稍有常识的人都能看出，那个点的颜色、位置、大小，都是无法在运行时改变的，这就比较尴尬了……
毫无疑问，Web 前端的编程语言是 ECMAScript，然而顶点着色器和片元着色器的控制用的却是 GLSL ES。为了能动态的修改着色器代码，我们就需要在着色器代码里添加需要动态编辑的变量，并且通过已有的方法来通过 JavaScript 获取并修改他们的值。
相关库的地址：WebGLBook/lib at master
效果预览见最后。
注意：这只是个人的理解，不保证正确。如有错误欢迎指正！
首先准备具有一个画布（canvas）的页面，所有的 WebGL 程序都会通过这个 canvas 展现出来：
