他の開発者と差別化したいですか?
WebGLを学べばJavaScriptやCSSとは全く違う世界に足を踏み入れることができます。
なぜ、本コースを学ぶ必要があるのか?
2017年から始まった「働き方改革実行計画」により、テレワークや副業・兼業などの柔軟な働き方が推奨されるようになりました。
これにより働く場所を問わないWeb制作やWeb開発が仕事として注目されるようになり、Web制作者を目指す人がここ数年で大きく増加しました。
ただ、Web制作者が増えるということはその分競走も激しくなるため、ちゃんとしたサイトを制作できるようになったにも関わらず、なかなか仕事をとれなかったり、満足な報酬が得られない人が多いのも事実です。
そこで本コースでは他のWeb制作者と圧倒的な差別化を行うことができるWebGLという技術について学びます。
WebGLとはWeb Graphics Libraryの略称で、ブラウザ上で3Dグラフィクスを描写するための仕様、及びAPIのことを指します。
このWebGLという技術を用いることでCSSやJavaScriptでは決して実現できない多彩な画面描写を実装することが可能となります。また、本コースで併せて紹介するThree.jsを組み合わせることで、より簡単に3Dグラフィクスを実装することができます。
本コースではThree.jsとWebGLを用いて、様々な3Dグラフィクスの実装をしながら、その基礎について学びます。
WebGLの現状
現状、WebGLを扱える開発者はJavaScriptやCSSの開発者の数に比べて圧倒的に少ない状態です。
その理由としては、
「そもそもWebGLを扱える技術者が少ないため、JavaScriptやCSSと比べると情報量が圧倒的に少ない。」
「前提知識がない状態だとチュートリアルを動かすレベルも困難である。」
「GPUで動くプログラムのため、CPUで動くJavaScriptなどと概念が異なり、独学が難しい。」
点があげられます。
私自身、2年前位にWebGLに出会い、最初の方はWebGLの独特の概念が理解できず、率直に言って難しいと感じました。
ただ、WebGLの基礎がわかると、途端にいろんなものを作れるようになり、開発がとても楽しくなったことを覚えています。
恐らく本コースでWebGLに初めて触れる多くの受講者の方が最初は難しいと感じるはずです。しかし、裏を返せば、自分が難しいと感じるものは他の人にも難しいものになります。
そのため、やる気のある方にとってみれば、WebGLの領域は他のWeb制作者と差別化するには最適な領域となることでしょう。
WebGLが使えることの強み
WebGLが使えるようになると、そもそもサイトの見せ方がCSSの自由度の比ではないため、唯一無二のサイトを作成することができます。
これは、副業やフリーランスで仕事を取る際に大きなメリットとなります。
というのも、Web制作などの仕事を依頼する人の多くはWeb開発に精通しているわけではないため、いくらJavaScriptやCSSに長けているとアピールしてもなかなか伝わりません。
また、実際問題、難易度の高い案件でない限り、仕事を依頼する側としては安い方にお願いしてしまいます。そのため、Web制作では他の開発者と如何に差別化するかが重要になってきます。
その点、WebGLを使うと画面の見え方がダイレクトに変わってくるため、他の開発者との違いを目に見えて示すことができます。
また、先で述べた通り、WebGLを扱える開発者自体がまだまだ少ないため、なかなか替えが効かない存在になることができます。
もし、あなたがWeb制作の領域で個人で仕事を取ってみたいと考えているのであれば、是非一度本コースを見てみてください。
これまでのJavaScriptやCSSとは全く違う領域に足を踏み入れることができます。
このコースはこんな人に向いています
- 他の開発者と差別化できる技術を身に着けたい。
- 3Dグラフィクスについて基礎から学んでみたい。
- Web制作で仕事をとれるようになりたい。
- Web制作の受注単価を上げたい。
- JavaScriptやCSSでは表現できない実装方法を学んでみたい。
また、WebGLはOpenGL ESやOpenGLというスマホやPC上で動作する3Dグラフィクスの仕様を元に作られています。仕様自体はほぼ同じのため、WebGLを学ぶとその元であるOpenGLについてもわかるようになってきます。現在話題のメタバース・AR/VRなどもOpenGLに関係した領域になってきますので、一度触れておいて損はないかと思います。
※本コースではWeb制作の用途にフォーカスして進めていきますので、その点はご了承ください。
コース受講のための前提知識
- HTML、CSS、JavaScriptの基礎を習得していること。
- JavaScriptでコードを記述できること。
※JavaScriptの挙動に自信がない方は先にUdemyで公開している「JavaScriptメカニズム」のコースを受講することをお勧めします。
※以下のリンクで自動的にクーポンコードが適用されます。
コース内容
- WebGLの仕組みと基礎について詳しく学びます。
- WebGLで登場するシェーダーを記述するためのプログラミング言語(GLSL)の書き方を学びます。
- シェーダーの動作原理について学びます。
- シェーダーのエラーの見方、どのようにしてコードを確認するのかについて学びます。
- WebGLのライブラリであるThree.jsの仕組みから詳しく学びます。
- WebGLとThree.jsを組み合わせてCSSではできない多彩な表現を実装します。
30日間の返金保証
コース初回購入時に限り、購入より30日以内であれば、無条件に全額返金させていただきます。めんどうな手続きや条件などは一切ありませんので、安心してお試しください。
※ 一度返金されたコースを再度ご購入の場合は返金できかねますのでご了承ください。
新サービス移行に伴い現在販売を停止しております。
新サービスリリースまでもう少々お待ちください。
コース紹介
3分程度の短い動画です。本コースで学ぶ内容をご確認いただけます。
コース内容
本コースは11時間を超える動画教材で
実際にコードを書きながら3Dグラフィクスについて学んでいきます。
- このセクションで学ぶこと (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)
- ランダムにメッシュを配置1 (9:46)
- ランダムにメッシュを配置2 (7:14)
- ライトの使い方 (16:17)
- ライトで影を落とす方法 (5:39)
- ランダムにメッシュを配置3 (6:02)
- ランダムにメッシュを配置4 (12:08)
- 【チャレンジ】立方体の壁 (16:08)
- dat-gui(lil-gui)の使い方 (8:00)
- パフォーマンスの測定方法 (3:29)
- このセクションで学ぶこと (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)
- このセクションで学ぶこと (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)
- ノイズを使ったスライドを作成しよう1 (6:54)
- ノイズを使ったスライドを作成しよう2 (9:22)
- 画像を用いて歪みを作成 (12:42)
- このセクションで学ぶこと (1:06)
- WebGLと座標系 (12:39)
- Three.js Editorで座標系を確認してみよう (6:49)
- Three.jsカメラの使い方 (8:23)
- スティッキーな画像メッシュを作成してみよう1 (16:17)
- Three.jsのコードを覗いてみよう (6:45)
- スティッキーな画像メッシュを作成してみよう2 (13:21)
- EasingFunctionでアニメーションに緩急をつけよう (7:50)
- スティッキーな画像メッシュを作成してみよう3 (21:19)
- スティッキーな画像メッシュを作成してみよう4(UVを使った遅延) (6:09)
- ツイストする画像メッシュを作成しよう (13:07)
- カラフルな球を作成してみよう (9:25)
- カラフルな球を作成してみよう2 (10:05)
- カラフルな球を作成してみよう3 (9:33)
- 平面から球体への状態遷移を記述しよう (14:47)
- 平面から球体への状態遷移を記述しよう2 (7:35)
- フロアから球体への状態遷移を記述してみよう (17:01)
- 画像が粒になって消えていくアニメーションの作成 (11:50)
- 粒子となって遷移する画像 (14:17)
- 粒子となって遷移する画像2 (18:24)