標籤：

技術周刊（WebGL 2018-10-08）

12-10

大家好，有半個月沒見了。最近編輯部忙到爆炸，出刊節奏被打亂，預計在今年雙十一之後恢復正常出刊速度。

前端快爆

  • 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


推薦閱讀：

TAG:WebGL | 科技 | 技術 |