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

最新推荐文章于 2024-05-21 12:45:25 发布

weixin_33866037

最新推荐文章于 2024-05-21 12:45:25 发布

阅读量105

点赞数

文章标签：前端 ui webpack ViewUI

原文链接：https://segmentfault.com/a/1190000016627505

版权

前端技术周刊 2018-10-08

webgl.jpg | center | 747x318

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

前端快爆

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

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

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

image.png | left | 747x318

点评：以网页浏览器的形式切入，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 库。

Screen-Shot-2018-10-08-at-6.40.28-PM.jpg | center | 747x318

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技术基础概念

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