前端技术周刊 2018-10-08：WebGL

前端技术周刊 2018-10-08

大家好，有半个月没见了。最近编辑部忙到爆炸，出刊节奏被打乱，预计在今年双十一之后恢复正常出刊速度。

前端快爆

• 10月5日，Google 发布 Project Stream，一个目标是在浏览器端可流畅运行 3A 级游戏的项目。技术核心在于将游戏的渲染与计算放到云端，而浏览器则负责声画输出和用户输入，此技术能够完美运行需要用户拥有 25M/s 的带宽，首发测试游戏为刺客信条·奥德赛。?

点评：“如何区分一个游戏开发和其他开发？让他们描述 render 和 display 的区别。”这老哏在这个时代，突然有了新的含义

• Mozilla 推出 Firefox Reality，一款开源的 VR 浏览器，可以快捷的在首屏幕发现新 VR 体验和新 VR 游戏。 ?

点评：以网页浏览器的形式切入，Mozilla 开始布局 VR 应用入口。

• CSS Font 3 已经进入推荐阶段，它包含 @font-face 的详尽定义和 CSS 中对 OpenType 特性的控制。?
• 10月4日，Node.js 基金会和 JS 基金会宣布他们正考虑合并。?

点评：Node.js 更加深入 JS 的发展进程，你中有我，我中有你

• 在 Chrome 69 中，提供了实验性的 Cookie 异步获取接口，除了避免获取 Cookie 卡顿页面以外，我们还可以方便的通过事件机制监听机制来监听 Cookie 变更，并且新接口可以在 ServiceWorker 中调用。?

瑞士军刀

• Wax 是一个尝试将 Web Audio 元素用 JSX 方式表示和操控的库。

renderAudioGraph(
    <AudioGraph>
        <Oscillator type="square" endTime={3}
            frequency={[setValueAtTime(200, 0), exponentialRampToValueAtTime(800, 3),]}
        />
        <Gain gain={0.2} />
        <StereoPanner pan={-1} />
        <Destination />
    </AudioGraph>
);

点评：脑洞也是大

• Tailwindcss 是一个辅助快速 UI 开发的原子化的 CSS 框架。

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow"></div>
  </div>
</div>

点评：更加现代，更加好使

• paper 是一个适用于 react native 的 Material Design 的 UI 库。

• t-writer 是一个打字动效库。
• 更好的 git 钩子封装 husky 已发布其 1.0 版本，新支持了 sendemail-validate 的钩子、允许 .huskyrc 配置等，更多细节请见 Changelog。
• create-react-app 2.0 版本发布，此版本升级了依赖版本到 Babel 7 、webpack 4 和 Jest 23，新支持了 PostCSS、CSS Modules 和 SASS。?

点评：不用接触 webpack 但用到它的感觉真棒

专题：WebGL

本期由昀兮提供的 WebGL 专题。在简陋的封装之上，我们能够做多少事情呢？一起来看看吧！

WebGL Demo

• 20 amazing examples of WebGL in action
• Pixi gallery
• 优秀互动案例网站FWA：新技术在商业上的优秀应用案例集锦

WebGL技术基础概念

• WebGL 技术储备指南
• WebGL 官方文档
• WebGL 开发第一道坎：矩阵与坐标变换
• OpenGL 中的 pipeline 机制
• Shader 着色器编程

Pixi：基于WebGL的2D渲染引擎

• Pixi 官网 & Github 项目地址 & Demo 地址
• Learning Pixi：初级学习资料

• 骨骼/补间动画插件：

  • Spine: Pixi-Spine 用于渲染Spine工具生产的动画文件
  • DragonBones: DragonBonesJS For Pixi 用于渲染DragonBones工具生产的动画文件
  • Adobe Flash Animate CC: Pixi-Animate 用于渲染Flash工具生产的动画文件

• 其他插件

  • Pixi 粒子系统
  • Pixi 滤镜
• Pixi-gl-core: Pixi的WebGL渲染核心代码，一个简洁的WebGL封装

---

编辑：承虎(humphry) & 审阅：壹丝
联动专题：Three.js / AR