mieki256's diary



2017/12/19(火) [n年前の日記]

#1 [love2d] love2dのShaderで円柱っぽいBG描画を試したり

昔、 _DXRubyのShader機能で円柱だかパイプだかっぽいBG描画を試した ことがあったのだけど。それを love2d でもやれないものかなと思えてきたので試したり。環境は Windows10 x64 + love2d 0.10.2。

こんな感じに。

shader_test09_pipe_ss01.gif

shader_test09_pipe_ss02.gif

何かビミョーにおかしいような気もするけど…。まあ、それっぽくなってるから、いいか…。でも、考え方、あるいは計算式が間違ってる可能性も否定できず。

画像とソース。 :

画像は以下。

_grid_bg_640x640.png
_scifi_bg_640x640.png

ソースは以下。

_conf.lua
function love.conf(t)
  t.window.title = "Shader test 09 pipe"
  t.window.vsync = true
  t.window.resizable = true
  t.window.width = 640
  t.window.height = 480
  -- t.window.fullscreen = true
  -- t.window.fullscreentype = "exclusive"
end

_main.lua
-- Shader test 09 pipe

function love.load()
  love.graphics.setDefaultFilter("nearest", "nearest")
  scr_w, scr_h = 640, 480
  canvas = love.graphics.newCanvas(scr_w, scr_h)

  img = love.graphics.newImage("grid_bg_640x640.png")
  -- img = love.graphics.newImage("scifi_bg_640x640.png")
  img:setFilter("linear", "linear")

  -- make shader
  local shadercode = [[
    extern number scr_dist;
    extern number r;
    extern number angle_max;
    extern number start_x;
    extern number start_y;

    vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords ) {
      float sx = texture_coords.x - 0.5;
      float sy = texture_coords.y - 0.5;
      float pz = r * cos(atan(sy, scr_dist));
      float u = sx * pz / scr_dist;
      float v = atan(sy, scr_dist) / angle_max;
      texture_coords.x = mod(u + 0.5 + start_x, 1.0);
      texture_coords.y = mod(v + 0.5 + start_y, 1.0);
      vec4 texcolor = Texel(texture, texture_coords);
      return texcolor * color;
    }
  ]]
  myshader = love.graphics.newShader(shadercode)
  local scr_dist = 0.6
  myshader:send("scr_dist", scr_dist)
  myshader:send("r", scr_dist + 0.3)
  myshader:send("start_x", 0.0)
  myshader:send("start_y", 0.0)
  myshader:send("angle_max", math.atan2(0.5, scr_dist))

  v = 0.0
  px = (scr_w - img:getWidth()) / 2
  py = (scr_h - img:getHeight()) / 2
end

function love.update(dt)
  v = v + dt
  myshader:send("start_x", v * 0.2)
  myshader:send("start_y", v * 0.4)
end

function love.draw()
  love.graphics.setCanvas(canvas)
  love.graphics.clear(0, 0, 0, 255)

  love.graphics.setColor(255, 255, 255)
  love.graphics.setShader(myshader)
  love.graphics.draw(img, px, py)
  love.graphics.setShader()

  love.graphics.setCanvas()

  -- draw canvas to window
  wdw_w, wdw_h = love.graphics.getDimensions()
  scr_scale = math.min((wdw_w / scr_w), (wdw_h / scr_h))
  scr_ox = (wdw_w - (scr_w * scr_scale)) / 2
  scr_oy = (wdw_h - (scr_h * scr_scale)) / 2
  love.graphics.setColor(255, 255, 255)
  love.graphics.draw(canvas, scr_ox, scr_oy, 0, scr_scale, scr_scale)

  love.graphics.print("FPS: "..tostring(love.timer.getFPS()), 10, 10)
end

function love.keypressed(key, isrepeat)
  if key == "escape" then
    -- ESC to exit
    love.event.quit()
  elseif key == "f11" then
    -- toggle fullscreen
    if love.window.getFullscreen() then
      love.window.setFullscreen(false)
    else
      love.window.setFullscreen(true)
    end
  end
end

画像もソースも、License : CC0 / Public Domain ってことで。

Shader部分の仕組みというか考え方は、 _DXRuby版 と同じなのでそちらを参照してもらえればと。

余談。 :

HLSL にはatan2() があるけれど GLSL には atan2() が無くてどうしようと思ったら、GLSL の場合、atan() が atan2() 相当らしくて。 _GLSLをHLSLに書き換える - Qiita が参考になりました。ありがたや。ちなみに、件のページには atan(x,y) と書いてあるけど、たぶん atan(y,x) ではあるまいか。

今回、利用するテクスチャに linearフィルタを設定したら、見た目がちょっとマシになったように感じたり。処理内容によっては、その手のフィルタ設定が効果を発揮する場合もあるようだなと。

以上です。

過去ログ表示

Prev - 2017/12 - Next
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project