自動再生
自動コンプリート
前のレクチャーへ
完了して次のレクチャーへ
Web制作者のための３Dグラフィクス入門
はじめに
コース紹介 (3:12)
サンプルコードのダウンロード
受講方法について
Three.jsの基礎
このセクションで学ぶこと (0:52)
WebGLとThree.js (3:35)
Three.jsの使い方の流れ (3:00)
コースの進め方 (7:28)
Three.jsチュートリアルを動かそう (10:05)
ジオメトリの種類 (5:16)
マテリアルの使い方 (4:58)
色情報の操作 (4:48)
画像の読み込み (5:39)
テクスチャの切り替え (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:30)
クリップ座標について復習しよう (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)
円の中に画像を表示してみよう (9:53)
色情報を入れ替え (11:24)
カラーシフトとテクスチャラッピング (10:35)
画像の繰り返し表示 (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:39)
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:33)
平面から球体への状態遷移を記述しよう (14:47)
平面から球体への状態遷移を記述しよう２ (7:35)
フロアから球体への状態遷移を記述してみよう (17:01)
画像が粒になって消えていくアニメーションの作成 (11:50)
粒子となって遷移する画像 (14:17)
粒子となって遷移する画像２ (18:24)
さいごに
お疲れ様です - 今後の学習tips (5:20)
コース紹介
完了して次のレクチャーへ