WSLでGLUT&glpng ~Test.cの実行まで~

 ~~Cygwin(rebase問題)で困っているクラスメートが多かったので，~~ Windows10でWSLを使ってGLUT&glpngを使ったプログラムを動かす方法をまとめてみました．
(あくまで ~~もろもろの事情で~~ gcc/makeといったCLIベースでやらざるをえない時の方法です．VisualStudio等のIDEを用いた方法も可能ですが，この記事では触れません．)

# WSLとは
Windows Subsystem for Linuxの略称． Windowsのカーネル上でLinuxディストリビューションを動かすためのサブシステム． 
詳細はGoogle先生に聞いて下さい．

# 前提条件
- Windows10 Fall Creators Update(ver:1709)以降の64bit Windows10

WSLにインストールするLinuxディストリビューションはUbuntu18.04 LTSとします．

# 検証環境
- 環境1:ネイティブWindows10マシン
    - CPU:Intel core i7-7700HQ
    - Windows10 Home var:1803 build:17134.285

- 環境2:macOS上のWindows10仮想マシン
    - CPU:Intel core i7-7567U
    - ホストOS:macOS High Sierra 10.13.6
    - 仮想化ソフトウェア:Oracle VirtualBox var:5.2.12 r122591
    - ゲストOS:Windows10 Education var:1803 build:17314.286

2019/11/20 いつまで経っても追加されなかった環境2と3を削除，環境4を環境2に変更

# 下準備
まずはUbuntuが使えるようにします．
## WSLのインストール

1. Windowsの設定を開く(ウィンドウを最大化することをお勧めします)
2. アプリへ移動
3. アプリと機能→関連設定から`プログラムと機能`を選択
4. 開いたウィンドウから`Windowsの機能の有効化または無効化`を選択
5. `Windows Subsystem for Linux`のチェックボックスをオン
![WSL_active.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/cb7f1275-b576-6402-637e-1a02a62e46eb.png)
6. OKを押して進める
7. 再起動を求められるので， 再起動を行う．

以上でWSLのインストールが終わりです． 次はUbuntuのインストールです．

## Ubuntuのインストール
1. Microsoft Storeを開く    
![microsoftstore.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/37f962f7-e62b-ac05-a66b-7a34c8c7e97a.png)
2. Ubuntuと検索   
![store_search.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/f2f2dfba-aab1-9430-ae2f-4afa467da8d0.png)
3. `Ubuntu 18.04 LTS`を選択      
![ubuntu.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/c2deae5a-90fc-a2e4-f94e-8622105a7551.png)
4. 入手をクリック
5. `Microsoftアカウントへログインして~`と言われたら`必要ありません`を選択
6. `起動`をクリック
7. `Installing, this may take a few minutes...`と言われるので言われた通り待つ．
8. ユーザ名(Windowsと同じにする必要無し)， ログインパスワードを設定
9. プロンプトが帰って来たらOK.

以上でUbuntuのインストールが終わりです． 次はパッケージのインストールです．

## パッケージのインストール
`$`はプロンプトを示すものです．入力の必要はありません．
1. `$sudo apt update`を実行
2. `$sudo apt install gcc make emacs unzip`を実行

ひとまずこれで下準備が終了です． 次はGUIベースのLinuxアプリケーションが動かせるようにします．

# X Windowの設定
Ubuntu上で実行したGUIアプリケーションがWindows上に表示されるようにします．
[Ubuntu 18.04のWSL上へのインストールと初期設定:X Windowの起動（Windows側からLinuxソフトウェアを別画面表示する）](http://www.aise.ics.saitama-u.ac.jp/~gotoh/HowToInstallUbuntu1804OnWSL.html#toc13)を参考に行いました．

## VcXsrvのインストール
1. [ここ](https://sourceforge.net/projects/vcxsrv/)からVcXsrvをダウンロードします．
2. なにも変えずに`Next`をクリック

![vsxsrv_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/9f6857f0-57c2-71a3-3361-3318b2d4fe60.png)
3. インストール場所を変える場合は変えて`Next`をクリック

![vsxsrv_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/0d485500-bdbc-58a6-f838-3315dc7644c4.png)
4. `Close`をクリック     

![vsxsrv_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/5411e8e0-8986-4789-0813-c49597e07da0.png)

これでインストールが終了です．
Windowsのユーザ名が全角文字の場合，[Ubuntu 18.04のWSL上へのインストールと初期設定:トラブルシューティング：Windowsのユーザ名が日本語の場合（2バイト文字を使っている場合）](http://www.aise.ics.saitama-u.ac.jp/~gotoh/HowToInstallUbuntu1804OnWSL.html#toc15)を参考に追加の作業を行って下さい．

### VcXsrvの起動
1. DesctopにXLaunchというショートカットが出来ているので，それをクリックします．

![xlancher.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/ff1a543f-b432-b5ba-693b-e6d6fe471c84.png)
2. `Multiple Windows`を選択し，`次へ`をクリック

![vsxsrv_l1.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/6abd66ae-c380-3ec3-bd0f-070b37e818ce.png)
3. `Start no cliant`を選択し，`次へ`をクリック

![vsxsrv_l2.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/6b213793-cdf6-32d9-5d29-6f8aa9feeba6.png)
4. そのまま`次へ`をクリック

![vsxsrv_l3.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/25652c5c-6460-1555-c9b0-892c5eb93f63.png)

(2018/11/13追記:GLUT_RGBAで色を指定する場合，Native openglのチェックを外さないと色が出ない場合があります．色が出ない場合は，チェックを外して下さい．)
5. `完了`をクリック      
![vsxsrv_l4.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/e29a18a9-1f9c-aa81-4746-6f6a2991a98e.png)
6. Windowsファイアウォールのウィンドウ(下図のようなウィンドウ)が出た場合，`キャンセル`をクリック
![firewall.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/ecf18189-ab69-9128-3a8e-aadf235ced72.png)

## Ubuntu側の設定
1. `$sudo apt install  x11-apps x11-utils x11-xserver-utils dbus-x11`を実行．
2. `$cd`してホームディレクトリに戻る
3. `$echo 'export DISPLAY=localhost:0.0' >> ~/.bash_profile`を実行
4. `$source ~/.bash_profile`を実行
2. `$xeyes &`を実行して下図のように表示されれば成功．
![xeyes.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/c1689b9a-601a-d6a8-fdf0-e3429a368d30.png)


以上でX Windowの設定は完了です．次はGLUTとglpngをインストールします．

# GLUT&glpngのインストール
GLUTとglpngをインストールします．
glpngはaptのリポジトリから削除されているため，自分でビルド(make)する必要があります．
[森北出版株式会社刊 Springs of C サポートページ](http://teacher.nagano-nct.ac.jp/ito/Springs_of_C/#FAQ_Ubuntu1110_glpng)の9番を参考に行いました．

## GLUTのインストール
1. `$sudo apt install freeglut3-dev`を実行

## glpngのビルド→インストール
1. `$mkdir tmp`で作業用ディレクトリを作成
2. 作成したディレクトリへ移動
3. ~~`$wget ftp://ftp.usa.openbsd.org/pub/OpenBSD/distfiles/glpng-1.45/glpng.zip`を実行~~
4. `$unzip glpng.zip`を実行
5. `src/`へ移動
6. `$make -f Makefile.LINUX`を実行(warningが大量に出ますが成功はします)
7. `../lib/`へ移動
8. `libglpng.a`を`/usr/lib/`へコピー(`sudo`が必要です)
9. `．．/include/GL`へ移動
10. `glpng.h`を`/usr/include/GL/`へコピー(`sudo`が必要です)

以上でGLUT/glpngのインストールは完了です．次は動作確認を行います．

2019/9/24 追記 手順3で取得しているwget先のアドレスが切れているようです． http://mirrors.nycbug.org/pub/distfiles/ なら生きてる?

2021/6/01 追記 上の追記のリンクも切れていた…(distfilesまでは存在するがそこにglpng.zipが存在しない) Springs of Cのサポートページしか生きているリンクを確認できていません．これ以外で確認できた方は御一報下さい．

# 動作確認
glpngについてくるExampleをコンパイルして，GLUTとglpngが正常にインストールできているかを確認します．
[森北出版株式会社刊 Springs of C サポートページ](http://teacher.nagano-nct.ac.jp/ito/Springs_of_C)の16番を参考に`Test.c`を編集しました．

1. `~/tmp/Example/`へ移動
2. `Test.c`を編集する(`$emacs Test.c &`など)
    3. 9行目と10行目(`#include <gl/glpng.h>`と`#include <gl/glut.h>`を入れ替える
    4. 入れ替えた各行に対して，`gl`を`GL`に置き替える．
    5. 67行目のmain関数の返り値を，`void`から`int`に置き替える．
    6. main関数の引数に`int argc, char** argv`を追加する．
    7. 70行目の空行の後に，`glutInit(&argc, argv);`を追加する．
    8. 保存して終了(emacsなら`C-x C-s`で保存，`C-x C-c`で終了)
5. `$gcc -Wall -o Test Test.c -lglpng -lglut -lGLU -lGL -lm`を実行
6. 何も出なければコンパイル終了．
7. `$./Test`でWindows側に下図のように表示されれば成功.(実際はくるくる回ってます)
![test.PNG](https://qiita-image-store.s3.amazonaws.com/0/145501/fb47291a-0085-d5d9-f69a-9992b800c671.png)


以上で本題は終了です．

# Windows再起動後にすること
Windowsを再起動した後は，VcXsrvを立ち上げ直す必要があります．[VcXsrvのインストール](#vcxsrvのインストール)を参考にVcXsrvを起動してください．

# Windows側のディレクトリにアクセスする方法
Windows側のディレクトリ(Cドライブ内のディレクトリなど)にアクセスしたい場合，
`/mnt/c/Users/YourName/...`
へ移動するとアクセス出来ます．