tanaka's Programming Memo

プログラミングについてのメモ。

reStructuredTextをVSCodeでプレビューする

Godotのドキュメントの翻訳に少しずつ参加しています。GodotのドキュメントはreStructuredTextというマークアップテキストが採用されています。はじめて使うので正しく動くかや空白の入れ方が結構シビアで何かと不安なので、手元の環境でプレビューできる環境を構築してみました。

目次

ブログの環境

この記事は以下の環境で確認しました。

前準備

まずはPython3.9以降とpipが動作するかを確認します。pipが動かなくなっていたことでかなり苦戦しました。事前に動作を確認して、必要に応じてインストールや修復をしてから先に進んでください。

Pythonとpipのバージョン確認

PowerShellなどのターミナルを起動して以下を実行します。

python --version
pip --version

以上でPython3.9以降とpipのバージョンが確認できれば先に進んでください。

Pythonが古かったりインストールされていない場合は、Windows版Pythonのインストール: Python環境構築ガイド - python.jpを参考にインストールしてください。インストールの際には環境変数を設定するオプションを付けましょう

pipがエラーになる場合

Pythonをインストールすればpipも入るはずなのですが、pipがエラーで実行できないという場合は環境変数に古いものが残っている可能性があります。自分はこれでハマりました! 以下の手順で解消できるかも知れないので試してみてください。

  • システム詳細設定を開きます

システムの詳細設定を開く

自分の環境では、以上でエラーがなくなりました。

Sphinxのインストール

reStructuredTextはSphinx(スフィンクス)というツールでプロジェクトを作成したり、HTMLなどへの変換ができます。pipでインストールします。

  • PowerShellなどを起動します
  • 以下を実行します
pip install -U sphinx

-Uスイッチを付けることで、インストールされていなければインストール、インストール済みなら最新版に更新してくれます。

reStructuredTextを扱うためのプロジェクトを作成する

reStructuredTextをレンダリングするにはいくつかの設定が必要です。sphinxで簡単なプロジェクトを作って利用します。

  • PowerShellなどで、プロジェクトフォルダーを作りたい場所へcdで移動します
  • プロジェクトを作成する以下のコマンドを実行します。以下はrst-viewというプロジェクト名にする例です。プロジェクト名は任意に変更してください
sphinx-quickstart rst-view

選択肢が表示されるので次のように答えます。

  • Separate source and build directoriesは任意で。シンプルにするならそのままEnterを押します
  • Projet name:には、rst-viewなどのプロジェクト名を入力します
  • Author name:には、著作者名を入力します。公開しないなら適当でいいです
  • Project release []:は空欄のままEnter
  • Project languageは、日本語ならjaを入力してEnterします

以上で作成完了です。

VSCodeを設定する

作成したプロジェクトをVSCodeで開いて、必要なエクステンションを入れます。

  • VSCodeを起動します
  • FileメニューからOpen Folderを選択して、sphinxで作成したプロジェクトフォルダーを開きます。例でrst-viewという名前にしたフォルダーです
  • フォルダーの作成者を信頼するか表示されたら、信頼(Yes, I trust the authors)をクリックします
  • FileメニューからSave Workspace As...をクリックします
  • そのままEnterきーを押してワークスペースを保存します

保存したワークスペースに設定が書き込まれます。また、次回以降はこのワークスペースファイルをダブルクリックすればプロジェクトを開くことができます。

必要なエクステンションをインストールします。

  • 左のメニューからExtensionメニューをクリックします

エクステンションを開く

  • 検索欄にesbonioと入力して、表示されたらInstallをクリックします

Esbonioをインストール

  • Pythonもインストールします

Pythonをインストール

必要なものはこれで揃いました。reStructuredTextファイルを表示しようとするともう少し設定が必要になります。

Explorerに切り替える

  • ファイルからindex.rstをクリックして開きます

右下に「Pythonコマンドが実行できない」というようなエラーが表示されたら、Pythonの実行環境を設定する必要があります。

  • WinならF1キー、MacならShift+Command+Pキーを押して、コマンドパレットを開きます
  • Python: Selectと入力すると、Python: Select Interpreterが表示されるので選択します

Pythonインタープリターを選択

  • Pythonの実行環境の候補が表示されるまで待ちます。候補が表示されたらPython3.9以降のものを選択します。以下はPython3.11を選択している例です

使用するPythonを選択

Pythonの実行環境をVSCodeに反映させるために一度VSCodeを閉じます。ワークスペースファイルを保存したので、プロジェクトフォルダーを開いてワークスペースをダブルクリックすればreStructuredTextのプロジェクトを開き直すことができます。

ワークスペースを開く

  • 先ほどと同じ操作でindex.rstを開きます
  • 今度はPythonが見つかるので、Language Serverをインストールするかの確認が表示されます。Yesをクリックしてインストールしてください

言語サーバーをインストールする

VSCodeのターミナルが起動してインストールがはじまるので終わるまで待ちます。インストールが終わったら「press anky key to close it.」というようなメッセージが表示されるので、何かキーを押せば完了です。

reStructuredTextをプレビューする

ここまでの設定が完了したら、あとはこのワークスペースを開いて、エディター右上のプレビューボタンを押せばreStructuredText形式のテキストファイルをプレビューすることができます。

プレビューボタン

右側にプレビューが表示されます。

プレビュー!

rstファイルを変更して保存をしたら、プレビューに反映されます!

まとめ

以上、Godotのドキュメントで使用されているreStructuredTextをVSCodeで表示する手順でした。Windowsで手順を示しましたが、MacVSCodeでも同様の方法でプレビューできます。Pythonを仮想環境で構築したりショートカットが違うなどはありますが流れは同じです。

以前はreStructuredTextのエクステンションが使われていたのでネットではそちらの情報も見つかります。SphinxがバージョンアップしてVSCodeがEsbonioに対応したことから、2024年2月現在はこのブログで紹介した方法になりました。必要なエクステンションがEsbonioとPythonだけになり、Pythonインタープリターの選択と言語サーバーのインストールをすれば動くので手順が簡単になりました。

Python3.9以降とpipが入っていればスムーズに設定できるのではないかと思います。

関連URL

【Godot4.x】HTML5でエクスポートしたアプリを自分のWebサーバーで動かす

Godot4でHTML5にエクスポートしたアプリをWebサーバーにアップロードしても、そのままではCross Origin IsolationとSharedArrayBufferの機能がないというエラーが出ます。

エラー

GodotのIssuesに情報がありました。

SharedArrayBuffer & Cross Origin Isolation For HTML5 Not Widely Implemented · Issue #69020 · godotengine/godot · GitHub

Cross-Origin-Opener-PolicyとCross-Origin-Embedder-Policyの設定が必要とのことでした。自分の使っているサーバーは.htaccessで設定ができるので、以下の内容を書いた.htaccessファイルを作成して、アプリをアップロードしたフォルダーにアップロードしたら動作しました。

Header add Cross-Origin-Opener-Policy: "same-origin"
Header add Cross-Origin-Embedder-Policy: "require-corp"

ちなみにnginx系の場合は、nginx.confファイルに以下のような設定と書いてありました。nginxで試してないのでsome-locationの書き方などは不明です。

location some-location {
  add_header "Cross-Origin-Opener-Policy" "same-origin";
  add_header "Cross-Origin-Embedder-Policy" "require-corp";     
}

【Godot4.2.x】はじめてのGodotフラグメントシェーダー

Godot Engineのカレンダー | Advent Calendar 2023 - Qiitaの11日目の記事です。

◆前の日は@NumAniCloudさんのC#プロジェクトを分割して開発しよう、の話です。

◆次の日はきゃべつさんのGodot(C#)シーン派生とクラス派生 #C# - Qiitaです。

現在、Godotへの移住を検討するために調査をしています。丁度、シェーダーの使い方を調べているところだったので、リアル「はじめてのGodotシェーダー」です。Godotの公式マニュアルには基礎から参考リンクまでばっちりまとまっています。

docs.godotengine.org

ただ動かすまでに少し手数がかかるので、Godotのインストールから簡単な2Dフラグメントシェーダーを作る流れをまとめました。GodotはノードベースのVisual Shaderも持っているのですが今回はコードで書きます。公式マニュアルの最初の2Dシェーダーの作り方を少しアレンジしたものと、The Book of Shadersに掲載されているサンプルコードをいくつか動かします。

Godotやシェーダーを使ったことがない人でも眺めてなんとなく雰囲気が伝わる記事を目指しました。

目次

バージョン

このブログ記事を書いた環境は以下の通りです。

  • Windows10
  • Godot4.2.0

対象読者

Godotにもシェーダーにも触れたことがない人でも動かすことはできると思います。

Godotとは

2Dも3Dもいけるオープンソースゲームエンジンです。Win, Mac, LinuxのデスクトップPCやAndroidiOSWebGL用のビルドもできます。Switchのようなコンソールへの出力は公式ではサポートしていませんが不可能ということではありません。コンソールの開発に必要な情報に守秘義務があるためオープンソースのGodotに含めることができないということです。自力で対応したり、経験があるパブリッシャーを通せばリリースできます。※丁度この記事の公開日にW4 GamesからGodotのプロジェクトをSwitchやXBox, PS5といったコンソールに出力するサービスの開始予定と価格についての発表がありました!

開発言語はいくつか選択肢がありますがGDScriptという独自言語が推奨されています。インデントでコードのブロックを表すなどPythonに雰囲気が似ています。C#スクリプトとして使えるように整備が進んでいますが、正式対応はデスクトップのみで4.2からiOSAndroidでも実験的に動くようになりました、という段階です。

シェーダー言語はGLSLをベースにした独自のシェーダー言語とVisual Shaderが使えます。このブログではシェーダー言語でフラグメントシェーダーを書いてみます。

詳しくは公式ドキュメントをどうぞ。

Godotのインストール

Godotはオープンソースゲームエンジンなので、管理者権限もインストールもアカウント作成も必要ありません。zipファイルをダウンロードして展開すればすぐに使えます。この手軽さは最高です!

  • 公式ページを開きます

godotengine.org

  • Download Latestをクリックします

最新版のダウンロード

  • GDScriptを使う場合は上のGodot Engineをダウンロードします。C#を使う場合は下の.NET版をダウンロードします。今回はスクリプトには触れないのでどちらでも構いません

GDScriptを使う場合は上の方

  • 寄付(Donation)画面を×をクリックして閉じます。儲かったらぜひ寄付してください

寄付画面を閉じる

ダウンロードしたzipファイルを任意の場所に移動して展開すれば完了です。フォルダーの中のGodot_v4.2-stable_win64.exeをダブルクリックすればエディターが起動します。

エディターを起動

プロジェクト作成

シェーダーを試すためのプロジェクトを作成します。

  • 新規ボタンをクリックします

新規プロジェクトの作成

  • レンダラーはデスクトップ用のForward+を選んで、フォルダーを選ぶために参照ボタンをクリックします

フォルダーを選択

  • プロジェクトを作成したいフォルダーの位置を指定して、新しいフォルダーを作成します

プロジェクトの作成先を指定して、プロジェクト用のフォルダーを作成

  • プロジェクト名のフォルダー名を入力します。以下はAdcaleFirstShaderとした例です

AdcaleFirstShaderという名前でフォルダーを作成

  • フォルダーを作成したら、現在のフォルダーを選択をクリックします

  • 作成して編集ボタンをクリックします

プロジェクトを作成

以上で新規のプロジェクトが作成できます。

新規プロジェクトの作成完了

※Godotは動作がまあまあ不安定で、まあまあいきなり落ちます。適度に保存をしながら作業を進めてください。特に間違った操作をしていなくても落ちるときがあるので、落ちても気にしないで起動し直して作業を継続して大丈夫です。

はじめてのシェーダープログラミング

細かいことはあとにして動かしてみます。シェーダーにはいくつか種類があります。はじめての今回は効果が分かりやすいフラグメントシェーダーを使ってみます。

シェーダーの描画先をColorRectで作成

フラグメント(=fragment)は断片というような意味です。フラグメントシェーダーは対象となる図形のピクセルの色を設定するためのプログラムです。塗りつぶす範囲を表す図形とシェーダープログラムを設定するマテリアルが必要です。まずはシンプルに2Dで試してみます。

  • シーンの+をクリックして、検索欄にcolorと入力します。ColorRectが見つかったら選択して、作成ボタンをクリックします

ColorRectを作成

  • ColorRectを画面いっぱいに設定します。インスペクターのLayoutをクリックして開いて、Anchors Preset欄をクリックしてRect全面を選択します

ColorRectを画面全体に設定

  • Ctrl+Sキーを押して保存します。ファイル名はそのままでも構いませんし、first_2d_shader.tscnなどにしてもよいでしょう

シーンを保存

  • 実行してみます。F6キーを押すか、現在のシーンを実行ボタンをクリックします

現在のシーンを実行

成功するとGodotのロゴが表示されたあとに真っ白なウィンドウが表示されます。

画面が真っ白になればOK

確認したらウィンドウを閉じます。

これでフラグメントシェーダーで描画する先ができました!

はじめてのシェーダープログラミング

シェーダープログラムはマテリアルに設定します。そのためのマテリアルを作成します。

  • インスペクターのCanvasItem欄のMaterialの横の空欄をクリックして、新規ShaderMaterialを選択します

新規ShaderMaterialを作成

  • Material欄にあらわれた球体をクリックして、Shader欄の空欄をクリックして、新しいシェーダーをクリックします

新しいシェーダーを作成

  • 作成ボタンを押して、デフォルトのままCanvasItemのシェーダーを作成します

シェーダーを作成

シェーダースクリプトのファイルを開く

以上でシェーダーエディターに切り替わって、デフォルトのCanvasItemシェーダーが表示されます。最初は以下のようになっています。

// 1:
shader_type canvas_item;

void vertex() {
    // Called for every vertex the material is visible on.
}

void fragment() {
    // Called for every pixel the material is visible on.
}

void light() {
    // Called for every pixel for every light affecting the CanvasItem.
}

3つの空のメソッドが用意されています。それぞれ次のようなコメントが書かれています。

  • vertex()
    • 表示されているマテリアルの頂点ごとに呼び出されます
  • fragment()
    • 表示されているマテリアルのピクセルごとに呼び出されます
  • light()
    • CanvasItemに影響を与えるすべてのライトごとに、すべてのピクセルに対して呼び出されます

今回利用するのはフラグメントシェーダーです。void fragment()からはじまる部分を次のように変更してください。途中でエラーが表示されても構わずすべて入力を終えて下さい。

// 7:
void fragment() {
    COLOR = vec4(1.0, 0.0, 0.0, 1.0);
}

入力が終わってしばらく待つか、Ctrl+Sキーで保存すると白かったColorRectが赤くなります。

赤くなれば成功!

最初のシェーダーが完成しました!!

F6キーや現在のシーンを実行をすると、真っ赤な画面が実行されます。

実行後はシェーダーエディターから出力タブに切り替わります。シェーダーエディタータブをクリックするとシェーダーのコードが確認できます。

シェーダーエディターに戻す

コードの観察と実験

書いたコードは以下の通りです。

// 8:
    COLOR = vec4(1.0 ,0.0 ,0.0 ,1.0);

COLORは色です。=は一般的なプログラミング言語と同じく代入を意味しますので、右辺のvec4(1.0, 0.0, 0.0, 1.0)COLORに代入したということになります。

vec4は4つの要素を持つ4次元ベクトルです。コンピューターで色と言えばRGBが思い浮かびます。もう一つ値があるなら大抵はアルファ値、つまり透過値です。そこから推測すると、1つ目と4つ目が1.0で、2つ目と3つ目が0.0なので、赤が最大、緑と青がなしで、全く透過しない状態が予想できます。真っ赤になった結果と推測が一致します。

値を変更してさらに確認してみましょう。緑にしたければR=0, G=1, B=0, A=1にすればよいはずです。以下のように修正してみます。

// 8:
    COLOR = vec4(0.0, 1.0, 0.0, 1.0);

Ctrl + Sキーで保存すると緑色に変わりました。予想的中です!

緑色に変化!

他にも思いつく色を試してみましょう。青ならR=0, G=0, B=1、黄色ならR=1, G=1, B=0、水色ならR=0, G=1, B=1です。α値を0.5にすると色が薄くなることが確認できます。

画面の位置を色に反映させる

さきほどのコードは色を指定しただけで塗る場所を座標で指定しませんでした。ColorRect全体の色が変わったということは塗りつぶしの命令だったのでしょうか?

先ほどのコードを次のように変更します。

// 8:
    COLOR = vec4(UV.xy, 0.0, 1.0);

Ctrl+Sキーを押して保存するとカラフルになりました!

UVを指定

UVはCOLORと同じく、組み込み変数と呼ばれるGodotが自動的に用意してくれる変数です。組み込み変数や関数は便利なものが大量に用意されています。公式マニュアルにはシェーダーの種類ごとに使える組み込み変数や関数が記載されています。今回使っているのはシェーダーコードの1行目に書かれているcanvas_itemというシェーダーで、以下のページにリファレンスがあります。COLORやUVを探してみて下さい。

CanvasItemシェーダー — Godot Engine (4.x)の日本語のドキュメント

コードの観察と実験

コードは次の通りでした。

// 8:
    COLOR = vec4(UV.xy, 0.0, 1.0);

UV.xyとはなんでしょうか。公式ドキュメントで調べます。

UVの説明

UVのところには「頂点関数からのUV。」と書かれています。頂点関数はvertex()のことです。今回は実装を省略しているのでデフォルトの値が設定されたままfragment()に値が渡されます。

UVはテクスチャを貼り付ける位置を0から1の範囲で表した値です。描画された画像を見ると、左上が黒、右上が赤、左下が緑、右下が黄色です。これをRGBで表すと左上が0, 0, 0、右上が1, 0, 0、左下が0, 1, 0、右下が1, 1, 0ということになります。COLORに代入したのはvec4(UV.xy, 0.0, 1.0)でした。左上のUV値が0,0、右上が1, 0、左下が0, 1、右下が1, 1なら色と一致します。

ここで面白いのがUV.xyという書き方です。これはシェーダー言語でよく出てくる表現で、xとyの順の2次元ベクトルを表しています。CやC#ではこのような書き方はできませんが、シェーダーではベクトルを様々な方法で扱うので機能が拡張されているのです。例えば以下のようにxとyを入れ替えてみてください。

// 8:
    COLOR = vec4(UV.yx, 0.0, 1.0);

グラデーションの方向が変わる

グラデーションの色が縦横で入れ替わりました。他にもUV.xxUV.yyのような書き方もできます。

fragment()の動き方

最初のコードはColorRectを一色で塗りつぶすだけでしたが、今回はグラデーションになりました。これはfragment()がColorRectで囲まれているすべてのピクセルごとに実行されたからです。

UVには、ColorRectを構成する頂点からfragment()を実行するピクセルの位置に応じて、テクスチャーを貼り付けるための位置が線形補間されて渡されます。デフォルトでは小さい座標の頂点に0, 大きい座標の頂点に1が設定されるので、fragment()で描画する頂点の位置に応じて左上から右下に0から1の範囲でUV値が渡されます。それをCOLOR = vec4(UV.xy, 0.0, 1.0);ピクセルごとに着色したのでグラデーションになったのです。

何か描きたいとき、通常は「どこに何を描画するか」を考えるのが自然です。それに対してフラグメントシェーダーでは塗りつぶす面を構成するすべてのピクセルごとに「そのピクセルを何色にするのか」を考えます。

マテリアルから値を渡す-Uniform入力-

色を設定するために毎回シェーダーのコードを書き換えるのは面倒です。マテリアルで色を設定できるようにします。GodotではUniform入力を使うことでマテリアルからシェーダーに値や素材を渡すことができます。

シェーダーコードを以下のように書き換えてください。vertex()とlight()は使わないので消しました。

// 1:
shader_type canvas_item;

uniform vec4 base_color : source_color = vec4(1.0, 0.0, 0.0, 1.0);

void fragment() {
    COLOR = base_color;
}

保存するとColorRectが最初のコードのように赤一色になります。

赤に戻る

3行目のuniformから始まる行がUniform入力の定義です。vec4は既出の4次元ベクトルを表していて、base_colorが名前です。ここまでがUniform入力定義の必須項目です。これ以降はオプションの指定です。

source_colorはシェーダーヒントやHintと呼ばれるものです。Uniformや変数の特性を指定するために使います。Godotは色をLinear空間で扱います。画像ファイルや色指定はsRGBなのでそのままでは色がおかしくなるので、source_colorヒントをつけてsRGBからLinearに変換するように指定しています。その後ろは初期値でこの例では赤を指定しています。これも省略可能です。

色をマテリアルから変えてみましょう。

  • シーンでColorRectをクリックして選択します

ColorRectを選択

  • インスペクターのMaterial欄をクリックして、Shader Parameters欄をクリックします

MaterialのShader Parameters欄を開く

  • シェーダーに追加したbase_colorBase Colorという名前で追加されています。Base Colorの色の四角をクリックするとカラーパネルが表示されます

カラーパネルを開く

色やα値を変化させるとエディターのColorRectの色も変わるようになりました。

色をマテリアルから設定

Uniform入力ではさまざまなデータを設定することができます。詳しくはマニュアルの以下のページをご覧ください。

シェーディング言語 — Godot Engine (4.x)の日本語のドキュメント

COLORのデフォルトの色

ColorRectが最初に白くなるのは、デフォルトとしてインスペクターの一番上にあるColorが設定されるからです。

ColorRectのCOLORのデフォルトの色

例えば以下のようにCOLORに色を掛ける式にすると、COLORとbase_colorの各要素を掛けた色になります。

// 6:
    COLOR *= base_color;

COLORの色を変えると、COLORとBaseColorのRGBの値をそれぞれ掛けた色になります。

オレンジ x 緑

マテリアルから画像を設定

画像を描画してみます。マテリアルで画像を設定するにはsampler2Dを使います。

// 3:
uniform sampler2D image : source_color;

テクスチャ画像はsampler2D型で受け取ります。これも色のデータなのでsource_colorヒントをつけます。

テクスチャ画像から色を取り出すのは組み込み関数のtextureを使います。fragment()を以下のように書き換えます。

// 5:
void fragment() {
    COLOR *= texture(image, UV);
}

texture関数は、第一引数で取り出し元の画像、第2引数で読み取るUV座標を指定すると該当する場所の色を返します。これで設定した画像にCOLORの色を掛けた絵が描画されるようになります。画像は以下の手順で設定します。

  • シーンでColorRectをクリックして選択します

ColorRectを選択

  • インスペクターのShader Parameters欄のImage欄の空欄をクリックします

Imageをクリック

  • クイックロードをクリックします

クイックロード

  • デフォルトでGodotアイコンのSVGファイルが入っているので、選択して開きます

icon.svgを開く

設定できたらColorRectにGodotのアイコンが表示されます。プロパティのColorで色を変えると画像の色も変わります。

画像の描画

The Book of Shadersを試す

フラグメントシェーダーの雰囲気を味わいました。よりフラグメントシェーダーの理解を深めるために公式ドキュメントでも紹介されているThe Book of ShadersにあるいくつかのコードをGodotで動かしてみます。

グラフを描く

The Book of Shaders: Shaping functionsにある数式のグラフを描くシェーダーをGodotで動かしてみます。新しいシェーダースクリプトに作成します。

  • シーンでColorRectをクリックして選択します

ColorRectを選択

  • インスペクターのMaterialにあるShader欄の右の下矢印をクリックして、新しいシェーダーをクリックします

新しいシェーダー

  • パスをalgorithmic_drawなどに変更して作成します

新しいシェーダーを作成

作成した新しいシェーダーを開く

  • 以下のコードを入力します
// 1:
shader_type canvas_item;

float plot(vec2 st, float pct){
    return  smoothstep( pct-0.02, pct, st.y) -
        smoothstep( pct, pct+0.02, st.y);
}

void fragment() {
    // yに描きたいグラフの計算を代入
    float y = pow(UV.x, 5.0);

    // 以降は共通
    vec3 color = vec3(y);

    float pct = plot(UV, y);
    color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

    COLOR = vec4(color, 1.0);
}

しばらく待つか保存すると記事のシェーダーが描画されます。

Expo

上下逆になっているのは、The Book of Shadersで動いている環境とGodotのColorRectでY軸の向きが逆だからです。

The Book of Shadersで紹介されているシェーダーのコードは少し手を加えれば動きます。以下、書き換えポイントです。

  • 1行目にshader_typeを加える
  • 4行目から12行目までのfloatの精度指定やPIなどの定義は不要なので削除
  • Godotのシェーダーでは以下のような組み込み変数が使えます
    • PIはPI
    • 2PIはTAU
    • 経過秒数はTIME
    • 自然対数はE
  • stに算出しているピクセルの正規座標はUVに置き換えればよい

このコードでの10行目のyに、UV.xをXとして図形を描画する式を代入すればそれを描画します。例えばサインカーブを時間で動かすなら以下のようにします。

// 10:
    float y = sin(UV.x*PI+TIME)*0.5+0.5;

動くSinカーブ

The Book of Shadersに紹介されているさまざまなグラフや色、表現を動かして理解を深めましょう。

その他の式

Algorithmic drawingに掲載されていたその他の式を以下に抜粋します。

    float y = step(0.5, UV.x);
    float y = smoothstep(0.1, 0.9, UV.x);
    float y = smoothstep(0.2, 0.5, UV.x) - smoothstep(0.5, 0.8, UV.x);
    float y = mod(UV.x, 0.5); // xを0.5で割った余り
    float y = fract(UV.x); // 小数部(the fraction part)のみ返す
    float y = ceil(UV.x);  // 切り上げ
    float y = floor(UV.x);  // 切り捨て
    float y = sign(UV.x);  // 負なら-1, ゼロなら0, 正なら1
    float y = abs(UV.x);   // 絶対値
    float y = clamp(UV.x, 0.25, 0.75);  // 指定の範囲内におさめる
    float y = min(0.5, UV.x);   // 小さい方の値を返す
    float y = max(0.5, UV.x);   // 大きい方の値を返す

CellularNoise

最後にCellular Noiseのページから見た目が面白いCellularNoiseの例の実行例です。これも新しくシェーダーを作るとよいかも知れません。

// 1:
shader_type canvas_item;

// Author: @patriciogv
// Title: CellularNoise

vec2 random2( vec2 p ) {
    return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}

void fragment() {
    vec2 st = UV;
    vec3 color = vec3(.0);

    // Scale
    st *= 3.;

    // Tile the space
    vec2 i_st = floor(st);
    vec2 f_st = fract(st);

    float m_dist = 1.;  // minimum distance

    for (int y= -1; y <= 1; y++) {
        for (int x= -1; x <= 1; x++) {
            // Neighbor place in the grid
            vec2 neighbor = vec2(float(x),float(y));

            // Random position from current + neighbor place in the grid
            vec2 point = random2(i_st + neighbor);

            // Animate the point
            point = 0.5 + 0.5*sin(TIME + 6.2831*point);

            // Vector between the pixel and the point
            vec2 diff = neighbor + point - f_st;

            // Distance to the point
            float dist = length(diff);

            // Keep the closer distance
            m_dist = min(m_dist, dist);
        }
    }

    // Draw the min distance (distance field)
    color += m_dist;

    // Draw cell center
    color += 1.-step(.02, m_dist);

    // Draw grid
    color.r += step(.98, f_st.x) + step(.98, f_st.y);

    // Show isolines
    // color -= step(.7,abs(sin(27.0*m_dist)))*.5;

    COLOR = vec4(color,1.0);
}

Cellular Noise

まとめ

Godotのインストールからシェーダーの作成をして、The Book of Shadersのサンプルをいくつか動かしてみました。試した印象としてはUnityのシェーダーより約束事が少なくてスムーズに動かすことができました。フラグメントシェーダーでグラフや形状を描く必要があるのか?と思われるかも知れませんが、基本を知っていればさまざまなエフェクトに応用できます。

ある程度の雰囲気が掴めたら、あらためて公式ドキュメントを読みこむとよいです。必要な情報がしっかりと解説されています。

docs.godotengine.org

今回は2Dで試しましたが3Dでも考え方は同じです。利用できる組み込み変数が増えたり、色を表すだけではなくなるので変数名が変わったりするので、適宜ドキュメントを参照することになりますが使いやすさは変わらないと思います。

以上、Godot Engineのカレンダー | Advent Calendar 2023 - Qiitaの11日目の記事でした。

◆前の日は@NumAniCloudさんのC#プロジェクトを分割して開発しよう、の話です。

◆次の日はきゃべつさんのGodot(C#)シーン派生とクラス派生 #C# - Qiitaです。

よいGodotライフを!

参考・関連URL

Docker環境のRe:VIEWで任意のconfigを指定してrake pdfを実行する

印刷用の挿絵は白黒、電子用はカラーにしたくて、カラー用の画像フォルダーを指定する設定ファイルconfig-denshi.ymlを以下のように作成しました。

# 電子版用の上書き設定

# 継承元設定
inherit: ["config.yml"]

# 電子版を別のファイル名にしたい場合
bookname: ColorImageBook

# 取り込む画像が格納されているディレクトリ。省略した場合は以下
imagedir: images_color

これをDocker環境でどうやったらビルドできるかを調べたのですが答えが見つからず。あれこれ試しているうちに以下の書き方でいけました。

docker-compose run --rm review rake REVIEW_CONFIG_FILE=config-denshi.yml pdf

参考URL

textlintで特定の文字を許可する設定

ややゆるめの文体にしたくて「!」は許可しよう、という場合の設定です。以下のブログを参考にしました。

qiita.com

以下の設定を.textlintrc.jsonに追加して、VSCodeを再起動したらできました。

  "filters": {
    "allowlist": {
      "arrow": [
        ""
      ]
    }
  },

【Windows】Re:VIEWの校正環境を構築する

この記事でRe:VIEWでPDFを作成できる環境を作りました。

am1tanaka.hatenablog.com

せっかくなので校正環境も動かしてみます。textlintとprhの校正をWindowsに導入した時の手順です。

目次

前提

次のものを使います。

書籍フォルダーをVSCodeで開く

作業はVSCodeでできます。

  • VSCodeを開きます
  • 書籍用のワークスペースが開いていなければ、FileメニューからOpen Workspace from File...を選択して、書籍用フォルダー内のワークスペースファイルを選択します
  • TERMINALタブが開いていない場合は、ViewメニューからTerminalを選択して開きます

TERMINALを開く

  • 画面下のTERMINALタブで以下を実行して、textlint本体、textlintのRe:VIEW用のプラグイン、校正ルール各種をインストールします
npm i --save-dev textlint textlint-plugin-review
npm i --save-dev textlint-rule-preset-ja-technical-writing
npm i --save-dev textlint-rule-preset-ja-spacing textlint-rule-prh
npm i --save-dev textlint-rule-preset-jtf-style

インストールが完了して、VSCodeの右下にExtensionのrecommendedが表示されたら歯車アイコンをクリックしてDon't show againをクリックします。エラーはxをクリックして閉じて構いません。

パッケージがインストールできたら続けて設定をします。

New File

  • ファイル名を.textlintrc.jsonにします
  • 次の内容を入力します
{
  "plugins": [
    "review"
  ],
  "rules": {
    "preset-ja-technical-writing": true,
    "preset-ja-spacing": true,
    "preset-jtf-style": true,
    "prh": {
      "rulePaths": [
        "./articles/prh.yml"
      ]
    }
  }
}
  • VSCodeに貼り付けた時にインデントがズレるかも知れません。その場合は例の通りインデント1つ分を半角スペース2文字にしてください
  • 上書き保存します

ルールにTechBoosterさんのものを加えるためにrulePathに./articles/prh.ymlを指定しています。これでprhの校正もtextlintで実行できます。

これでコマンドラインで以下を実行するとtextlintで校正が実行できます。

npx textlint ./articles/*

以下のような感じであれこれ指摘してきたら実行成功です。

実効例

もしno ruleのように表示されて何もそれらしい指摘が表示されなかったら、.textlintrc.jsonのファイル名や内容にスペルミスがないか探してみてください。

VSCodeのExtensionをインストールする

コマンドラインで確認するのは面倒です。VSCodeで随時チェックするようにtextlint用のExtensionをインストールします。

  • VSCodeの左のメニューからExtensionsをクリックします

Extensions

  • Search Extensions in Marketplace欄にatsushienoと入力します
  • Re:VIEWが表示されたらINSTALLします
  • インストールが完了したら次はtextlintと入力します
  • vscode-textlintをINSTALLします

機能拡張

  • vscode-textlintの歯車アイコンをクリックして、Extension Settingsをクリックします

vscode-textlintの設定

  • Workspaceタブをクリックして、Textlint: Languages欄のEdit in settings.jsonをクリックします

Textlint: Language

  • 次のように言語にreviewを書き込みます
{
    "textlint.languages": [        
        "review"
    ]
}
  • Ctrl+Sキーで保存します

以上でインストールと設定完了です。

設定が正しく初期化されるようにVSCodeを閉じます。数秒待ったらVSCodeを起動し直してください。

検証の確認

VSCodeエディター上での動作を確認してみましょう。

  • EXPLORERに切り替えて、articlesフォルダー内のarticle.reをクリックして開きます。

article.reを開く

  • 以下の文章を入力、あるいは、コピペします
Re:VIEW で書くのである。

それは良いことです。

(括弧)
  • Ctrl+Sキーで保存します

保存して、以下のようにあちこちに警告が表示されればtextlintの動作確認完了です。prhのルールも適用されています。

問題個所を指摘!

動かない場合はこれまでの設定を確認したり、VSCodeの再起動などしてみてください。

Re:VIEWファイルのプレビューを表示する

インストールしたRe:VIEWのExtensionでプレビューの表示をしてくれます。

  • article.reを開きます
  • 右上に表示されるShow previewをクリックします

Show preview

プレビューを見ながら執筆できます。

エラーが出る場合はVSCodeを閉じます。少し時間をおいたらVSCodeを開いて再操作してみてください。

articlesフォルダーの全チェック

TERMINALから以下を実行すると、articlesフォルダー内の全てのファイルを校正チェックします。

npx textlint ./articles/*

textlint側の問題があれば表示されます。

textlintのエラー

Macについて補足

自分のMac上ではvscode-textlintがエディター上で動作しませんでした。そこで、prh-languageserverをnpmでインストールして、prh - ProofReadingHelper機能拡張プラグインをインストールしてprhで動かしました。

まとめ

以上でVSCodeRe:VIEWの執筆環境の構築ができました。当初はtextlintとprhを個別に動かすのかと勘違いしていて、prhしか動かずに混乱していました。prhの校正も含めてtextlintでチェックさせるのが正解でした。もう一点引っかかったのが、vscode-textlintにreファイルを認識させる方法でした。設定の書き方が分からず、手探りで"review"と書けば動くことにたどり着きました。

やや苦戦しましたが、環境が構築できればあれこれ自動で文章チェックしてくれるのは大いに助かります。不要な校正があれば、各種ドキュメントを読んで設定をオフにするなどしてカスタマイズするとよさそうです。

関連URL

【Windows】Re:VIEWで書籍用のPDFを作成する

  • このやり方で生成したPDFファイルを日光企画さんに入稿して印刷までできました!(2023/11/13 追記)
  • TechBoosterさんのReVIEW-TemplateのmasterブランチがRe:VIEW5.8に対応したので修正(2024/3/11)

TechBoosterさんのReVIEW-Templateを拝借して、WindowsRe:VIEWで書籍用のPDFを作成する環境を構築する手順です。

目次

前提

次のものを使います。

Docker Desktop

Docker Desktopがインストールされていない場合はvvakame氏のdocker-reviewgithub.comの「Dockerのセットアップ」を参照してインストールしてください。

Re:VIEW image for Dockerの展開」以降の作業は、Re:VIEW-Templateに含まれていてあとでやるのでここでは不要です。

Visual Studio Code

Visual Studio Codeがインストーされていない場合は、次の公式サイトに従ってインストールしてください。

azure.microsoft.com

書籍用のフォルダーを作成する

書籍用のプロジェクトフォルダーはTechBoosterさんが公開しているGitHub - TechBooster/ReVIEW-Template: TechBoosterで利用しているRe:VIEWのテンプレート(B5/A5/電子書籍)を公開していますをダウンロードして使います。書籍などではC89-FirstStepReVIEW-v2が紹介されていますが諸々情報が古いのでTemplateを使った方がよさそうです。

  • Codeボタンをクリックして、Localタブに切り替えて、Download ZIPを選択します

ダウンロード

  • ダウンロードが完了したら、ダウンロードしたフォルダーを開きます
  • ReVIEW-Template-<ブランチ名>.zipファイルを作業用フォルダーに移動します
  • zipファイルを展開します
  • フォルダー名を書籍のタイトルにちなんだものにします(例えばMyBookなど)

展開して名前を設定したフォルダーがRe:VIEWの書籍用フォルダーになります。このフォルダーにRe:VIEWの各種環境を設定します。

書籍フォルダーをVSCodeワークスペースとして開く

最初に書籍用のフォルダーをワークスペースにして、Re:VIEW用の設定ファイルを作成します。

  • Visual Studio Codeを起動します
  • FileメニューからOpen Folder...をクリックします

フォルダーを開く

  • ZIPファイルを展開して名前を付けたフォルダーを開きます
  • 「Do you trust the authors…」と表示されたら、Yesのボタンをクリックします

Yes!

  • 右下に推奨のExtensionが表示されたら不要なので歯車をクリックしてDon’t show againを選択して消します

コンテナは開発しないので不要

  • FileメニューからSave workspace As…をクリックします
  • 名前はそのままで構わないのでSaveボタンをクリックします

これでこのプロジェクト用のワークスペースファイルが作成されました。設定はこのファイルに保存していきます。

PDFを作成する

Docker用の設定ファイルを作成して、テンプレートのPDFを作成してみましょう。まずは環境設定をします。

Re:VIEW用の設定ファイルを作成する

New File

  • ファイル名をDockerfileにします
  • 次の内容を入力します
FROM vvakame/review
  • 上書き保存します
  • 同様にNew Fileを作成して、名前をdocker-compose.ymlにします
  • 次の内容を入力します
version: '3'
services:
  review:
    volumes:
      - ./articles:/book
    build: .
    working_dir: /book
    ports:
      - "127.0.0.1:18000:18000"
  • 上書き保存します

PDFを作成する

Re:VIEWを使ってPDFを生成するために必要なものは揃いました。実際に生成してみましょう。

  • Docker Desktopを起動します
  • VSCodeに切り替えます
  • TerminalメニューからNew Terminalを選択します

VSCodeでターミナルを開く

画面下にTERMINALが表示されます。ここでコマンドを実行できます。

次のコマンドでPDFが生成されます。

docker-compose run --rm review rake pdf

しばらく待つと「SCCESS」と表示されて生成完了です。書籍用のフォルダー内のarticlesフォルダーの中にReVIEW-Template.pdfが生成されます。ダブルクリックなどして開くとテンプレートのサンプルが確認できます。

サンプルのPDF

まとめ

Docker DesktopとVisual Studio Codeをインストールして、TechBoosterさんのRe:VIEW-Templateリポジトリから書籍用フォルダーのひな形を作成しました。Docker用の設定ファイルを作成したらDocker Desktopを開き、docker-compose run --rm review rake pdfのコマンドでPDFが作成できます。docker-compose.ymlが公式サンプルのままだと動かなかったので、テンプレートにあわせたものを掲載しました。

articlesフォルダー内のドキュメントを読んだり、各種設定ファイルを編集することで書籍用のPDFファイルを作成することができます。技術書の書き方はTechBoosterさんの以下のリポジトリや、そこで紹介されている書籍をお求めいただくと分かりやすい解説が手に入ります。

github.com

冒頭にも追記しましたが、この方法で作成したPDFファイルを日光企画さんに入稿して無事に印刷ができました!トンボやノンブルの設定もRe:VIEW-Templateのままで大丈夫でした。表紙のデータも日光企画さんならオンデマンドの平とじのフルカラーセットのデフォルトの印刷ならRGB入稿ができます。今回はライセンスがあったのでクリスタで最終的な表紙データは作成しましたが、GIMPやpaint.netでもいけそうです。条件があるので保証はできませんし自己責任になりますが、ひとまず無料ツールで入稿に必要なデータは作れました。(2023/11/13追記)

これでPDFは作成できるようになりましたが、校正ツールをWindowsで動かすのに苦戦しました。それについては以下のブログにまとめました。

am1tanaka.hatenablog.com

関連URL