2D
一、繪圖渲染
1、圖形
PixiJS
一個 HTML5 構建引擎,用最快、最靈活的 2D WebGL 渲染器創建漂亮的數字化內容。旨在提供一個可以在所有設備上運行的快速輕量級 2D 庫,幫助你創建豐富的交互式圖形、跨平臺應用和遊戲,而無需深入到 WebGL API 或處理瀏覽器和設備的兼容性。
http://www.oschina.net/p/pixijs
Fabric.js
一個可以輕鬆使用 HTML5 canvas 元素的庫,在 Canvas 元素之上提供交互對象模型,同時還包含 SVG-to-canvas 解析器。它可以幫助你在畫布上創建和填充對象,從簡單的幾何圖形到成百上千路徑組成的複雜圖形。你可以通過鼠標輕鬆的移動、縮放和旋轉這些對象,修改它們的屬性(顏色、透明度,層疊順序)等等。
https://www.oschina.net/p/fabric
2、立體像素
Obelisk.js
這是一個構建等距立體像素對象的 JavaScript 庫,通過提供簡單靈活的 API ,可以輕鬆地在 HTML5 畫布中添加像磚、立方體、金字塔和斜率等等距像素元素。它嚴格遵循像素整齊的模式,在像素級別中處理所有渲染以獲得精確的像素排列。
https://github.com/nosir/obelisk.js
3、字體
opentype.js
這是一款是用於 TrueType 和 OpenType 字體的 JavaScript 解析器和寫入程序。它非常高效,可在瀏覽器和 node.js 中運行。
https://opentype.js.org/
4、創意
p5.js
P5.js 有完整的一套畫圖功能,既可當作畫圖軟件使用,也包括支持與各類頁面元素交互的庫。但是,開發者沒有被限制自己的畫布上,他們可以把整個瀏覽器頁面作為自己的素描區域。正因為如此,P5.js 有一個 addon 庫能夠使開發者非常容易地與其它 HTML5 對象(包括文本、輸入、視頻、網絡攝像頭和聲音)進行交互。
https://www.oschina.net/p/p5js
二、矢量圖形
Snap.svg
一個顯示為現代 Web 準備的 Javascript SVG 庫,專為現代瀏覽器而設計,支持最新的 SVG 功能,如屏蔽、剪切、模式、完整梯度、組等。旨在讓你使用 SVG 資源就像在 jQuery 中使用 DOM 一樣簡單。
https://www.oschina.net/p/snap-svg
Raphaël
一個小型的 JavaScript 庫,用來簡化在頁面上顯示矢量圖的工作。例如,如果要創建自定義的圖表或圖像裁剪和旋轉小部件,可以使用該庫簡單而輕鬆地實現。Raphaël 使用 SVG W3C 推薦標準和 VML 作為創建圖形的基礎,這意味著創建的每一個圖形對象也是一個 DOM 對象,可以附加 JavaScript 事件處理程序或稍後修改它們。它旨在提供一個適配器,能跨瀏覽器和更簡單地繪圖矢量作品。
https://www.oschina.net/p/raphael
三、物理引擎
Matter.js
一個用於 Web 的 JavaScript 2D 物理引擎庫,它為開發者提供了許多的功能模塊,通過簡單易用的 API 就可以實現例如彈跳、碰撞、重力、滾動等物理效果。
https://www.oschina.net/p/matter-js
3D
一、3D 繪圖(WebGL)
Three.js
大名鼎鼎的 JavaScript 3D 庫,旨在構建一個易於使用、輕量級的 3D 庫。它提供
https://www.oschina.net/p/threejs
Babylon.js
這是一個基於 HTML5、WebGL、WebVR 和 Web Audio 構建 3D 遊戲的完整 JavaScript 框架,亦或者說是一個 3D 引擎。
https://www.oschina.net/p/babylon-js
stackgl
stackgl 是一個基於 browserify 和 npm 建立的開放 WebGL 軟件生態系統。它受 Unix 的啟發,一個模塊只做一件事,並做到最好。與許多 3D 引擎不同,stackgl 強調編寫著色器代碼,並提供強大的工具,如glslify,將 npm 的模塊化和生產力帶入 GLSL 。
http://stack.gl/
二、物理引擎
Ammo.js
一個用 C++ 語言編寫的物理庫,可以看作是 WebGL 上的 Bullet 物理引擎端口。Emscripten 會直接將項目的源碼從 C++ 轉換成 Javascript ,無需人工重寫,功能基本與原始 Bullet 相同。
http://github.com/kripken/ammo.js
cannon.js
一個輕量級的 Web 3D 物理引擎,吸取了前面提到的 Three.js 和 Ammo.js 易用的 API 特點,可與任意使用 WebGL、Canvas 或 CSS3 的 3D 渲染器一起使用。
http://www.cannonjs.org/
類似的還有 Oimo.js(http://lo-th.github.io/Oimo.js/
) ,同樣是一個輕量級的 JavaScript 3D 物理引擎。最後,補充兩個 VR 庫:
A-Frame (https://www.oschina.net/p/a-frame)
一個由 Mozilla 開源的構建虛擬現實體驗的 Web 框架,使用 HTML 和 Entity-Component 製作 WebVR ,適用於 Vive、Rift、Daydream、GearVR 和桌面。
React VR(https://www.oschina.net/p/react-vr)
一個由 Facebook 開源的,用於創建在 Web 瀏覽器中運行的 VR 應用的框架。它將現代 API(如 WebGL 和 WebVR )與 React 的聲明能力結合起來,通過各種設備提供適用於消費者的體驗。
鏈接:https://my.oschina.net/editorial-story/blog/1476483
閱讀更多 螞蟻摘星 的文章
關鍵字: 圖形庫 JavaScript 渲染器