From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/zh-tw/web/api/webgl_api/tutorial/index.html | 41 +++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 files/zh-tw/web/api/webgl_api/tutorial/index.html (limited to 'files/zh-tw/web/api/webgl_api/tutorial/index.html') diff --git a/files/zh-tw/web/api/webgl_api/tutorial/index.html b/files/zh-tw/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..549c3f40ba --- /dev/null +++ b/files/zh-tw/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,41 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - TopicStub + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL 讓網頁內容可以使用一個基於 OpenGL ES 2.0 的API以在HTML {{HTMLElement("canvas")}}中執行3D渲染，且瀏覽器無需使用任何plug-in。WebGL programs 由JavaScript撰寫的指令碼以及透過電腦的Graphics Processing Unit (GPU)上運行的特殊效果程式碼(shader code)組成。WebGL元件可與其他HTML元件混合，並與該頁的其他部分或該頁背景組合使用。 

+
+ +

本教學描述如何使用 <canvas> 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用WebGL做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。

+ +

開始之前

+ +

使用<canvas> 元件不會非常困難，但你需要有對HTML 與 JavaScript 的基礎認識。<canvas> 元件跟WebGL在某些舊瀏覽器中不支援，但近來的每個主流瀏覽器都有支援。我們用 JavaScript context object 在canvas繪製圖形，這樣圖形就能動態(on the fly)產生。

+ +

教學文件

+ +
+
WebGL新手上路
+
如何建置 WebGL 環境
+
加入2D內容至WebGL環境
+
如何用 WebGL 渲染簡單平面的形狀
+
使用 shaders 在 WebGL 上色
+
示範如何使用 shaders 在圖形上上色
+
WebGL 產生動畫
+
示範如何旋轉與移動物件以製作簡單的動畫
+
建立三維物件
+
示範如何創造並讓 3D 物件(立方體)有動畫
+
在物件表面貼上材質
+
示範如何在物件的表面上貼上材質圖
+
模擬打光
+
如何在 WebGL 環境模擬打光效果
+
讓材質產生動畫
+
如何移動材質圖，在範例中是將 Ogg 影片 貼到一個旋轉中的立方體
+
-- cgit v1.2.3-54-g00ecf