応用編のmarkdownを分解

Author: ics-ikeda

docs/effect.md

@@ -0,0 +1,16 @@
+# Three.js演出編
+
+Three.jsを使った表現を作例を通して学びましょう。
+
+![](https://ics.media/wp-content/uploads/2016/11/160907_magma_effect.jpg)
+
+- [ゲーム演出に役立つマグマ表現](https://ics.media/entry/13973)
+- [RPGのセーブポイント風の魔法陣](https://ics.media/entry/11401)
+- [タイムリマップ表現](https://ics.media/entry/7162)
+- [アイコンフォント集Font Awesomeを扱う方法](https://ics.media/entry/8385)
+- [サウンドビジュアライザー](https://ics.media/entry/9105)
+- [エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか](https://ics.media/entry/15745)
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>

docs/index.md

@@ -1,7 +1,5 @@
 # Three.js入門サイト
 
-<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-large" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
-
 このサイトは、WebGLのライブラリ「[Three.js](https://threejs.org)」の入門サイトです。
 
 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。
@@ -77,45 +75,31 @@ JavaScriptの新しい仕様のECMAScript 2015（略称ES2015、別名ES6）以
 
 ![](https://ics.media/wp-content/uploads/2016/08/1601_trigonometric_function1.jpg)
 
-
-- [WebGL開発に役立つ三角関数の数式・概念](https://ics.media/entry/10657)
-- [ベクトルの足し算・引き算](https://ics.media/entry/15043)
-- [ベクトルの内積](https://ics.media/entry/15321)
-- [ベクトルの外積](https://ics.media/entry/15467)
+- [数学の記事一覧](math.md)
 
 ## Three.js演出編
 
 Three.jsを使った表現を作例を通して学びましょう。
 
 ![](https://ics.media/wp-content/uploads/2016/11/160907_magma_effect.jpg)
 
-- [ゲーム演出に役立つマグマ表現](https://ics.media/entry/13973)
-- [RPGのセーブポイント風の魔法陣](https://ics.media/entry/11401)
-- [タイムリマップ表現](https://ics.media/entry/7162)
-- [アイコンフォント集Font Awesomeを扱う方法](https://ics.media/entry/8385)
-- [サウンドビジュアライザー](https://ics.media/entry/9105)
-- [エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか](https://ics.media/entry/15745)
+- [演出の記事一覧](effect.md)
 
 ## WebGLシェーダー編
 
 Three.jsだけだと実現できる表現の種類に限界があります。シェーダーをGLSLでカスタマイズすることによって、表現の種類を大きく広げられます。
 
 ![](https://ics.media/wp-content/uploads/2015/03/150311_eyecatch.png)
 
-- [WebGLを極めるならJSライブラリを使わず書こう](https://ics.media/entry/2663)
-- [Three\.jsでのぷるぷるシェーダーの作り方](https://ics.media/entry/3228)
-- [シェーダーの定番画像処理8選](https://ics.media/entry/5535)
-
+- [シェーダーの記事一覧](shader_md)
 
 ## WebGL応用編
 
 WebGLの最適化や次世代の仕様について理解を深めましょう。
 
-
 ![](https://ics.media/wp-content/uploads/2017/07/170706_webgl2_eyecatch.png)
 
-- [WebGLのカクつき対策まとめ](https://ics.media/entry/12930)
-- [サンプルで理解するWebGL 2\.0](https://ics.media/entry/16060)
+- [次世代WebGLの記事一覧](webgl_next.md)
 
 
 ## VR表現
@@ -124,21 +108,17 @@ WebGLの最適化や次世代の仕様について理解を深めましょう。
 
 ![](https://ics.media/wp-content/uploads/2017/01/170112_panorama_eye.jpg)
 
-- [たった4行でできる！ ブラウザ向けVRをThree\.jsで実装する方法](https://ics.media/entry/18793)
-- [HTMLタグで本格VRコンテンツが作れる3Dライブラリ「A\-Frame」](https://ics.media/entry/13401)
-- [お手軽360°パノラマ制作入門！ JSでパノラマビューワー](https://ics.media/entry/14490)
-
+- [WebXRの記事一覧](webxr.md)
 
 ## Node.jsを使ったフロントエンド開発
 
 効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。
 
 ![](https://ics.media/wp-content/uploads/2017/08/170808_eyecatch_webpack_typescript.jpg)
 
-- [webpack + Babelの環境構築 \(Three\.jsのサンプル付き\)](https://ics.media/entry/16028)
-- [webpack + TypeScriptの環境構築 \(Three\.jsのサンプル付き\)](https://ics.media/entry/16329)
+- [Node.jsの記事一覧](nodejs.md)
 
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-02</article-date-published>
-<article-date-modified>2019-01-08</article-date-modified>
+<article-date-modified>2019-01-17</article-date-modified>

docs/math.md

@@ -0,0 +1,15 @@
+# Three.js数値計算
+
+3Dでは、三角関数やベクトルの計算をする場面が多いです。実例を通して、これらを学んでいきましょう。
+
+![](https://ics.media/wp-content/uploads/2016/08/1601_trigonometric_function1.jpg)
+
+- [WebGL開発に役立つ三角関数の数式・概念](https://ics.media/entry/10657)
+- [ベクトルの足し算・引き算](https://ics.media/entry/15043)
+- [ベクトルの内積](https://ics.media/entry/15321)
+- [ベクトルの外積](https://ics.media/entry/15467)
+
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>

docs/nodejs.md

@@ -0,0 +1,12 @@
+# Node.jsを使ったフロントエンド開発
+
+効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。
+
+![](https://ics.media/wp-content/uploads/2017/08/170808_eyecatch_webpack_typescript.jpg)
+
+- [webpack + Babelの環境構築 \(Three\.jsのサンプル付き\)](https://ics.media/entry/16028)
+- [webpack + TypeScriptの環境構築 \(Three\.jsのサンプル付き\)](https://ics.media/entry/16329)
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>

docs/shader.md

@@ -0,0 +1,13 @@
+# WebGLシェーダー編
+
+Three.jsだけだと実現できる表現の種類に限界があります。シェーダーをGLSLでカスタマイズすることによって、表現の種類を大きく広げられます。
+
+![](https://ics.media/wp-content/uploads/2015/03/150311_eyecatch.png)
+
+- [WebGLを極めるならJSライブラリを使わず書こう](https://ics.media/entry/2663)
+- [Three\.jsでのぷるぷるシェーダーの作り方](https://ics.media/entry/3228)
+- [シェーダーの定番画像処理8選](https://ics.media/entry/5535)
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>

docs/webgl_next.md

@@ -0,0 +1,34 @@
+# WebGL応用編
+
+WebGLの次世代の仕様について理解を深めましょう。
+
+
+
+## 最適化
+
+![](https://ics.media/wp-content/uploads/2018/05/180502_webgl_compressedtexture_atf_eyecatch.png)
+
+- [WebGLのカクつき対策まとめ](https://ics.media/entry/12930)
+- [オフスクリーンキャンバスを使ったJSのマルチスレッド描画](https://ics.media/entry/19043)
+- [圧縮テクスチャーをWebGLで扱う方法と利点](https://ics.media/entry/17863)
+
+## WebGL 2.0
+
+![](https://ics.media/wp-content/uploads/2017/07/170706_webgl2_eyecatch.png)
+
+- [Geometry Instancingを使った最適化](https://ics.media/entry/16060)
+- [Multiple Render Targetsによる動的なライティング表現](https://ics.media/entry/17120)
+- [Transform Feedbackによるパーティクル表現](https://ics.media/entry/17505)
+
+## WebGPU
+
+![](https://ics.media/wp-content/uploads/2018/06/180619_WebGPU_ComputeShader_eyecatch.png)
+
+- [次世代仕様のWebGPUとは？](https://ics.media/entry/18412)
+- [WebGLと比較して理解する描画機能の違い](https://ics.media/entry/18507)
+- [計算シェーダーで高速並列計算](https://ics.media/entry/18467)
+- [最新WebGL通信](https://ics.media/entry/19657)
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>

docs/webxr.md

@@ -0,0 +1,13 @@
+# WebXR
+
+3Dの知識はバーチャルリアリティーの実装にも役立ちます。
+
+![](https://ics.media/wp-content/uploads/2017/01/170112_panorama_eye.jpg)
+
+- [たった4行でできる！ ブラウザ向けVRをThree\.jsで実装する方法](https://ics.media/entry/18793)
+- [HTMLタグで本格VRコンテンツが作れる3Dライブラリ「A\-Frame」](https://ics.media/entry/13401)
+- [お手軽360°パノラマ制作入門！ JSでパノラマビューワー](https://ics.media/entry/14490)
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2019-01-17</article-date-published>
+<article-date-modified>2019-01-17</article-date-modified>