Webgl 明日方舟官网
https://ak.hypergryph.com/#information
背景
有人留言说 让我扒一下明日方舟的官网
控制台 查看是否有第三方库,查看 dom
发现有 webgl
查看 js 是否有独立的包
发现他们有自己的 web sdk
github 查看开源项目
github 检索 webgl,star 最多的项目
webgl
https://github.com/pixijs/pixijs
明日方舟官网分析
源码分析
事件监听
技术栈
webgl、全屏滚动、谷歌分析(数据统计)
字体形状
(原理 根据像素得到坐标)
序号 | 步骤 |
---|---|
1 | UI 给出图片 |
2 | 前端读取图片每一个像素 |
3 | 去掉部分坐标 |
4 | 把坐标作为一个点画出 点有大小 比如 5 像素小圆圈 |
5 | 把坐标渲染出来就得到 字体形状 |
6 | 把坐标打乱随机在一定范围渲染,就得到乱序的过程 |
产品经理:你能不能用 div 给我画条龙? https://juejin.cn/post/6963476650356916254