自動再生
自動コンプリート
前のレクチャーへ
完了して次のレクチャーへ
WebGLを使ったハイエンドWEB制作コース（基礎編）
はじめに
基礎編へようこそ！
サンプルコードのダウンロード
Three.jsの基礎
このセクションで学ぶこと (0:52)
WebGLとThree.js (3:36)
Three.jsの使い方の流れ (3:01)
コースの進め方 (7:28)
Three.jsチュートリアルを動かそう (10:05)
ジオメトリの種類 (5:16)
マテリアルの使い方 (4:58)
色情報の操作 (4:49)
画像の読み込み (5:40)
テクスチャの切り替え (1:28)
OrbitControlsを使った視点の操作 (5:19)
回転、平行移動、スケール (10:14)
複数メッシュを配置 (10:10)
ランダムにメッシュを配置１ (9:46)
ランダムにメッシュを配置2 (7:14)
ライトの使い方 (16:17)
ライトで影を落とす方法 (5:39)
ランダムにメッシュを配置３ (6:02)
ランダムにメッシュを配置４ (12:08)
【チャレンジ】立方体の壁 (16:08)
dat-gui（lil-gui）の使い方 (8:00)
パフォーマンスの測定方法 (3:29)
セクション修了おめでとうございます！
WebGLの基礎
このセクションで学ぶこと (1:43)
ひとまずシェーダ言語を書いてみよう (7:54)
WebGLとリアルタイムレンダリング (9:26)
シェーダ言語とは？ (5:19)
頂点シェーダとattributeとは？ (17:00)
フラグメントシェーダについて学ぼう (6:30)
Three.jsのコードで確認しよう！ (8:57)
生WebGLコードを見てみよう！ (8:46)
クリップ座標で三角形の形を変更してみよう (6:31)
クリップ座標について復習しよう (2:06)
【超重要】varyingと線形補間！ (18:25)
varyingで色情報を渡してみよう (9:02)
uniformとは？ (2:37)
uniformで色を変更してみよう (5:53)
時間経過によってuniformの値を変更しよう (7:02)
シェーダへのデータの受け渡し方法まとめ (3:08)
シェーダプログラムを別ファイルに分離しよう (3:56)
GLSLの基礎_ベクトル計算 (8:39)
GLSLでのベクトル操作 (6:46)
GLSLでの定数定義 (5:06)
線形補間を可視化してみよう (8:01)
【復習】線形補間を可視化してみよう (9:51)
円の描写と座標の正規化 (14:02)
【復習】円の描写と座標の正規化 (5:58)
色が移ろう円の描写 (3:20)
タイル型の模様の描写 (4:09)
二つの色を掛け合わせ (6:59)
その他関数の紹介 (4:29)
セクション修了おめでとうございます！
ShaderMaterialとシェーダー
このセクションで学ぶこと (0:35)
ShaderMaterialでGLSLを実装してみよう (9:30)
どのようにして三角形の頂点は決定されるの？ (6:11)
ShaderMaterialでテクスチャを設定 (10:06)
UV座標とテクスチャの色情報 (7:10)
円の中に画像を表示してみよう (9:53)
色情報を入れ替え (11:25)
カラーシフトとテクスチャラッピング (10:36)
画像の繰り返し表示 (6:50)
HSLカラーとGLSLIFY (12:30)
ノイズの使い方を見てみよう (8:45)
ノイズで気持ち悪い画像を表示してみよう (5:55)
フェードするスライドの作成 (6:13)
GSAPの基本的な使い方について学ぼう (14:17)
ノイズを使ったスライドを作成しよう１ (6:54)
ノイズを使ったスライドを作成しよう２ (9:22)
画像を用いて歪みを作成 (12:42)
セクション修了おめでとうございます！
３Dグラフィクスの世界へ
このセクションで学ぶこと (1:06)
WebGLと座標系 (12:40)
Three.js Editorで座標系を確認してみよう (6:49)
Three.jsカメラの使い方 (8:23)
スティッキーな画像メッシュを作成してみよう１ (16:17)
Three.jsのコードを覗いてみよう (6:45)
スティッキーな画像メッシュを作成してみよう２ (13:21)
EasingFunctionでアニメーションに緩急をつけよう (7:50)
スティッキーな画像メッシュを作成してみよう3 (21:19)
スティッキーな画像メッシュを作成してみよう４（UVを使った遅延） (6:09)
ツイストする画像メッシュを作成しよう (13:07)
カラフルな球を作成してみよう (9:25)
カラフルな球を作成してみよう２ (10:05)
カラフルな球を作成してみよう３ (9:34)
平面から球体への状態遷移を記述しよう (14:47)
平面から球体への状態遷移を記述しよう２ (7:35)
フロアから球体への状態遷移を記述してみよう (17:02)
画像が粒になって消えていくアニメーションの作成 (11:50)
粒子となって遷移する画像 (14:17)
粒子となって遷移する画像２ (18:24)
セクション修了おめでとうございます！
【付録】 ポストプロセスとレンダーターゲット
本セクションで作成する成果物 (0:23)
レンダーターゲットとは？ (1:25)
レンダーターゲットを実装してみよう (13:56)
ShaderMaterialを適用してみよう (6:47)
ポストプロセス（Post Processing）とは？ (2:07)
グリッチエフェクトを実装してみよう (10:25)
シェーダーパスを使ってみよう (6:37)
独自のシェーダーをパスとして実装してみよう (7:58)
波紋（Ripple）エフェクトを作成しよう (0:21)
マウスの位置を取得しよう (9:03)
波紋エフェクトの実装（Part.1） (7:22)
波紋エフェクトの実装（Part.2） (17:25)
波紋エフェクトをレンダーターゲットに描写しよう (14:42)
波紋エフェクトを完成させよう (17:03)
セクション修了おめでとうございます！
さいごに
基礎編、お疲れ様でした！ (0:47)
基礎編のアンケートのお願い
波紋エフェクトの実装（Part.2）
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock