在 Web 上建構 3D 遊戲的基礎概念

因為 3D 必須多考量到一個維度,你可能直覺認為開發 3D 遊戲要比 2D 難上許多;但實情遠比你想得簡單。我們最近更新了 MDN 上的遊戲開發文章並蒐集了 3D 遊戲開發說明,另著重於一些較為速成的框架,讓剛入門 Web 遊戲或不甚熟悉 WebGL 的開發者都能迅速上手。

shapes

WebVR 與 3D 遊戲開發

瀏覽器上的虛擬實境 (Virtual reality;VR) 效果在今年有長足發展。而大家視為 WebVR 的相關 JavaScript API 也正在開發中。目前 WebVR 即將進入規格 1.0 版本,亦將是瀏覽器的 VR 技術里程碑。隨著 WebVR API 漸趨成熟,也該從「實驗性」的展示作品,轉換為正式商業遊戲與應用的「量產」階段了。

以 Three.js 為基礎所建構的 A-Frame 框架正在快速進化。現在已有「Cardboard Dungeon 」與「SECVRITY」的有趣 VR 範例可供參考。而本身為 0.2.0 版的 A-Frame 已經引起社群的高度興趣。其簡易又強大的功能,將透過標記結構 (markup) 建構出跨平台與裝置的 VR 體驗,更將促使許多展示、線上教學、外掛元件均不斷推陳出新。

VR_images

以上都是最新的 VR 體驗。但如果你覺得自己還是比較喜愛 2D 遊戲,要你突然跳進三度空間可能有點困難。所以先一起來看看 3D 的基本概念,順便了解較受大家青睞的框架將如何協助你更快達到目標,寫出更有特色的遊戲與展示。

Web 的 3D 遊戲,其基本概念就是在 Canvas描繪 WebGL,達到硬體加速的豐富互動式動畫。基礎理論則與「描繪管線 (Rendering pipeline)」有關,可管理作品的相關資訊並於畫面上顯示之。

mdn-games-3d-rendering-pipeline

3D 遊戲開發的框架概述

你可在純粹的 WebGL 環境中做完所有大小事。也可以透過多樣的可用框架讓自己輕鬆點、加快開發、專注於遊戲概念的重要部分。MDN 上的遊戲開發教學則包含:

 

Three.js 是目前最高人氣的 WebGL 動畫工具,而 PlayCanvas 則讓你選用 PlayCanvas 引擎線上編輯器來建構遊戲或展示。Babylon.js 具備簡易的 API 卻強大的功能。A-Frame 框架另可快速建構 3D 世界原型,即時營造出 VR 視覺效果。我們另提供多樣的線上教學,涵蓋如「著色器 (Shader)」等的基本概念。 只要能了解框架背後的原理,將有助於你在進行後續處理時,更能掌握自己的遊戲全貌。

playcanvas-cover

 

如果你正打算開發 WebVR 或 Web 的相關遊戲,敬請到原文文章中進一步參閱框架的簡介,另更有原文作者所提供自己在 GitHub 上的 repository,其中的工具將引導你建構簡單的 3D 場景,並能線上即時預覽。歡迎加入 WebVR 的開發行列!

 

 

原文連結:Basics of building 3D games on the Web

 

 

您可能也會喜歡

目前找不到相關文章

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *