前端技術週刊 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