files/ja/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
42

---
title: WebGL チュートリアル
slug: Web/API/WebGL_API/Tutorial
tags:
  - Overview
  - Tutorial
  - WebGL
  - WebGL API
translation_of: Web/API/WebGL_API/Tutorial
---
<div>{{WebGLSidebar}}</div>

<div class="summary">
<p><a href="http://www.khronos.org/webgl/">WebGL</a> は互換性があるブラウザで、プラグインを使用することなく HTML {{HTMLElement("canvas")}} 内で 3D グラフィックスをレンダリングするための、<a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 に基づく API を Web コンテンツで使用できるようにします。WebGL のプログラムは JavaScript で記述する制御コードと、コンピュータの Graphics Processing Unit (GPU) で実行する特殊効果コード (シェーダーコード) で構成されます。WebGL 要素は他の HTML 要素と混ぜられ、他のページ部品やページの背景と合成されます。</p>
</div>

<p><span class="seoSummary">このチュートリアルでは WebGL グラフィックスを描画するために <code>&lt;canvas&gt;</code> を使用する方法について、基礎から説明します。ここで提供するサンプルは WebGL で何ができるかの明確な見解をもたらし、また独自のコンテンツを構築し始められるようにするコード部品も提供します。</span></p>

<h2 id="Before_you_start" name="Before_you_start">始める前に</h2>

<p><code>&lt;canvas&gt;</code> 要素を使用することはそれほど難しくありませんが、<a href="/ja/docs/Web/HTML" title="HTML">HTML</a> や <a href="/ja/docs/Web/JavaScript" title="JavaScript">JavaScript</a> の基礎を理解していなければなりません。<code>&lt;canvas&gt;</code> 要素や WebGL は古いブラウザでサポートされていませんが、最近のバージョンではすべての主要なブラウザがサポートしています。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。</p>

<h2 id="In_this_tutorial" name="In_this_tutorial">チュートリアル</h2>

<dl>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">WebGL 入門</a></dt>
 <dd>WebGL コンテキストのセットアップ方法</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">WebGL コンテキストへの平面コンテンツの追加</a></dt>
 <dd>WebGL を使用して単純なフラット図形を描画する方法</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">シェーダーを用いた WebGL での色の指定</a></dt>
 <dd>シェーダーを用いた図形への色の設定方法についてのデモンストレーション</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">WebGL でのオブジェクトのアニメーティング</a></dt>
 <dd>単純なアニメーションの作成の為のオブジェクトの回転と移動の方法について</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">WebGL を用いた 3D オブジェクトの作成</a></dt>
 <dd>3D オブジェクトの作成とアニメーションの方法について (立方体を用いた例)</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">WebGL でのテクスチャの使用</a></dt>
 <dd>オブジェクトの表面にテクスチャをマッピングする方法についてのデモンストレーション</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">WebGL でのライティング</a></dt>
 <dd>WebGL コンテキストにおいて光のエフェクトをシミュレートする方法について。</dd>
 <dt><a href="/ja/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">WebGL でのテクスチャのアニメーティング</a></dt>
 <dd>テクスチャをアニメーションさせる方法について。ここでは、回転する立方体の表面に Ogg ビデオをマッピングする手法を紹介します。</dd>
</dl>