免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
給 Web 開發(fā)人員推薦的開源圖形庫 —— 2D/3D

長按上圖識別二維碼報(bào)名濟(jì)南源創(chuàng)會


現(xiàn)代 Web 開發(fā)在將體驗(yàn)和功能做到極致的同時,對于美觀的追求也越來越高,數(shù)據(jù)可視化、動畫交互、2D/3D 等元素已然成為標(biāo)配。

以下是為 Web 開發(fā)者推薦的一些精品開源圖形庫,旨在專注于最常見的問題和最常用的東西。將針對動畫(Animation)、數(shù)據(jù)可視化(Data Visualization)、2D/3D 分別整理,歡迎保持關(guān)注。

推薦閱讀:給 Web 開發(fā)人員推薦的開源圖形庫 —— 動畫


1

2D

1


一、繪圖渲染


 

圖形:PixiJS

http://www.oschina.net/p/pixijs

一個 HTML5 構(gòu)建引擎,用最快、最靈活的 2D WebGL 渲染器創(chuàng)建漂亮的數(shù)字化內(nèi)容。旨在提供一個可以在所有設(shè)備上運(yùn)行的快速輕量級 2D 庫,幫助你創(chuàng)建豐富的交互式圖形、跨平臺應(yīng)用和游戲,而無需深入到 WebGL API 或處理瀏覽器和設(shè)備的兼容性。

效果預(yù)覽:http://pixijs.github.io/examples/


圖形:Fabric.js

https://www.oschina.net/p/fabric

一個可以輕松使用 HTML5 canvas 元素的庫,在 Canvas 元素之上提供交互對象模型,同時還包含 SVG-to-canvas 解析器。它可以幫助你在畫布上創(chuàng)建和填充對象,從簡單的幾何圖形到成百上千路徑組成的復(fù)雜圖形。你可以通過鼠標(biāo)輕松的移動、縮放和旋轉(zhuǎn)這些對象,修改它們的屬性(顏色、透明度,層疊順序)等等。

效果預(yù)覽:http://fabricjs.com/demos/


立體像素:Obelisk.js

https://github.com/nosir/obelisk.js

這是一個構(gòu)建等距立體像素對象的 JavaScript 庫,通過提供簡單靈活的 API ,可以輕松地在 HTML5 畫布中添加像磚、立方體、金字塔和斜率等等距像素元素。它嚴(yán)格遵循像素整齊的模式,在像素級別中處理所有渲染以獲得精確的像素排列。


字體:opentype.js

https://opentype.js.org/

這是一款是用于 TrueType 和 OpenType 字體的 JavaScript 解析器和寫入程序。它非常高效,可在瀏覽器和 node.js 中運(yùn)行。


創(chuàng)意:p5.js

https://www.oschina.net/p/p5js

P5.js 有完整的一套畫圖功能,既可當(dāng)作畫圖軟件使用,也包括支持與各類頁面元素交互的庫。但是,開發(fā)者沒有被限制自己的畫布上,他們可以把整個瀏覽器頁面作為自己的素描區(qū)域。正因?yàn)槿绱?,P5.js 有一個 addon 庫能夠使開發(fā)者非常容易地與其它 HTML5 對象(包括文本、輸入、視頻、網(wǎng)絡(luò)攝像頭和聲音)進(jìn)行交互。

效果預(yù)覽:https://p5js.org/reference/


二、矢量圖形


Snap.svg

https://www.oschina.net/p/snap-svg

一個顯示為現(xiàn)代 Web 準(zhǔn)備的 Javascript SVG 庫,專為現(xiàn)代瀏覽器而設(shè)計(jì),支持最新的 SVG 功能,如屏蔽、剪切、模式、完整梯度、組等。旨在讓你使用 SVG 資源就像在 jQuery 中使用 DOM 一樣簡單。

效果預(yù)覽:http://snapsvg.io/demos/


Rapha?l

https://www.oschina.net/p/raphael

一個小型的 JavaScript 庫,用來簡化在頁面上顯示矢量圖的工作。例如,如果要創(chuàng)建自定義的圖表或圖像裁剪和旋轉(zhuǎn)小部件,可以使用該庫簡單而輕松地實(shí)現(xiàn)。Rapha?l 使用 SVG W3C 推薦標(biāo)準(zhǔn)和 VML 作為創(chuàng)建圖形的基礎(chǔ),這意味著創(chuàng)建的每一個圖形對象也是一個 DOM 對象,可以附加 JavaScript 事件處理程序或稍后修改它們。它旨在提供一個適配器,能跨瀏覽器和更簡單地繪圖矢量作品。


三、物理引擎


 

Matter.js

https://www.oschina.net/p/matter-js

一個用于 Web 的 JavaScript 2D 物理引擎庫,它為開發(fā)者提供了許多的功能模塊,通過簡單易用的 API 就可以實(shí)現(xiàn)例如彈跳、碰撞、重力、滾動等物理效果。

效果預(yù)覽:http://brm.io/matter-js/demo/


1

3D

1


一、3D 繪圖(WebGL)


 

Three.js

https://www.oschina.net/p/threejs

大名鼎鼎的 JavaScript 3D 庫,旨在構(gòu)建一個易于使用、輕量級的 3D 庫。它提供 <canvas>、<svg>、CSS3D 和 WebGL 渲染器,可以用來可創(chuàng)建各種三維場景。

效果預(yù)覽:https://threejs.org/examples/


Babylon.js

https://www.oschina.net/p/babylon-js

這是一個基于 HTML5、WebGL、WebVR 和 Web Audio 構(gòu)建 3D 游戲的完整 JavaScript 框架,亦或者說是一個 3D 引擎。

效果預(yù)覽:http://www.babylonjs.com/


stackgl

http://stack.gl/

stackgl 是一個基于 browserify 和 npm 建立的開放 WebGL 軟件生態(tài)系統(tǒng)。它受 Unix 的啟發(fā),一個模塊只做一件事,并做到最好。與許多 3D 引擎不同,stackgl 強(qiáng)調(diào)編寫著色器代碼,并提供強(qiáng)大的工具,如glslify,將 npm 的模塊化和生產(chǎn)力帶入 GLSL 。


二、物理引擎


 

Ammo.js

http://github.com/kripken/ammo.js

一個用 C 語言編寫的物理庫,可以看作是 WebGL 上的 Bullet 物理引擎端口。Emscripten 會直接將項(xiàng)目的源碼從 C 轉(zhuǎn)換成 Javascript ,無需人工重寫,功能基本與原始 Bullet 相同。


cannon.js

http://www.cannonjs.org/

一個輕量級的 Web 3D 物理引擎,吸取了前面提到的 Three.js 和 Ammo.js 易用的 API 特點(diǎn),可與任意使用 WebGL、Canvas 或 CSS3 的 3D 渲染器一起使用。

效果預(yù)覽:http://schteppe.github.io/cannon.js/

類似的還有 Oimo.js (http://lo-th.github.io/Oimo.js/),同樣是一個輕量級的 JavaScript 3D 物理引擎。


補(bǔ)充兩個 VR 庫


A-Frame

https://www.oschina.net/p/a-frame

一個由 Mozilla 開源的構(gòu)建虛擬現(xiàn)實(shí)體驗(yàn)的 Web 框架,使用 HTML 和 Entity-Component 制作 WebVR ,適用于 Vive、Rift、Daydream、GearVR 和桌面。


React VR

https://www.oschina.net/p/react-vr

一個由 Facebook 開源的,用于創(chuàng)建在 Web 瀏覽器中運(yùn)行的 VR 應(yīng)用的框架。它將現(xiàn)代 API(如 WebGL 和 WebVR )與 React 的聲明能力結(jié)合起來,通過各種設(shè)備提供適用于消費(fèi)者的體驗(yàn)。


更多干貨請前往公眾號菜單欄“讀我”->“干貨分享”查看。



本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
給 Web 開發(fā)人員推薦的開源圖形庫 —— 數(shù)據(jù)可視化
數(shù)據(jù)可視化的基本概述以及幾個工具的推薦
three.js第一篇【基本了解】
WebGL 是否需要以 OpenGL 為學(xué)習(xí)基礎(chǔ)?
Web動畫
想要搞懂?dāng)?shù)據(jù)可視化,看這一篇就夠了
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服