大家好，很高興又見面了，我是"進階前端進階"，由我帶着大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發！

今天給大家帶來的主題是“ 2/3D 渲染最頂級10大熱門開源庫”，通過對這些庫的簡單介紹，後續大家有類似 2/3D 渲染的述求可以直接拿來即用。當然文章篇幅有限，不能對某一個庫深入展開，大家可以參考文末的資料繼續學習。

後續我也會持續關注 2/3D渲染相關的最新動态，有機會就會分享給大家，歡迎大家保持關注。話不多說，直接進入正題。

前言

基于 Canvas 的獨特優勢，開發人員現在可以在浏覽器中建立各種複雜的圖形、動畫應用程式，包括但不限于：遊戲、資料可視化、藝術作品等等。由于 Canvas 底層通過調用 JS 語言進行開發，進而對于 Web開發人員而言，學習成本相對較低，同時非常适合初學者、中級開發人員使用。同時，随着浏覽器的快速更新疊代，Canvas 的相容性已經非常不錯了。

除了 Canvas 渲染外還有 WebGL 。WebGL是一種用于在 Web 浏覽器中渲染3D圖形的JavaScript API，允許開發者使用底層的 OpenGL ES（OpenGL for Embedded Systems）來建立高性能的 3D 場景和互動式應用程式。WebGL充分利用了 GPU 的計算能力和硬體加速功能，可以實作複雜的圖形渲染、動畫效果和資料可視化。WebGL 的出現一方面加速了浏覽器中進階動畫的發展，同時為其性能優勢提供了很好的基礎保障。

除了 WebGL 外，最近 Chrome 113版本等對于 WebGPU 的引入也引起了前端圈等不小的轟動。WebGPU 與 WebGL 相比有其獨特的優勢，比如：WebGPU 将底層接口從老舊的 OpenGL 更新到了最新的 Direct3D 12、Vulkan 和 Metal，使其既擁有了比過去高得多的執行效率，又使得未來的浏覽器可以通路更多的顯示卡 GPU 底層功能，同時數倍的增強了基于網頁端的本地AI加速性能。

基于 Canvas 和 WebGL、 WebGPU，開發者可以快速實作各種複雜的前端動畫、特效渲染。本文将分享幾個幫助開發人員更加高效地使用 Canvas 和WebGL、WebGPU 進行繪圖的 JavaScript 庫。通過這些底層庫的分享，大家後續對于 2/3D渲染的底層架構選擇會有一個宏觀的認知，同時也能對每一個庫有一個初步的了解。

Babylon.js

Babylon.js 是一個由微軟開源的 JS 架構，用于網絡開發 3D 應用程式、視訊遊戲，是一個實時 3D 引擎，其通過 HTML5 在 Web 浏覽器中顯示 3D 圖形。

使用 Babylon.js 架構對使用者來說很容易，包含建立和管理 3D 對象、特效和聲音等所需的所有工具。随着 2023 年 4 月底 Babylon.js v6.0 釋出（可以閱讀我的另一篇文文章），新增了包括以下衆多核心特性：

新 Havok WASM 插件
新增性能優先模式
流體渲染
改進的螢幕空間反射
紋理貼花
新的 GLTF 擴充支援
節點材質光線行進
新的三平面和雙平面節點
圖形使用者界面編輯器 V1
FIGMA 到 BABYLON.JS 社群擴充
輔助功能螢幕閱讀器支援
重組文檔

Babylon.js的使用也是非常簡單，比如下面的示例：

// 擷取Canvas元素
var canvas = document.getElementById('renderCanvas');
// 加載3d引擎
var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
//建立并傳回場景的 CreateScene 函數
var createScene = function(){
    // 建立一個BJS Scene
    var scene = new BABYLON.Scene(engine);
    // 建立  FreeCamera, 設定位置 {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, false);
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    var sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE}, scene);
    sphere.position.y = 1;
    var ground = BABYLON.MeshBuilder.CreateGround("ground1", { width: 6, height: 6, subdivisions: 2, updatable: false }, scene);
    return scene;
}
//調用createScene函數
var scene = createScene();
engine.runRenderLoop(function(){
    scene.render();
});
window.addEventListener('resize', function(){
    engine.resize();
});

目前 Babylon.js 已經在 Github 開源，有超過 20.6k 的 star、3.1k 的 fork、超過 3.7k 的項目依賴量，代碼貢獻者 500+，是一個值得長期關注的開源項目。

Three.js

Three.js 是一款運作在浏覽器中的 3D 引擎，基于 JavaScript 可直接運作 GPU 驅動遊戲與圖形驅動應用于浏覽器。Three.js 提供了大量特性與 API 以繪制 3D 場景于浏覽器，包括：攝影機、光影、材質等各種對象。

Three.js 的目标是建立一個易于使用、輕量級、跨浏覽器的通用 3D 庫。目前建構僅包含 WebGL 渲染器，但 WebGPU（實驗性）、SVG 和 CSS3D 渲染器也可作為插件使用。

比如下面的示例代碼建立一個場景、一個相機和一個幾何立方體，并将立方體添加到場景中。然後它為場景和相機建立一個 WebGL 渲染器，并将該視口添加到 document.body 元素。最後，它為相機在場景中制作立方體動畫。

import * as THREE from 'three';
// 示例化
const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;
const scene = new THREE.Scene();
// 建立場景
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
// 執行個體化WebGLRenderer
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );
// 動畫函數
function animation( time ) {
	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;
	renderer.render( scene, camera );
}

Three.js的典型特性包括：

簡單易用的API建構3D場景：Three.js可以快速建立3D物體、模型、燈光、背景等元素，同時精确控制位置、大小、角度、形狀等屬性，以建構真實的3D場景。
提供多種幾何形狀和材質：Three.js 提供了多種标準的幾何形狀（如立方體、球體、圓柱體等），并支援自定義，同時還提供了多種材質（如：紋理、反射、透明度等）來控制物體的外觀。
支援多種光照效果：Three.js 支援多種光源類型（如點光源、方向光源、聚光燈等），并提供多種材質和光照組合效果，以實作真實3D渲染效果。
提供多種動畫效果：Three.js支援多種動畫方式，包括：基于關鍵幀的骨骼動畫、基于曲線的錄影機控制、粒子系統等。
支援多種檔案格式：Three.js 支援多種标準3D檔案格式（如OBJ、STL、Collada等），以及自定義JSON格式，使得開發者可以加載和使用不同來源的3D模型。

目前 Three.js 已經在 Github 開源，有超過 91.6k 的 star、34.6k 的 fork、超過 177k 的項目依賴量，代碼貢獻者 1.75k+，是一個非常優秀的頂級前端開源項目。

PixiJS

PixiJS 項目旨在提供一個适用于所有裝置的快速、輕量級的 2D 庫。 PixiJS 渲染器讓每個人都可以在不了解 WebGL 的情況下享受硬體加速的強大功能。而且，速度非常很快。

本質上，PixiJS 是一個渲染庫，可讓開發者建立豐富的互動式圖形和跨平台應用程式和遊戲，而無需深入研究 WebGL API 或處理浏覽器和裝置相容性問題。

PixiJS 具有完整的 WebGL 支援，并在需要時無縫回退到 HTML5 的 Canvas。作為一個架構，PixiJS 是創作互動式内容的絕佳工具，尤其是近年來從 Adobe Flash 中撤離的情況下。

可以選擇将 PixiJS 用于圖形豐富的互動式網站、應用程式和 HTML5 遊戲。開箱即用的跨平台相容性和優雅的降級意味着開發者要做的工作更少，做起來更有趣！如果想相對快速地建立優美和精緻的體驗而不深入研究密集的低級代碼，同時避免令人頭疼的浏覽器不一緻性，是時候使用 PixiJS 了！PixiJS具有以下核心特征：

高性能：Pixi.js采用 WebGL 技術，可以利用 GPU 加速進行圖形渲染，進而提高繪圖效率和性能，并保持流暢的使用者體驗。
顯示對象：Pixi.js實作了一個顯示對象（DisplayObject）機制，使得開發人員可以友善地建立、組合和管理各種圖形對象，如位圖、文本、容器等。
動畫效果：Pixi.js 提供了多種動畫效果，如緩動、運動路徑、骨骼動畫等，可以幫助開發人員建立更加生動和逼真的圖形和動畫。
事件處理：Pixi.js 支援各種滑鼠和觸摸事件處理，如單擊、輕按兩下、拖動、縮放等。開發人員可以根據實際需求自定義事件處理函數，并添加到圖形對象上。
多平台支援：Pixi.js 可以在所有現代浏覽器上運作，包括桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等，是以可以滿足不同平台和裝置的需求。

下面是使用 PixiJS 的簡單示例：

import { Application, Sprite, Assets } from 'pixi.js';
// 如果可能，應用程式将使用 WebGL 建立渲染器，
// 回退到畫布渲染， 它還将設定ticker
// 和根階段 PIXI.Container
const app = new Application();
// 應用程式将為您建立一個Canvas元素
// 然後可以插入到 DOM 中
document.body.appendChild(app.view);
// 加載紋理
const texture = await Assets.load('bunny.png');
//從bunny.png圖像建立紋理
const bunny = new Sprite(texture);
// 設定位置
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;
// 圍繞中心旋轉
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
//添加到正在建構的場景中
app.stage.addChild(bunny);
// 監聽幀的更新
app.ticker.add(() => {
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;
});

目前 PixiJS 已經在 Github 開源，有超過 39.9k 的 star、4.7k 的 fork、超過 0.7k 的項目依賴量，代碼貢獻者 0.5k+，是一個非常優秀的前端開源項目。

CesiumJS

CesiumJS 是一個 JavaScript 庫，用于在 Web 浏覽器中建立 3D 地球儀和 2D 地圖，無需插件。它使用 WebGL 進行硬體加速圖形，是跨平台、跨浏覽器的，并且針對動态資料可視化進行了調整。

CesiumJS 建立在開放格式之上，旨在為海量資料集提供強大的互操作性和擴充性。CesiumJS具有以下核心特性：

多種地圖資料支援：CesiumJS支援多種資料格式，例如：GeoJSON、KML、CSV等，可以內建各種地圖資料源，滿足不同應用需求。
渲染和虛拟相機：CesiumJS使用 WebGL 技術進行渲染，提供了靈活的視角和互動控制，可以實作逼真的3D環境和自由漫遊。
功能豐富的API：CesiumJS提供了豐富的API和子產品，例如：3D模型加載、地形渲染、時間軸、深層檢測等，友善開發者快速建構複雜的3D地球和地圖應用程式。

CesiumJS的使用也非常簡單，首先需要使用NPM進行安裝:

npm install cesium --save

然後可以在應用程式代碼中導入 CesiumJS。通過大多數建構工具導入單個子產品以從 tree shaking 優化中受益：

import { Viewer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
const viewer = new Viewer("cesiumContainer");

除了 cesium 包之外，CesiumJS 還作為特定 scope 的 npm 包分發，以便更好地進行依賴管理：

@cesium/engine - CesiumJS 的核心、渲染和資料 API
@cesium/widgets - 與 CesiumJS 一起使用的小部件庫

目前 CesiumJS 已經在 Github 開源，有超過 10.4k 的 star、3.2k 的 fork、超過 4.4k 的項目依賴量，代碼貢獻者 0.4k+，是一個非常優秀的前端開源項目。

regl

regl 通過删除盡可能多的共享狀态來簡化 WebGL 程式設計。為此，它用兩個基本抽象，即資源（resource）和指令（command）替換了 WebGL API：

resource是 GPU 駐留對象的句柄，例如：紋理、FBO 或緩沖區。
command是執行某些繪制調用所需的 WebGL 狀态的完整表示。

要定義指令，開發者需要為對象指定靜态和動态資料的混合。完成後，regl 将擷取此描述，然後将其編譯為優化的 JavaScript 代碼。例如，下面是通過一個簡單的 regl 程式來繪制一個三角形：

// 調用不帶參數的 regl 子產品建立一個全屏畫布和
// WebGL上下文，然後使用這個上下文來初始化一個新的REGL執行個體
const regl = require('regl')()
// 調用 regl() 建立一個新的部分執行的繪制指令
const drawTriangle = regl({
// regl 中的着色器隻是字元串。 您可以使用 glslify 或任何您想要的
 // 定義它們。 無需手動建立着色器對象。
  frag: `
    precision mediump float;
    uniform vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

  vert: `
    precision mediump float;
    attribute vec2 position;
    void main() {
      gl_Position = vec4(position, 0, 1);
    }`,
  // 為上面的着色器定義頂點屬性
  attributes: {
    // regl.buffer 建立一個新的數組緩沖區對象
    position: regl.buffer([
      [-2, -2],   // no need to flatten nested arrays, regl automatically
      [4, -2],    // unrolls them into a typedarray (default Float32)
      [4,  4]
    ])
    // regl 自動推斷頂點屬性指針的合理預設值
  },

  uniforms: {
    //這将三角形的顔色定義為動态變量
    color: regl.prop('color')
  },
  // This tells regl the number of vertices to draw in this command
  count: 3
})
// regl.frame() 包裝 requestAnimationFrame 并處理視口更改
regl.frame(({time}) => {
  // clear contents of the drawing buffer
  regl.clear({
    color: [0, 0, 0, 0],
    depth: 1
  })
  //使用上面定義的指令繪制三角形
  drawTriangle({
    color: [
      Math.cos(time * 0.001),
      Math.sin(time * 0.0008),
      Math.cos(time * 0.003),
      1
    ]
  })
})

regl有以下核心特性：

底層API：regl提供了底層的 WebGL API，使得開發者可以使用 OpenGL ES 2.0的所有功能。同時，regl 還簡化了API，使得開發者可以快速建構3D場景和動畫。
響應式程式設計：regl 通過響應式程式設計來處理渲染批次提高了性能，并減少了代碼量。這種程式設計方式能夠自動優化多個指令的執行順序，并打包進而避免了不必要的性能損失。
函數式程式設計：regl 采用函數式程式設計範式，将 WebGL 的狀态機轉化為純函數調用，使代碼更加易于了解和維護，同時也更容易控制着色器管道、緩存區和紋理等WebGL資源
支援多種平台：regl 可跨平台運作，支援現代浏覽器，并且可以在Node.js環境下使用，進而實作代碼複用，更快地建構和疊代應用程式。

目前 regl 已經在 Github 開源，有超過 4.9k 的 star、0.4k 的 fork、超過 15.1k 的項目依賴量，代碼貢獻者 54，是一個優秀的前端開源項目。

Fabric.js

Fabric.js 是一個流行的 Canvas 庫，可以幫助開發人員建立各種複雜的圖形和互動式應用程式。它提供了許多有用的功能和特性，如對象操縱、事件處理、過濾器等。

Fabric.js的核心特性包括：

對象操縱：Fabric.js 提供了一組易于使用的API和工具，使得開發人員可以輕松建立、移動、縮放、旋轉和删除各種圖形對象，如線條、文本、圖檔等。
事件處理：Fabric.js支援各種滑鼠和鍵盤事件，如單擊、輕按兩下、拖動、縮放等，同時允許自定義事件處理函數。
過濾器效果：Fabric.js支援多種過濾器效果，如：模糊、灰階、反色、陰影等，進而建立更加豐富的圖形和動畫效果。
SVG導入和導出：Fabric.js支援 SVG 和 Canvas 對象互導，友善開發人員進行跨平台資料共享和互動。
多平台支援：Fabric.js可以在所有主流浏覽器上運作，包括：桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等等。

下面在HTML中直接使用Fabric.js的示例，當然Fabric.js也支援React.js、Node.js中使用：

<canvas id="canvas" width="300" height="300"></canvas>

<script src="https://cdn.jsdelivr.net/npm/fabric"></script>
<script>
  const canvas = new fabric.Canvas('canvas');
  const rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 60,
    height: 70,
    fill: 'red',
  });
  canvas.add(rect);
</script>

目前 Fabric.js 已經在 Github 開源，有超過 24.8k 的 star、3.3k 的 fork、超過 9.1k 的項目依賴量，代碼貢獻者 0.3k，是一個優秀的前端開源項目。

Rough.js

Rough.js 是一個小型 (<9 kB) 圖形庫，可讓開發者以類似手繪的草圖風格進行繪制。該庫定義了繪制直線、曲線、圓弧、多邊形、圓和橢圓的基元，它還支援繪制 SVG 路徑。

Rough.js 适用于 Canvas 和 SVG。Rough.js的核心特征包括：

手繪效果：Rough.js提供多個手繪效果的線條、形狀和文本，如：草圖、彩色筆畫、顔色填充等。
易于使用：Rough.js采用簡潔的API和工具，非常容易上手，開發人員隻需引入JS 檔案并調用函數。
自定義設定：Rough.js支援自定義設定，包括線條粗細、顔色、形狀類型、字型等，進而進行個性化設定。
輕量級：Rough.js是一個輕量級庫，代碼量很小，壓縮包<9kB，非常适合輕量級應用
跨平台相容性：Rough.js可以在所有主流浏覽器上運作，包括桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等，是以具有很好的跨平台相容性。

使用Rough.js也非常簡單，調用 rough.canvas上的相關方法即可。

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); 
//調用rc.rectangle：設定矩形 x, y, width, height
const rc = rough.svg(svg);
let node = rc.rectangle(10, 10, 200, 200); 
//調用 rough.svg: x, y, width, height
svg.appendChild(node);

目前 Rough.js 已經在 Github 開源，有超過 18.2k 的 star、0.6k 的 fork、超過 2k 的項目依賴量，代碼貢獻者 11，是一個優秀的前端開源項目。

Spritejs

Spritejs 是一個跨平台的高性能圖形系統，可以在web、node、桌面應用和小程式上渲染圖形。SpritejsNext 是 spritejs 的新版本。它與渲染器無關，使相同的 api 可以在多個上下文中渲染：webgl2、webgl 和 canvas2d。

Spritejs 像處理 DOM 元素一樣在畫布中操縱精靈，典型特征如下：

高性能：SpriteJS采用了一系列優化技術，如：GPU加速、Web Worker、Canvas緩存等，可以提高繪圖效率和性能，并保持流暢的使用者體驗。
動畫效果：SpriteJS提供了多種動畫效果，如：緩動、運動路徑、骨骼動畫等，可以建立更加生動和逼真的圖形和動畫。
事件處理：SpriteJS支援滑鼠和觸摸事件處理，如單擊、輕按兩下、拖動、縮放等，還可以根據需求自定義事件處理函數，并添加到圖形對象上。
多平台支援：SpriteJS可以在所有現代浏覽器上運作，包括：桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等。
精靈表：SpriteJS支援精靈表功能，可以将多個圖檔合并為一個，減少網絡請求和資源占用，提高加載效率。
其他特性：像操作 DOM 元素一樣操作 sprites 元素、支援多層、DOM 事件、支援OffscreenCanvas 和 Web Worker、使用 d3、支援伺服器端渲染、支援 Vue等其他特征。

使用 Spritejs 也是非常簡單，通過在HTML中引入相關位址，然後直接通過DOM程式設計。

<script src="https://unpkg.com/spritejs@3/dist/spritejs.min.js"></script>
<div id="container" style="width:400px;height:400px"></div>
<script>
    const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'
    const {Scene, Sprite} = spritejs;
    const container = document.getElementById('container');
    const paper = new Scene({
      container,
      width: 400,
      height: 400,
    })

    const sprite = new Sprite(imgUrl)
    sprite.attr({
      bgcolor: '#fff',
      pos: [0, 0],
      size: [400, 400],
      borderRadius: '200'
    })

    paper.layer().appendChild(sprite)
</script>

目前 Spritejs 已經在 Github 開源，有超過 5.2k 的 star、0.3k 的 fork、超過 1k 的項目依賴量，代碼貢獻者 20，是一個優秀的前端開源項目。

EaselJS

EaselJS 是一個用于在 HTML5 中建構高性能互動式 2D 内容的庫。它提供了一個功能豐富的顯示清單，允許開發者操作和動畫化圖形。它還為滑鼠和觸摸互動提供了一個強大的互動模型。

EaselJS 非常适合建構遊戲、生成藝術、廣告、資料可視化和其他高度圖形化的體驗。EaselJS 可以單獨使用，也可以與 CreateJS 套件的其餘部分一起使用，如：SoundJS、PreloadJS 和 TweenJS。

EaselJS 沒有外部依賴性，支援與開發者喜歡使用的幾乎任何架構相容。EaselJS的典型特征包括：

顯示清單：EaselJS實作了一個顯示清單（Display List）機制，使得開發人員可以友善地建立、組合和管理各種圖形對象，如：位圖、文本、容器等。
位圖緩存：EaselJS 支援将圖形對象進行位圖緩存進而大幅提高繪圖效率和性能。
濾鏡：EaselJS支援多種濾鏡效果，如：模糊、灰階、顔色調整等，可以幫助開發人員建立更加豐富的圖形和動畫效果。
滑鼠和觸摸事件：EaselJS 支援滑鼠和觸摸事件處理，如單擊、輕按兩下、拖動、縮放等。開發人員還可根據實際需求自定義事件處理函數，并添加到圖形對象上。
多平台支援：EaselJS 可以在所有現代浏覽器上運作，包括桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等，是以可以滿足不同平台和裝置的需求

使用 EaselJS 也是非常友善，下面是一個精靈圖動畫的示例代碼：

//<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
// 首先引入相應CDN資源，然後可以直接使用
var ss = new createjs.SpriteSheet({
	frames: {
		width: 32,
		height: 64,
		numFrames: 19
	},
	animations: {run: [0, 25], jump: [26, 63, "run"]},
	images: ["./assets/runningGrant.png"]
});
var sprite = new createjs.Sprite(ss, "run");
sprite.scaleY = sprite.scaleX = 0.4;
stage.addChild(sprite);
sprite.on("click", function() { sprite.gotoAndPlay("jump"); });
createjs.Ticker.on("tick", stage);

目前 EaselJS 已經在 Github 開源，有超過 8k 的 star、2k 的 fork、超過 1k 的項目依賴量，代碼貢獻者 50+，是一個優秀的前端開源項目。

Konva

Konva 是一個 HTML5 Canvas JavaScript 架構，支援高性能動畫、過渡、節點嵌套、分層、過濾、緩存、桌面和移動應用程式的事件處理等。

開發者可以将事物繪制到舞台上，向它們添加事件偵聽器，移動它們，縮放它們，并獨立于其他形狀旋轉它們以支援高性能動畫，即使應用程式使用數千個形狀也是如此。

Konva的典型特性包括：

對象操縱：Konva提供了一組易于使用的API和工具，使得開發人員可以輕松建立、移動、縮放、旋轉和删除各種圖形對象，如線條、文本、圖檔等。
事件處理：Konva支援各種滑鼠和觸摸事件，如單擊、輕按兩下、拖動、縮放等，同時允許開發人員自定義。
多圖層管理：Konva支援多個圖層之間的管理、切換、透明度設定，友善開發人員對圖像進行分組和控制。
動畫效果：Konva提供了豐富的動畫效果，如：緩動、淡入淡出、旋轉等，進而建立更加流暢和生動的圖形和動畫。
多平台支援：Konva 可以在所有現代浏覽器上運作，包括桌面浏覽器、移動裝置浏覽器和平闆電腦浏覽器等，進而很好的滿足跨平台需求。

Konva 的使用也是非常簡單，首先引入相關的CDN資源，然後直接在HTML中程式設計：

<script src="https://unpkg.com/konva@8/konva.min.js"></script>
<div id="container"></div>
<script>
  var stage = new Konva.Stage({
    container: 'container',
    width: window.innerWidth,
    height: window.innerHeight,
  });
  // 添加Canvas元素
  var layer = new Konva.Layer();
  stage.add(layer);
  // 建立圖形
  var box = new Konva.Rect({
    x: 50,
    y: 50,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
  });
  layer.add(box);
  // 添加滑鼠樣式
  box.on('mouseover', function () {
    document.body.style.cursor = 'pointer';
  });
  box.on('mouseout', function () {
    document.body.style.cursor = 'default';
  });
</script>

目前 Konva 已經在 Github 開源，有超過 9.3k的 star、0.8k 的 fork、超過 29.7k 的項目依賴量，代碼貢獻者 165+，是一個優秀的前端開源項目。

本文總結

本文主要介紹了 2/3D 渲染最頂級10大熱門開源庫，包括：Babylon.js、Three.js、PixiJS、CesiumJS、regl、Fabric.js、Rough.js、EaselJS、Konva等等。通過對這些庫的簡單介紹，後續大家有類似 2/3D 渲染的述求可以直接拿來即用。當然文章篇幅有限，不能對某一個庫深入展開（後續會出一個文章系列聊聊每一個庫的詳細用法、特征等等，大家保持關注），大家可以自行參考文末的資料繼續學習。

因為篇幅有限，文章并沒有過多展開，如果有興趣，可以在我的首頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點贊、評論、轉發、收藏！

參考資料

https://www.toutiao.com/article/7232215704618336825/

https://github.com/pixijs/pixijs

https://pixijs.com/

https://github.com/CesiumGS/cesium

https://cesium.com/platform/cesiumjs/

https://github.com/regl-project/regl

https://github.com/fabricjs/fabric.js

https://github.com/rough-stuff/rough

https://github.com/spritejs/spritejs

https://createjs.com/

https://github.com/CreateJS/EaselJS

https://github.com/konvajs/konva

https://konvajs.org/

https://doc.babylonjs.com/journey/forum

萬字長文聊聊2/3D渲染最頂級10大熱門開源庫！

前言

Babylon.js

Three.js

PixiJS

CesiumJS

regl

Fabric.js

Rough.js

Spritejs

EaselJS

Konva

本文總結

參考資料

繼續閱讀

萬字長文說清大模型在自動駕駛領域的應用

萬字長文：LLM應用建構全解析

「後端」萬字長文助你上手軟體領域驅動設計 DDD

萬字長文講透 RocketMQ 4.X 消費邏輯

「萬字長文系列」帶你理清圖資料庫 & 圖計算

軟體工程：萬字長文，說透常見的5種部署政策

萬字長文詳解微服務網關（上）

萬字長文詳解微服務網關（中）

萬字長文詳解微服務網關（下）

萬字長文詳解YOLOv8網絡結構+代碼+實操

雲孚快寫：自動生成多級目錄，一鍵生成萬字長文

萬字長文：抖音達人直播分銷業務的底層邏輯和實操玩法！

萬字長文：淺談“産品思維”于工作、于生活

兩萬字長文詳解：如何用C++從零實作神經網絡

3分鐘剖析萬字長文（向量資料庫-總結版）