对小程序有关注开发者，应该都会记得，在去年开发者工具推出 1.0 版本的时候，和腾讯云一起同步推出了一个云的解决方案，通过授权的方式可以便捷的进行小程序的服务端开发。经过一年的实践和思考，我们觉得小程序的云服务，我们可以做的更进一步，云能力应该是小程序的 基础能力，和 API、组件一样，是每个小程序都所拥有的，所以有了现在的 小程序·云开发 。一言概之：基础能力用或者不用，小程序云服务都在那里，不多不少。   云开发正式开放的这几天，从我们的数据来看，有非常非常多的开发者都参与了进来，在社区上也收到了大家发来的许多疑问、吐槽。我们整理了下，大约有以下几类     开通的问题1. 工具中没有云服务图标或新建项目的时候没有云开发 QuickStart 选项 原因可能是: 工具版本旧：点此 下载最新版工具 使用了 测试号 或游客模式：使用其他 AppID 2. 开通时候云控制台报错的问题 在开放云开发的时候没有想到大家这么热情，资源一时准备不足导致开通失败，现已恢复正常，大家重试就好。另外还有少部分一些历史帐号的问题，也基本已经解决。 3. 调试器中报错提示 fail invalid scope 这个报错是因为云服务尚未开通，需要先在工具栏上点击左侧的 “云开发” 按钮开通云服务   数据库的问题1. 导入数据失败或一直处于等待状态 之前导入有 bug 可能会造成一些失败，现已修复，可重试；还有大部分问题是导入的数据格式的不对，可以参见文档中 数据库导入 的部分，另外我们会尽快的加上数据格式的前端校验。 2. 控制台数据库报错 /wx/database?action=creatFreeDb 请求失败: 100008, Db Resource Amount Over Limit 问题已解决，重试即可 3. 云开发数据库操作失败报错 Database Authorization Not Found:l5 get route fail: not found 问题已解决，重试即可   存储管理的问题上传文件后无法下载或引用 和上面提到的开通失败的原因是一样的，CDN 资源一时准备不足，现已恢复正常，大家重试即可   配额使用的问题大家如果对资源的配额有相关疑问可以查看 文档 中关于配额的说明，对于其中一些概念也在最下方的脚注做了更详细的解释。目前提供的资源配额是基础版的配额，如果需要提升上限，可以按文档中的说明（在配额文档的表格下方）发邮件到相应邮箱申请。   QuickStart 的问题1. 小游戏云开发 QuickStart 云函数 [代码]uploadScore[代码] 报错提示找不到 [代码]wx-server-sdk[代码] 需要打开终端进入到云函数 [代码]uploadScore[代码] 的目录执行命令 [代码]npm install[代码] 安装 Node.js 依赖并上传，注意需先安装好 [代码]Node.js[代码]，并保证 [代码]node[代码] 和 [代码]npm[代码] 在环境变量中 2. 调试器报错提示 fail invalid scope 在上面的云服务开通中也提到了，需要先开通云服务   其他问题1. 使用云开发是否不能使用其他云服务 不是的，云开发作为基础能力，同开发者现有的服务端能力是不冲突的，可以一起去使用。 2. 小游戏是否可以使用云开发 可以的 3. 如何快捷的调用微信的开放接口，比如发送模板消息、微信支付等等 相关功能我们已经在开发中，会尽快给到大家 4. 如何在小程序插件中使用云开发 插件相关功能和需求包括小程序插件是否有插件自己的云开发，插件是否可以调用寄主的云开发能力等等正在规划和开发中，会尽快给到大家 5. 配额套餐的问题 前面也提到我们有提供一套基础版的套餐，它的配额可以满足大部分基础小程序的需求，我们也会尽快推出更高阶的方案，满足不同的小程序开发者。 6. 云开发管理端 API 开放的问题 获取管理端统计数据、管理数据库等等管理端的 API 会尽快支持上

平视显示器（head up display）简称HUD。游戏经常在三维场景上叠加文本或二维图形信息，如弹窗，血量条等，同时需要保证它们在屏幕上的位置和大小不变。 传统的H5游戏可以使用dom，或是在原本的webgl上面盖一个新的2D canvas（画布）做为HUD来实现，同时使用其接口就可以画出HUD所需要的内容。 但微信小游戏只支持一个画布，无法和传统H5游戏的绘制方式一样。因此，要在3D世界中实现HUD就必须在这个唯一的画布上实现。 我们在后台收到了许多反馈：如何用小游戏的框架来实现HUD的绘制。这一期的小故事，我们跟大家分享如何在微信3D小游戏中绘制HUD: 本文的内容包括： 1.微信小游戏只支持一个画布 2.如何使用三维平面模拟HUD？ 3.相机变化导致HUD产生位移缩放 4.如何用图形渲染管线解决上述问题？ 5.绘制场景时视点变化与投影阶段的问题 6.如何使用顶点着色器解决上述问题？ 微信小游戏只支持一个画布 与浏览器不同，微信客户端只有一个画布，并且不能使用html。 普通H5游戏会使用html，或是创建一个新的2D canvas标签，定位在原本的webgl canvas上面，同时使用2D canvas的接口就可以画出HUD的内容。但微信小游戏不支持这样做。所以在三维世界中要实现HUD，需要在一个画布上实现。 所以在三维世界中要实现HUD，则必须在这个唯一的画布上实现。 如何使用三维平面模拟HUD？ 对于图像，webgl可以通过纹理贴图来展示图像。开发者可将图片作为的纹理贴图，贴在一个三维矩形平面上，使平面一直正对相机，来模拟HUD。 [图片] 对于文字，微信小游戏三维的canvas是使用webgl作为context的。但是webgl却无法像2D的context能直接画文字。开发者如果直接用webgl画出文字，需要导入文字模型的顶点数据，但由于文字比较复杂，顶点数量多，相当于渲染了一个复杂的3D物体，这种方式无论是从文件大小还是性能上，都会有损体验。 [图片] 那么是否可以使用2D canvas 绘好文字，再作为纹理贴在三维平面上呢？ 虽然微信小游戏只能渲染一个canvas，但是开发者可以创建多个的canvas实例。 Step1：开发者可创建一个离屏的2D canvas，再使用2D的接口绘制文字、图片等； Step2：开发者可将这个离屏canvas传给webgl，当成一个texture，贴到一个三维的平面物体上，使其永远都在相机的正前方，通过这样模拟HUD 。 补充 webgl支持直接将canvas作为纹理； void gl.texImage2D(target, level, internalformat, format, type, HTMLCanvasElement? pixels)。 [图片] 相机变化导致HUD产生位移缩放 游戏场景中的相机是会改变的，比如说吃鸡游戏中的第一人称和第三人称视角转化。我们发现了一个问题：当相机的可视范围变化的时候，HUD就会发生形变。 [图片] 那是因为视野看的越广，映射到屏幕上的时候，同一个物体就显得越小。 我们需要保证HUD在任何视角下位置大小都是正确无误的。那么如何才能做到呢？ 要解决这个问题就需要明白计算机是如何把三维场景画到二维的屏幕上的。这个画的过程也就是计算机图形渲染管线帮我们完成的。 如何用图形渲染管线解决上述问题? 画一个三维物体到二维平面可以分为三个阶段： ●“准备数据” （应用程序阶段） ●“画点” （几何阶段） ●“画像素” （光栅化阶段） [图片] 一个HUD实际上是一个矩形的平面物体，通过矩形的4个顶点就可以描述出来一个平面的位置、大小。为了让平面的位置，大小看起来没问题，我们需要修改“画点”阶段的逻辑。这个阶段又可以进行如下的细分。 [图片] 与摄影机相关的逻辑，是视点变换还有投影阶段。我们可以通过修改这两者的逻辑来达到我们的目的。 绘制场景时视点变化与投影阶段的问题 1.视点变化阶段的问题 我们需要绘制摄像机看到的世界，而摄像机可以处在任意位置观察这个世界。视点变化本质是就是根据摄像机看的方向来旋转物体，从而让三维空间的物体正确旋转到观察者看到的样子。原本是摆正放的物体，由于观察者的视角问题（歪着看），所以显示出来物体最终也是歪的。 [图片] 通过在应用程序阶段定义相机的视点、观察目标点以及上方向等数据，我们可以得到一个叫做视图矩阵（View Matrix）的矩阵。把这个矩阵与物体的位置做矩阵乘法就可以得到物体变化后的新位置。 因为游戏世界中，摄像机的位置是不停变化的，而我们的物体却需要一直出现在摄像机正前方。所以游戏场景中的视觉矩阵（View Matrix）在每一帧的渲染中，可能都在变化。这里我们只要将HUD原本一直在变化的视觉矩阵（View Matrix）替换为我们需要的，并且保持不变就好了。 2.投影阶段的问题 投影其实是把透视摄像机原本的可视范围，压缩成一个单位立方体。 [图片] 再通过屏幕映射，就会出现如下的效果出来。 [图片] 这一个过程中，会通过摄像机定义的数据（比如长宽比，视场，近截面，远截面），来生成一个叫做投影矩阵（Projection Matrix）的矩阵。将这个矩阵与位置信息进行矩阵乘法，再进行一些归一化操作，就会得到单位立方体内的位置。 和视觉矩阵（View Matrix）一样，对于HUD的物体，我们也不能使用透视摄像机生成的矩阵，否则就会可能导致大小变化。我们替换成正视摄像机的矩阵。这样算出来的位置就是永远都是正常的，不需要担心游戏中更新了相机的数据。 如何使用顶点着色器解决上述问题? 现在我们要用顶点着色器来修改视点变换还有投影的逻辑。 顶点着色器与片元着色器都是 webgl 提供给我们用来操作渲染管线的能力。让我们可以使用glsl 这种编程语言来对 GPU 的能力进行编程。 [图片] 顶点着色器运行在“画点”阶段（几何阶段），也就是对每个三维物体的顶点进行计算。片元着色器运行在“画像素”阶段（光栅化阶段），把顶点围起来的像素（其实是片元）画上颜色。 我们可以通过顶点着色器，修改视点变换与投影的逻辑，最后达到我们的效果。 总结 由于微信小游戏支持一个单独的画布，开发者想要在任何游戏场景下绘制正常的HUD，可以通过顶点着色器的能力，去修改视点变换与投影的所用到的矩阵，最终来解决这个问题。 微信小游戏还有很多与H5游戏、客户端游戏不一样的设计理念与特点，我们会在后续的文章里继续分享微信小游戏背后的小故事。