OS：Windows11
オンボードのグラフィックス：Intel UHD Graphics
Windows11でのwsl2インストールは非常に簡単になっていて コマンドプロンプトで
wsl --install
を実行するだけ。あとはユーザ名やパスワードは適宜決める。
Windows での Python を使用した Web 開発 | Microsoft Learn
sudo apt update && sudo apt upgradeとして更新した後に、
sudo apt upgrade python3でpythonを更新する
sudo apt install python3-pipと入力してpipをインストールする
これによりパッケージの追加ができるWSL2：UbuntuのPythonで「pip install」する前に知るべきこと - SE_BOKUのまとめノート的ブログ
上によるとpipコマンドでインストールする際にsudoを付けてしまうと
標準の管理パッケージaptとの間で問題が起きるらしい
よって通常のpip installを使う
環境分けたほうが安全なのでvenvもインストール
sudo apt install python3-venv
wsl2でGUIアプリを表示するために必要 以下の通りに進めていけば問題ない。
VcXsrv（Xサーバー）をWindowsにインストールしLinuxのGUIをリモート操作する設定方法 | りんか ネット
最後のチェックは3つ（4つ）全部入れていい。 特にファイアウォールについてはパブリックとプライベート両方にチェックを入れるようにする
ディスプレイの番号についてはWSL2を使う場合以下のように設定する
WSL で動くアプリの GUI を VcXsrv を使い Windows 10 に表示する | りんか ネット
エクスプローラで直接ファイルを開いて編集してもいいし、sudo vim /etc/bash.bashrcで
ターミナル上で直接編集してもいい
うまくインストールできているか確認するためにxeyesを使う
sudo apt install x11-apps xeyes
xeyesが起動すれば問題ない
Running WSL GUI Apps on Windows 10 - Microsoft Community Hub
homeディレクトリに仮想環境を置く場所を作る
mkdir python-projects/Pybullet cd python-projects/Pybullet python3 -m venv .venv # 仮想環境の作成 source .venv/bin/activate # 仮想環境の有効化
仮想環境内でパッケージをインストールする
(.venv) pip3 install pybullet (.venv) pip3 install numpy
(.venv) git clone --depth 1 https://github.com/bulletphysics/bullet3 # サンプルプログラムのダウンロード (.venv) python3 bullet3/examples/pybullet/examples/humanoid_manual_control.py # 実行環境
Pybulletでロボットアームシミュレーションをするまでの手順 - Qiita
WSL2(Ubuntu20.04)+venv+pyBulletで深層強化学習のサンプルプログラムを動かす - Qiita
自分の環境ではnvidiaのgpuも入っていたためかウィンドウは出てきても真っ黒のままで描画されなかった。 おそらくOpenGLに関係した問題だろうということで動作確認を行った。
sudo apt install mesa-utils glxgears
本来なら回転するギアが表示されるのだが真っ黒なウィンドウが表示される
WSLのOpenGL errorでハマった話（LIBGL_ALWAYS_INDIRECT=1でなく0） - Qiita
glxgears displays black screen, no gears · Issue #654 · microsoft/wslg · GitHub
そこで以下の設定を追加した
export DISPLAY="`grep nameserver /etc/resolv.conf | sed 's/nameserver //'`:0" # ←ディスプレイ番号の設定 export LIBGL_ALWAYS_INDIRECT=0 #←追加 export MESA_D3D12_DEFAULT_ADAPTER_NAME=nvidia #←追加
bashrcには記述するだけでは反映されないので新しくWSL2を立ち上げるか
source /etc/bash.bashrcを実行する
きちんと歯車が回っていれば描画については問題ないはず
改めてサンプルプログラムを実行する プログラム起動時のログを見るとGL_RENDERERがNVIDIAになっていることが確認できる
startThreads creating 1 threads. starting thread 0 started thread 0 argc=2 argv[0] = --unused argv[1] = --start_demo_name=Physics Server ExampleBrowserThreadFunc started X11 functions dynamically loaded using dlopen/dlsym OK! X11 functions dynamically loaded using dlopen/dlsym OK! Creating context Created GL 3.3 context Direct GLX rendering context obtained Making context current GL_VENDOR=Microsoft Corporation GL_RENDERER=D3D12 (NVIDIA GeForce MX550) GL_VERSION=4.2 (Core Profile) Mesa 22.2.5-0ubuntu0.1~22.04.3 GL_SHADING_LANGUAGE_VERSION=4.20 pthread_getconcurrency()=0 Version = 4.2 (Core Profile) Mesa 22.2.5-0ubuntu0.1~22.04.3 Vendor = Microsoft Corporation Renderer = D3D12 (NVIDIA GeForce MX550) ・ ・ ・
WSL2上で動作させることができた。
全体的な流れは以下を参考にさせていただきました
WSLのOpenGL errorでハマった話（LIBGL_ALWAYS_INDIRECT=1でなく0） - Qiita
glxgears displays black screen, no gears · Issue #654 · microsoft/wslg · GitHub
VSCodeでTexを書く際にpdfビューワーとしてsumatrapdfがよく使われる。 VSCodeでのlatex環境構築は
VSCode で TeX を書こう - KERI's Lab を参考にする。
ビューワーをクリックすることで対応するVSCodeの行に移動できる逆順検索がある wikiの通りにsumatrapdfの設定を行う
Visual Studio Code/LaTeX - TeX Wiki
"{VSCodeがあるフォルダ}\Microsoft VS Code\bin\code.cmd" -r -g "%f:%l"
※VSCodeの設定と違って階層の区切りが\であることに注意する
vscodeでの編集作業やる気がでない・・・
そんなときアイドル達が背景にいたら少しは楽しくなる！ かもしれない。
background - Visual Studio Marketplaceを少し編集してぷちデレラ達に出演してもらう。
拡張機能の作り方は以下の記事をベースに
最新バージョン(2021/08/01現在)でも使える＋α ように追加を行う。
先に結果を示すと見た目はこんな感じ。
まずは参考元の手順１～５に従ってvsixをインストールする準備を行う。
shalldie.background-1.1.28/extension/out/background.jsを以下のように修正する。
install(refresh) { const lastConfig = this.config; // 之前的配置 const config = vscode_1.default.workspace.getConfiguration('background'); // 当前用户配置 // 5.hack 样式 let arr = defBase64_1.default; // 默认图片 if (!config.useDefault) { // 自定义图片 //arr = config.customImages; arr = this.getImageList(); // getImageList()を呼ぶように修正 } }
install(refresh)の後ろにgetImageList()の中身を追加する。
install(refresh){ } //install()の後に追加する getImageList() { let config = this.config; let folders = config.customImageFolders; let arr = []; if (folders.length > 0) { //フォルダの設定があればランダムで一つ選択 let fdpath = folders[Math.floor(Math.random() * folders.length)]; let files = fs_1.default.readdirSync(path_1.default.resolve(fdpath)); files.filter((s) => { return s.endsWith('.png') || s.endsWith('.jpg') || s.endsWith('.jpeg') || s.endsWith('.gif') || s.endsWith('.webp') || s.endsWith('.bmp'); }).forEach((file) => { arr.push('file://'+path_1.default.join(fdpath, file).toString().replace(/\\/g, '/')); }); } else { //なければ既存のcustomImagesから画像を取得 arr = config.customImages; } if (config.useRandom) { //ランダム使用モードなら並び替え for (let i = arr.length - 1; i > 0; i--) { let r = Math.floor(Math.random() * (i + 1)); let tmp = arr[i]; arr[i] = arr[r]; arr[r] = tmp; } } return arr; }
shalldie.background-1.1.28/extension/package.jsonにuseRandomとcustomImageFoldersを追加する。
"configuration": { // 略 "background.useRandom": { "type": "boolean", "default": false, "description": "Use random order." }, "background.customImageFolders": { "type": "array", "default": [], "description": "Your custom image folders. (selected randomly) " }, "background.loop": { "type": "boolean", "default": false, "description": "Loop your images. 循环使用图片" } } }
shalldie.background-1.1.28/extension/out/background.js
に以下を追加する。refreshはinstallショートカットコマンドから切り替えをするときに呼び出される。
getImageList(){ // 略 } refresh() { //installの処理からメッセージを出さずrestart出来るようにしたもの let config = vscode_1.default.workspace.getConfiguration('background'); this.config = config; if (!config.enabled) { this.uninstall(); vscode_1.default.commands.executeCommand('workbench.action.reloadWindow'); return; } let arr = []; if (!config.useDefault) { arr = this.getImageList(); } let content = getCss_1.default(arr, config.style, config.styles, config.useFront).replace(/\s*$/, ''); let cssContent = this.getCssContent(); cssContent = this.clearCssContent(cssContent); cssContent += content; this.saveCssContent(cssContent); vscode_1.default.commands.executeCommand('workbench.action.reloadWindow'); return; }
shalldie.background-1.1.28/extension/extension.jsにてactivate()の一番下にrefreshコマンドを追加する。
略
//refreshコマンドを追加
const disposable2 = vscode_1.default.commands.registerCommand( 'extension.background.refresh', () => background_1.default.refresh() );
context.subscriptions.push(disposable2);
shalldie.background-1.1.28/extension/package.json
"commands": [ { "command": "extension.background.info", "title": "Background - Info" }, { "command": "extension.background.refresh", "title": "Background - Refresh" } ], "keybindings": [ { "command": "extension.background.refresh", "key": "ctrl+shift+f6" } ],
そのままでは新規ウィンドウでvscodeを複数起動しても画像が変わらないので
起動時の処理を追加する。
shalldie.background-1.1.28/extension/out/background.js
refresh(){ //略 } fupdate() { //installの処理からメッセージを出さずrestart出来るようにしたもの let config = vscode_1.default.workspace.getConfiguration('background'); this.config = config; if (!config.enabled) { this.uninstall(); vscode_1.default.commands.executeCommand('workbench.action.reloadWindow'); return; } let arr = []; if (!config.useDefault) { arr = this.getImageList(); } let content = getCss_1.default(arr, config.style, config.styles, config.useFront).replace(/\s*$/, ''); let cssContent = this.getCssContent(); cssContent = this.clearCssContent(cssContent); cssContent += content; this.saveCssContent(cssContent); return; }
shalldie.background-1.1.28/extension/out/extension.js
activate(){ //refreshコマンドを追加 const disposable2 = vscode_1.default.commands.registerCommand( 'extension.background.refresh', () => background_1.default.refresh() ); context.subscriptions.push(disposable2); background_1.default.fupdate(); // 起動したときの切り替え処理 }
ぷちデレラの画像ファイルは以下からダウンロードした
ぷちデレラ一覧 | アイマス シンデレラガールズ カードギャラリー
chromeの拡張機能などで画像をまとめてダウンロードできるものがあるのでそれを使うか 開発者ツールなどから画像を取り出してダウンロードするかして画像をフォルダに保存する。
settings.jsonに画像フォルダの指定などを記述する。フォルダ名はダウンロード先のフォルダを指定する。
"background.enabled": true,
"background.useDefault": false,
"background.useRandom": true,
//拡張機能標準の画像設定パス 以下のパスパターンいづれかで記述 ランダムにしたい場合は４つ以上も可
"background.customImages":
"file:///C:/Users/ユーザー名/Pictures/m@s/.png",
"file:///C:/Users/ユーザー名/Pictures/m@s/.png",
"file:///C:/Users/ユーザー名/Pictures/m@s/.png"
],
//画像が置いてあるフォルダパス 以下のパスパターンいづれかで記述customImagesより優先される
"background.customImageFolders": [
"C:\\Users\\ユーザー名\\Pictures\\m@s",
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"z-index": "99999",
"width": "100%",
"height": "100%",
"background-position": "100% 100%",
"background-repeat": "no-repeat",
"opacity": 0.6,
"background-size":"auto 20%" // 右下に高さ20%で設置
},
再びzip化してvsixとしてvscodeにインストールする。 本体cssをいじっているので拡張機能を有効化するために一度 管理者権限でvscodeを起動する。 以降は通常通りvscodeを起動すれば設定が適用される。
※個人の趣味用途の範囲でお願いします。
