diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
| commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
| tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/zh-tw/web/api/webgl_api/tutorial/index.html | |
| parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
| download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip | |
initial commit
Diffstat (limited to 'files/zh-tw/web/api/webgl_api/tutorial/index.html')
| -rw-r--r-- | files/zh-tw/web/api/webgl_api/tutorial/index.html | 41 |
1 files changed, 41 insertions, 0 deletions
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 +--- +<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><canvas></code> 元件描繪 WebGL 圖像/圖形, 從基礎開始。提供的範例將讓你對於可以用WebGL做到什麼有清楚的概念，並提供程式碼片段讓你可以著手建立自己的內容。</span></p> + +<h2 id="開始之前">開始之前</h2> + +<p>使用<code><canvas></code> 元件不會非常困難，但你需要有對<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> 與 <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a> 的基礎認識。<code><canvas></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> |