技術文章 » 打造原生 WebGL 2D 引擎：一場創意與技術的融合

打造原生 WebGL 2D 引擎：一場創意與技術的融合

2023-07-24 06:00:47

打造原生 WebGL 2D 引擎：一場創意與技術的融合

1.引言

在當今數位化時代，網頁的功能越來越豐富，已經遠遠超越了傳統的文字和圖片呈現。我們生活在一個充滿互動性和視覺魅力的網路世界。每天都會遇到許多令人驚歎的網頁效果和動畫。作為一個Web3D圖形的開發，希望可以通過網頁來實現更多強大的功能，以及炫酷的效果。

在設計方面：

要實現真正令人歎為觀止的網頁效果，並不是一件容易的事情。傳統的網頁設計和CSS動畫有著一定的限制。

在功能方面：

受制於瀏覽器的效能。無法在瀏覽器端開發很多很強大的工具。

正當我苦苦尋求突破時，WebGL技術閃現在我的視野中。作為一種強大的Web圖形庫，它能夠在瀏覽器中實現硬體加速的圖形渲染，為我提供了無限的創意空間。我決定用自己的雙手打造一個基於原生 WebGL 的2D引擎，旨在讓我能夠輕鬆處理影象和創作出令人眼前一亮的網頁效果。

或許有人問，我是一個web3D開發，為啥要開發一個2D的工具：

首先：web端3D已經有很強大成熟的庫了，比如Three.js,Babylon.js,PlayCanvas等,當然優秀的2D庫也很多比如：PixiJS等，但是相對於很多3D開發者來講，大部分人學的還是threejs居多，如果在學習2D庫無非會增加很多的學習成本，這裡我開發的2D渲染引擎，參照了threejs ShaderMaterial的用法，精簡了很多的功能，基於原生webGL，降低了一些開發的學習成本，提升了做2D Web處理的速度。

2.WebGL簡介

參照初識web3D--webGL/webGPU

3.設計和架構

  1. 模組化設計
    在開發我的基於原生 WebGL 的2D引擎時，我注重了整體的模組化設計。通過將引擎功能拆分為各個獨立的模組，我使得每個模組都可以單獨處理特定任務，而不會對其他部分產生影響。這種設計使得我的引擎更易於擴充套件和維護。

  2. 基於 ShaderMaterial 的使用
    在設計引擎的渲染部分時，我參考了Three.js中ShaderMaterial的用法。ShaderMaterial允許開發者通過GLSL著色器語言自定義材質的渲染效果，為圖形和動畫帶來更多的創意和自由度。通過借鑑這一思想，我為我的引擎提供了類似的ShaderMaterial介面，使得使用者可以輕鬆地自定義渲染效果，而無需深入瞭解底層WebGL的複雜細節。這樣做的優點在於可以降低使用者使用引擎的學習成本，同時又不犧牲靈活性和效能。

  3. 渲染管線優化
    在引擎的設計過程中，我重點優化了渲染管線。通過合併和批次處理渲染呼叫，減少了WebGL上下文切換和資源上傳的次數，從而提高了渲染效能。同時，我還實現了簡單的渲染批次處理機制，以降低繪製呼叫的開銷。這些優化措施讓我的引擎在處理大量2D圖形時依然保持流暢。

  4. 跨瀏覽器支援
    我在引擎的設計中注重了跨瀏覽器支援。儘管WebGL技術在現代瀏覽器中得到廣泛支援，但不同瀏覽器對WebGL的實現仍然存在一些差異。為了確保引擎的相容性，我進行了充分的測試，並針對不同瀏覽器做了必要的適配。

  5. API簡潔易用
    在設計引擎的API時，我力求簡潔易用。我為引擎的核心功能提供了直觀的介面，使得使用者可以迅速上手並快速實現自己的創意。同時，我也提供了詳細的檔案和範例程式碼，幫助使用者更好地瞭解和使用引擎。

  6. 擴充套件性與靈活性
    在整體設計中，我注重了引擎的擴充套件性與靈活性。通過良好的模組化設計，使用者可以自定義和新增新的功能模組，滿足不同專案的需求。同時，使用者還可以根據自己的喜好和風格客製化引擎的外觀和互動效果。

通過以上的設計和架構，我的基於原生 WebGL 的2D引擎成為了一個功能強大、易於上手的工具，為使用者提供了創作炫酷網頁效果和處理影象的絕佳體驗。

4.關於我的WebGL2D引擎

名稱:TwinSpace2D
使用方法：
npm i twinspace2d
通過npm直接引入到web專案中
相關程式碼展示

const geometry = new Geometry();

const width = 2048;
const height = 1024;

geometry.setAttribute(
  "position",
  new Float32Array([0,0,width,0,width,height,width,height,0,height,0,0]),
  2
);

const material = new ShaderMaterial({
  uniforms: {
    u_resolution: {
      value: new TSVector2(T2D.canvas.clientWidth, T2D.canvas.clientHeight),
    },
    map: {
      value: null,
    },
    mouseMove: {
      value: new TSVector2(0, 0),
    },
  },
  fragmentShader: movePointerFrag,
  vertexShader: movePointerVert,
});

new TextureLoader().load("/public/demo1.png", (texture) => {
  material.uniforms.map.value = texture;
});

const mesh = new Mesh(geometry, material);

有沒有看著覺得很耳熟。沒錯，為了方便開發，我把寫法改成了threejs的寫法，但是沒有用three的程式碼，基於原生webgl自己獨立封裝；
為什麼沒做三維，三維要寫很多矩陣變換啥的，說實話，本人比較懶，這種事，就交給大佬們吧。

5.案例展示

目前就簡單展示一個，後續會出更多相關案例

這是一個用TwinSpace2D傳入了一張圖，然後傳入了滑鼠的座標，然後實現的一個簡單的效果。
後續會推出更多相關案例和demo。敬請期待

6.未來展望

當初寫這個2D引擎的目的是想用threejs實現2D的效果，然後發現會有很多無用的佔用，需要寫一堆東西，感覺每次這麼處理會比較麻煩，學習新的webgl2D庫，學習成本太高，於是打算自己基於webgl寫一個簡單的純粹的2D處理工具庫。
希望未來有更多的人，可以通過這個工具庫讓網頁的效果內容更加豐富，效果更加酷炫，能真正意義上幫助各位開發提升開發效率，實現更加炫酷強大的功能。
後續會出一些圖片處理的demo以及一些炫酷的網頁效果。完善2D工具庫的功能。等功能稍微完善了，就正式開源。希望能幫助到各位學習web圖形技術。

7.為什麼不直接上WebGPU

雖然谷歌已經在Chrome113後續的版本都支援了WebGPU，標準也定下來了，但是目前行動端還沒完全適配，以及一些老使用者的PC也沒有更新升級，等後續相關裝置都支援了，就考慮出一個WebGPU版本的。