2020/01/19(日) [n年前の日記]
#1 [love2d] Love2DでMSAAを有効にした状態をテスト
Love2D 上で MSAA を有効にしたら、画像の描画がどう変わってくるのか、1ドット未満で移動・描画した場合に見た目はどうなるのか気になったので、そのあたりをテスト。
環境は Windows10 x64 1909 + Love2d 11.3。GPUは NVIDIA GeForce GTX 1060 6GB。
環境は Windows10 x64 1909 + Love2d 11.3。GPUは NVIDIA GeForce GTX 1060 6GB。
◎ 動機。 :
_Chasys Draw IES
の、Object Animation Mode を触っていて、キーフレームの指定の仕方がやっぱり分かりづらいな、と思えてきて。
例えば、アニメ制作ツールの _Synfig Studio は、そのあたりの仕様はどうだったかなと…。Synfig Studio 1.3.11 を起動して確認しようとしたものの、動作がとにかく遅いから、その場でプレビュー再生なんてできないし、何かの拍子に落ちてしまうしで、UI仕様以前にコレを使うのはなかなか厳しいものがあるなと徐々にゲンナリしてしまって…。
そこで、ふと。画像を読み込んで動かすだけなら、ゲーム制作ライブラリ・フレームワークの類を使って実装できないものだろうかと妄想してしまったり。ゲーム用のアレコレなら、リアルタイムに画像を動かすなんて朝飯前。サクサクとプレビュー再生して快適に作業できるのでは、と。
ただ、その手のライブラリは、1ドット単位での描画・移動になってしまいそう。各画像がガクガクと動いてしまったら、アニメ制作ツールとしてはイマイチ…。
などと思ったものの。最近のPC環境・GPUなら、SSAA だの、MSAA だの、FXAA だのが使えるのではなかったか、と思い出して。
_【Unity】アンチエイリアシングの概説(SSAA / MSAA / FXAA / TemporalAA) - LIGHT11
_Supersampling - Wikipedia
_ASCII.jp:さらばギザギザ! NVIDIAがアンチエイリアスを技術解説 (1/2)
ググってみたら、Love2D も、Canvas に MSAA を指定できるようでもあり。
_love.graphics.newCanvas (日本語) - LOVE
_Canvas:getMSAA (日本語) - LOVE
_Canvas (日本語) - LOVE
_What is MSAA and how should I use it ? - LoVE
_Config Files (日本語) - LOVE
_love.graphics.getSystemLimits (日本語) - LOVE
_GraphicsLimit (日本語) - LOVE
であれば、ちょっと試してみようかなと。はたして1ドット未満のじわじわとした動きを、Love2D でも実現できるのかどうか。みたいな。
例えば、アニメ制作ツールの _Synfig Studio は、そのあたりの仕様はどうだったかなと…。Synfig Studio 1.3.11 を起動して確認しようとしたものの、動作がとにかく遅いから、その場でプレビュー再生なんてできないし、何かの拍子に落ちてしまうしで、UI仕様以前にコレを使うのはなかなか厳しいものがあるなと徐々にゲンナリしてしまって…。
そこで、ふと。画像を読み込んで動かすだけなら、ゲーム制作ライブラリ・フレームワークの類を使って実装できないものだろうかと妄想してしまったり。ゲーム用のアレコレなら、リアルタイムに画像を動かすなんて朝飯前。サクサクとプレビュー再生して快適に作業できるのでは、と。
ただ、その手のライブラリは、1ドット単位での描画・移動になってしまいそう。各画像がガクガクと動いてしまったら、アニメ制作ツールとしてはイマイチ…。
などと思ったものの。最近のPC環境・GPUなら、SSAA だの、MSAA だの、FXAA だのが使えるのではなかったか、と思い出して。
_【Unity】アンチエイリアシングの概説(SSAA / MSAA / FXAA / TemporalAA) - LIGHT11
_Supersampling - Wikipedia
_ASCII.jp:さらばギザギザ! NVIDIAがアンチエイリアスを技術解説 (1/2)
ググってみたら、Love2D も、Canvas に MSAA を指定できるようでもあり。
_love.graphics.newCanvas (日本語) - LOVE
_Canvas:getMSAA (日本語) - LOVE
_Canvas (日本語) - LOVE
_What is MSAA and how should I use it ? - LoVE
_Config Files (日本語) - LOVE
_love.graphics.getSystemLimits (日本語) - LOVE
_GraphicsLimit (日本語) - LOVE
であれば、ちょっと試してみようかなと。はたして1ドット未満のじわじわとした動きを、Love2D でも実現できるのかどうか。みたいな。
◎ 実験結果。 :
実験用のソースを書いて動かしてみた。画面のキャプチャ動画は以下。
ということで、今時のゲーム制作用フレームワーク + それなりのGPU・ビデオカードなら、1ドット未満で画像をじわじわと動かすこともフツーにできるっぽい。
であれば、それらを使って簡易アニメ制作ツール・アプリを作れるかもしれない。いやまあ、おそらく既にそういうアプリがどこかにありそうな気もするけれど…。
- 左側、MSAAを有効にしてないCanvas、かつ、フィルタを nearest に設定して画像を読み込んで描画した状態では、1ドット単位でガクガクと動いてる。
- 右側、MSAAを16に設定したCanvas、かつ、フィルタを linear に設定して画像を読み込んで描画した状態では、1ドット未満でじわじわと動いてる。
ということで、今時のゲーム制作用フレームワーク + それなりのGPU・ビデオカードなら、1ドット未満で画像をじわじわと動かすこともフツーにできるっぽい。
であれば、それらを使って簡易アニメ制作ツール・アプリを作れるかもしれない。いやまあ、おそらく既にそういうアプリがどこかにありそうな気もするけれど…。
◎ ソース。 :
_conf.lua
_main.lua
使用画像は以下。
_bgtile.png
実行の仕方は…。conf.lua、main.lua、画像の3ファイルを任意のフォルダに入れて、「love フォルダ名」で実行できる。
function love.conf(t) t.version = "11.3" -- love2d version t.window.title = "MSAA enable scroll test - love2d" t.window.vsync = 1 t.window.width = 640 t.window.height = 480 t.window.msaa = 0 -- t.window.fullscreen = true -- t.window.fullscreentype = "exclusive" end
_main.lua
function love.load() limits = love.graphics.getSystemLimits() love.graphics.setDefaultFilter("nearest", "nearest") img0 = love.graphics.newImage("bgtile.png") love.graphics.setDefaultFilter("linear", "linear") img1 = love.graphics.newImage("bgtile.png") local w, h w, h = love.graphics.getDimensions() settings = {} settings.msaa = 0 canvas0 = love.graphics.newCanvas(w, h, settings) settings.msaa = 16 canvas1 = love.graphics.newCanvas(w, h, settings) y = 32 end function love.update(dt) y = y + 2.0 * dt end function love.draw() love.graphics.clear(0.25, 0.41, 0.88, 1.0) h = img0:getHeight() love.graphics.setCanvas(canvas0) love.graphics.clear() love.graphics.setColor(1.0, 1.0, 1.0, 1.0) love.graphics.draw(img0, 0, y) love.graphics.setCanvas(canvas1) love.graphics.clear() love.graphics.setColor(1.0, 1.0, 1.0, 1.0) love.graphics.draw(img1, 322, y) love.graphics.setCanvas() love.graphics.draw(canvas0, 0, 0) love.graphics.draw(canvas1, 0, 0) love.graphics.print("FPS: " .. tostring(love.timer.getFPS()), 2, 2) love.graphics.print("MSAA limit : " .. limits["canvasmsaa"], 2, 20) local tx = 320 - 8 * 7 love.graphics.print("nearest", tx, 40) love.graphics.print("MSAA: " .. tostring(canvas0:getMSAA()), tx, 60) tx = 328 love.graphics.print("linear", tx, 40) love.graphics.print("MSAA: " .. tostring(canvas1:getMSAA()), tx, 60) end function love.keypressed(key, isrepeat) if key == "escape" then -- ESC key to exit love.event.quit() end end
使用画像は以下。
_bgtile.png
実行の仕方は…。conf.lua、main.lua、画像の3ファイルを任意のフォルダに入れて、「love フォルダ名」で実行できる。
◎ 少し解説。 :
conf.lua 内の t.window.msaa = 0 を、例えば 8 だの 16 だのにすれば、ウインドウ内に用意されたデフォルトのキャンバスに対して、MSAA を有効にしてくれる。
ただ、conf.lua 内で指定したMSAA値は、newCanvas() でキャンバスを新規作成した際には反映されないようで…。その際は、MSAA値を指定しながらキャンバスを新規作成しないといけない模様。
上記のソースでは、love.load() 内の、settings.msaa = 16 でMSAA値を指定して、newCanvas() に settings も渡すことで、MSAA を有効にしたキャンバスを作成している。
ただ、conf.lua 内で指定したMSAA値は、newCanvas() でキャンバスを新規作成した際には反映されないようで…。その際は、MSAA値を指定しながらキャンバスを新規作成しないといけない模様。
上記のソースでは、love.load() 内の、settings.msaa = 16 でMSAA値を指定して、newCanvas() に settings も渡すことで、MSAA を有効にしたキャンバスを作成している。
settings = {} settings.msaa = 16 canvas1 = love.graphics.newCanvas(w, h, settings)
[ ツッコむ ]
以上です。