files/zh-tw/web/api/webgl_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

---
title: WebGL tutorial
slug: Web/API/WebGL_API/Tutorial
tags:
  - TopicStub
  - Tutorial
  - WebGL
translation_of: Web/API/WebGL_API/Tutorial
---
<div>{{WebGLSidebar}}</div>

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

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

<h2 id="開始之前">開始之前</h2>

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

<h2 id="教學文件">教學文件</h2>

<dl>
 <dt><a href="/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL新手上路</a></dt>
 <dd>如何建置 WebGL 環境</dd>
 <dt><a href="/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">加入2D內容至WebGL環境</a></dt>
 <dd>如何用 WebGL 渲染簡單平面的形狀</dd>
 <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">使用 shaders 在 WebGL 上色</a></dt>
 <dd>示範如何使用 shaders 在圖形上上色</dd>
 <dt><a href="/zh-TW/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">WebGL 產生動畫</a></dt>
 <dd>示範如何旋轉與移動物件以製作簡單的動畫</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">建立三維物件</a></dt>
 <dd>示範如何創造並讓 3D 物件(立方體)有動畫</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">在物件表面貼上材質</a></dt>
 <dd>示範如何在物件的表面上貼上材質圖</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">模擬打光</a></dt>
 <dd>如何在 WebGL 環境模擬打光效果</dd>
 <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">讓材質產生動畫</a></dt>
 <dd>如何移動材質圖，在範例中是將 Ogg 影片 貼到一個旋轉中的立方體</dd>
</dl>