用Zdog做一个(伪)3D的小宇宙App图标
之前简单玩了玩Zdog，用它制作了一个非常简单的3D版小宇宙图标，把过程中遇到的一些趣事分享给大家。Zdog简介Zdog是一个绘制伪3D模型的库，可以输出成Canvas或者svg。模型的geometry是在3D空间中进行计算的，渲染出来的是想被拍平的2D图像。 基于这种特性，Zdog有着一些自己的特点，例如可以更好的画出「圆」的东西。3D中球体的geometry可能是由很多个三角形拼起来的，而Zdog实际渲染出的球体其实是一个平面的圆形，相比真正的球体简单了很多。 对比threejs之类专门绘制3D图像的库，Zdog没有诸如mesh, texture, material, geometry之类的概念，只需要实例化自带的图形然后将他们添加到画布上就能看到图像出现在显示器上了。但也是由于一切都被简化了，像z-fighting之类的问题非常容易出现，下文的例子中就遇到了。Quick Start使用Zdog非常简单，只需要创建一个<canvas>，实例化一个Illustration 和任意的图形，执行一下render方法就可以获得画面了。// create illo let illo =...
用Zdog做一个(伪)3D的小宇宙App图标
之前简单玩了玩Zdog，用它制作了一个非常简单的3D版小宇宙图标，把过程中遇到的一些趣事分享给大家。Zdog简介Zdog是一个绘制伪3D模型的库，可以输出成Canvas或者svg。模型的geometry是在3D空间中进行计算的，渲染出来的是想被拍平的2D图像。 基于这种特性，Zdog有着一些自己的特点，例如可以更好的画出「圆」的东西。3D中球体的geometry可能是由很多个三角形拼起来的，而Zdog实际渲染出的球体其实是一个平面的圆形，相比真正的球体简单了很多。 对比threejs之类专门绘制3D图像的库，Zdog没有诸如mesh, texture, material, geometry之类的概念，只需要实例化自带的图形然后将他们添加到画布上就能看到图像出现在显示器上了。但也是由于一切都被简化了，像z-fighting之类的问题非常容易出现，下文的例子中就遇到了。Quick Start使用Zdog非常简单，只需要创建一个<canvas>，实例化一个Illustration 和任意的图形，执行一下render方法就可以获得画面了。// create illo let illo =...
基于WebAudio API的频率图实现
基于WebAudio API的频率图实现基于WebAudio API的频率图实现这个需求来自于小宇宙Studio的试听页面：试听页面本身除了需要支持播放之外，还有着倍速播放以及展示频率图的需求。好在WebAudio API本身内置的功能足以覆盖这些需求。音频播放部分浏览器内置播放音频有两种方式，一是使用html5标准中的<audio>标签内置的播放功能，二则是通过WebAudio API来播放。 WebAudio提供了一系列处理音频的能力。在音频处理方面，只要是在某个AudioContext中的Node就拥有着从上一个Node中拿到采样并且处理传递给下一个Node的能力；WebAudio API也有着多种AudioSourceNode，可以通过Stream、Buffer或者MediaElement创建出对应的AudioSourceNode。 在目前的场景下，需要播放的音频是通过URL下载的，因此我们可以通过<audio>标签来完成下载以及解码音频的工作，之后可以通过MediaElementAudioSourceNode来获取解码之后的数据。大致代码如下：const audioEl...
基于WebAudio API的频率图实现
基于WebAudio API的频率图实现基于WebAudio API的频率图实现这个需求来自于小宇宙Studio的试听页面：试听页面本身除了需要支持播放之外，还有着倍速播放以及展示频率图的需求。好在WebAudio API本身内置的功能足以覆盖这些需求。音频播放部分浏览器内置播放音频有两种方式，一是使用html5标准中的<audio>标签内置的播放功能，二则是通过WebAudio API来播放。 WebAudio提供了一系列处理音频的能力。在音频处理方面，只要是在某个AudioContext中的Node就拥有着从上一个Node中拿到采样并且处理传递给下一个Node的能力；WebAudio API也有着多种AudioSourceNode，可以通过Stream、Buffer或者MediaElement创建出对应的AudioSourceNode。 在目前的场景下，需要播放的音频是通过URL下载的，因此我们可以通过<audio>标签来完成下载以及解码音频的工作，之后可以通过MediaElementAudioSourceNode来获取解码之后的数据。大致代码如下：const audioEl...
