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

10

前端技术周刊 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

WebGL技术基础概念

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


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

你可能感兴趣的

载入中...