Difference between revisions of "love.graphics.newShader (日本語)"

m (注釈)
(retranslated and update.)
 
Line 1: Line 1:
{{newin (日本語)|[[0.9.0]]|090|type=関数|text=[[love.graphics.newPixelEffect (日本語)|love.graphics.newPixelEffect]] から名称変更}}
+
{{newin (日本語)|[[0.9.0 (日本語)|0.9.0]]|090|type=関数|text=[[love.graphics.newPixelEffect (日本語)|love.graphics.newPixelEffect]] から名称変更}}
 
{{newobjectnotice (日本語)}}
 
{{newobjectnotice (日本語)}}
ハードウェアにより加速化された頂点またはピクセル・エフェクトに対して Shader オブジェクトを新規作成します。Shader には頂点シェーダーのコード、ピクセル・シェーダーのコード、のいずれか、または両方が含まれています。
+
ハードウェア加速化による頂点またはピクセル・エフェクトで Shader オブジェクトを新規作成します。 Shader は頂点シェーダーやピクセル・シェーダーのコードの一方あるいは両方を有しています。
  
Shader は描画時にビデオカードにて実行される小型のプログラムです。頂点シェーダーは各頂点に対して一括で実行されます (例えば、 Image では頂点が4つあります。 角ごとに一つずつ。 [[Mesh (日本語)|Mesh]] では、さらに存在する場合があります)。ピクセル・シェーダーは描画されたオブジェクトが関係する画面上の各ピクセルに対して一括で実行します。全てのオブジェクトの頂点が頂点シェーダーにより処理された後にピクセル・シェーダーのコードは実行されます。
+
Shader は描画時にグラフィックス・カードで実行される小型のプログラムです。頂点シェーダーは各頂点に対して一括で実行されます (例えば Image の頂点は4つです。 角ごとに1つずつ。 [[Mesh (日本語)|Mesh]] では、それ以上あります)。ピクセル・シェーダーは描画されたオブジェクトが関係する画面上の各ピクセルに対して一括で実行します。全てのオブジェクトの頂点を頂点シェーダーで処理した後にピクセル・シェーダーのコードを実行します。
  
 
== 関数 ==
 
== 関数 ==
Line 11: Line 11:
 
</source>
 
</source>
 
=== 引数 ===
 
=== 引数 ===
{{param|string|code|ピクセル・シェーダーまたは頂点シェーダーのコード、またはコードのあるファイルを指すファイルの名称。}}
+
{{param|string|code|頂点シェーダー、あるいはピクセル・シェーダーで用いるコード (テキスト、またはファイル名)。}}
 
=== 返値 ===
 
=== 返値 ===
{{param|Shader|shader|描画操作で使用する Shader オブジェクト。}}
+
{{param|Shader|shader|描画操作で用いるShader オブジェクト。}}
  
 
== 関数 ==
 
== 関数 ==
Line 21: Line 21:
 
</source>
 
</source>
 
=== 引数 ===
 
=== 引数 ===
{{param|string|pixelcode|ピクセル・シェーダーのコード、またはコードのあるファイルを指すファイルの名称。}}
+
{{param|string|pixelcode|ピクセル・シェーダーで用いるコード (テキスト、またはファイル名)。}}
{{param|string|vertexcode|頂点シェーダーのコード、またはコードのあるファイルを指すファイルの名称。}}
+
{{param|string|vertexcode|頂点シェーダーで用いるコード (テキスト、またはファイル名)。}}
 
=== 返値 ===
 
=== 返値 ===
{{param|Shader|shader|描画操作で使用する Shader オブジェクト。}}
+
{{param|Shader|shader|描画操作で用いるShader オブジェクト。}}
 
=== 注釈 ===
 
=== 注釈 ===
引数 pixelcode および vertexcode は任意の順序にすることができます。
+
引数 pixelcode vertexcode は任意順です。
  
 
== シェーダー言語 ==
 
== シェーダー言語 ==
シェーダーは Lua ではプログラミングできませんが、代わりに特別なエフェクト言語を使用します。基本的にエフェクト言語は [http://www.opengl.org/sdk/docs/manglsl/ GLSL 1.20] ([http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.20.8.pdf 仕様書]) であり既存の型へ若干の別名を追加したものです:
+
 
 +
シェーダーのプログラミングは Lua ではなく、シェーダー専用言語である GLSL を使用します。ただし、便宜上の都合でエイリアスとエントリポイントは少し異なります。 GLSL のシンタックスは C と非常によく似ています。 LÖVE で用意されているエイリアスの使用は一切強制していませんが、 GLSL 3 では <code>texture2D</code> は動作しません。ですが、 <code>Texel</code> は全 GLSL のバージョンで動作します。よって、 <code>texture2D</code> ではなく <code>Texel</code> の使用を推奨します。
  
 
{|cellpadding="5"
 
{|cellpadding="5"
 
!GLSL              || LÖVE シェーダー言語
 
!GLSL              || LÖVE シェーダー言語
 
|-
 
|-
|float              || number
+
|sampler2D          || Image
 +
|-
 +
| sampler2DArray          || ArrayImage
 +
|-
 +
| samplerCube          || CubeImage
 +
|-
 +
| sampler3D          || VolumeImage
 +
|-
 +
|texture2D(tex, uv) (GLSL 1 の場合) || Texel(tex, uv)
 +
|-
 +
|texture(tex, uv) (GLSL 3 の場合) || Texel(tex, uv)
 
|-
 
|-
|sampler2D          || Image
+
|float              || number (廃止予定)
 +
|-
 +
|uniform            || extern (廃止予定)
 +
|}
 +
 
 +
 
 +
使用する GLSL のバージョンはシェーダーのソースコードファイルの先頭行に <code>#pragma language glsl3</code> を記述したかどうか、あるいは LÖVE をデスクトップ、またはモバイル機器のどちらで実行しているかどうかによります:
 +
 
 +
{|cellpadding="5"
 +
!LÖVE シェーダー言語 || デスクトップ版 GLSL バージョン || モバイル版 GLSL バージョン
 
|-
 
|-
|uniform            || extern
+
|glsl1 (デフォルト)      || [http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.20.8.pdf GLSL 1.20] || [https://www.khronos.org/files/opengles_shading_language.pdf GLSL ES 1.00]
 
|-
 
|-
|texture2D(tex, uv) || Texel(tex, uv)
+
|glsl3                    || [https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.3.30.pdf GLSL 3.30] || [https://www.khronos.org/registry/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf GLSL ES 3.00]
 
|}
 
|}
  
頂点シェーダーのコードには最低でも一本の関数が含まれており、その名前は <code>position</code> であり、関数は画面空間へ描画されたオブジェクトから変形された頂点の位置を生成します。
+
一部の旧式システムで GLSL 3 は[[GraphicsFeature (日本語)|非対応]]です。起動時に [[love.graphics.getSupported (日本語)|love.graphics.getSupported]] で対応状況を確認してください。
 +
 
 +
 
 +
頂点シェーダーのコードには最低でも一本の関数があります。名前は <code>position</code> です。関数は画面空間へ描画されたオブジェクトから変換した頂点の位置を生成します。
  
ピクセルシェーダーのコードには最低でも一本の関数が含まれており、その名前は <code>effect</code> であり、関数は描画されたオブジェクトが接触する各ピクセルに対して画面上へ混合される色を生成します。
+
ピクセルシェーダーのコードには最低でも一本の関数があります。名前は <code>effect</code> です。関数は描画されたオブジェクトが接触する各ピクセルに対して画面上へ混合処理をした色を生成します。
  
さらに、 LÖVE は色値を与えるために <code>VideoTexel(uv)</code> 関数により描画を行って現在の位置に Video を描画します。Video は多数のテクスチャにより、 YUV データとして描画を行い、そしてシェーダーへ変換されるため、 Texel (テクセル) 関数は使用できません。
+
デフォルトで LÖVE には実用的な[[Shader Variables (日本語)|シェーダー変数]] が用意されています。さらに、 LÖVE は色値を与えるために <code>VideoTexel(uv)</code> 関数により描画を行って現在の位置に Video を描画します。Video は複数のテクスチャにより、 YUV データとして描画とシェーダーへの変換が行われるため、 Texel (テクセル) 関数は使用できません。
  
== ピクセル・シェーダー関数 ==
+
== ピクセルシェーダー関数 ==
オブジェクト描画時に、ピクセルシェーダの <code>effect</code> 関数は何百回または何千回も呼び出されます: 画面において各ピクセルがオブジェクトが接触する場合に。そのような場合は、ピクセルシェーダは頂点シェーダーの後に実行されます。
+
オブジェクト描画時にピクセルシェーダ関数 <code>effect</code> は何百~何千回も呼び出されます: 画面において各ピクセルがオブジェクトが接触するとき。その場合、ピクセルシェーダは頂点シェーダーの後に実行されます。
 
=== 概要 ===
 
=== 概要 ===
 
<source lang="glsl">
 
<source lang="glsl">
vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords )
+
vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
 
</source>
 
</source>
 
=== 引数 ===
 
=== 引数 ===
{{param|vec4|color|[[love.graphics.setColor (日本語)|love.graphics.setColor]] にて設定する描画色または頂点ごとの [[Mesh (日本語)|Mesh]] の色。}}
+
{{param|vec4|color|[[love.graphics.setColor (日本語)|love.graphics.setColor]] にて設定する描画色、または頂点ごとの [[Mesh (日本語)|Mesh]] の色。}}
{{param|Image|texture|テクスチャとして描画される画像または Canvas です。}}
+
{{param|Image|tex|テクスチャとして描画される画像または Canvas です。}}
{{param|vec2|texture_coords|ピクセルデータ取得先のテクスチャ内の位置です。テクスチャ座標は左上角 (0, 0) を起点とする場合に、通常は (0, 0) から(1, 1) までの範囲で標準化されます。}}
+
{{param|vec2|texture_coords|ピクセルデータ取得先のテクスチャ内の位置です。左上角 (0, 0) を起点とするテクスチャ座標のとき、通常は (0, 0) から (1, 1) までの範囲を正規化します。}}
{{param|vec2|screen_coords|画面上のピクセルの座標。ピクセルの座標は標準化されません (テクスチャの座標とは異なります)。 (0.5, 0.5) は画面左上 (LÖVE version [[0.10.0]] 以前では画面左下)を表します。}}
+
{{param|vec2|screen_coords|画面上のピクセルの座標。ピクセルの座標は正規化されません (テクスチャの座標とは異なります)。 (0.5, 0.5) は画面左上 (LÖVE version [[0.10.0 (日本語)|0.10.0]] 以前では画面左下) を表します。}}
  
 
=== 返値 ===
 
=== 返値 ===
 
{{param|vec4|output_color|ピクセルの色。}}
 
{{param|vec4|output_color|ピクセルの色。}}
 
=== 注釈 ===
 
=== 注釈 ===
ピクセルシェーダーが使用されていない場合、 LÖVE は標準のものを使用します。これは、そのコードです:
+
ピクセルシェーダー未使用時、 LÖVE 内部にある下記のデフォルト・コードを使用します:
 
<source lang="glsl">
 
<source lang="glsl">
vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
+
vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords)
 
{
 
{
     vec4 texturecolor = Texel(texture, texture_coords);
+
     vec4 texturecolor = Texel(tex, texture_coords);
 
     return texturecolor * color;
 
     return texturecolor * color;
 
}
 
}
 
</source>
 
</source>
  
または Video では
+
Video では、
 
<source lang="glsl">
 
<source lang="glsl">
vec4 effect(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
+
vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords)
 
{
 
{
 
     vec4 texturecolor = VideoTexel(texture_coords);
 
     vec4 texturecolor = VideoTexel(texture_coords);
Line 82: Line 105:
 
</source>
 
</source>
  
複数の Canvas が同時に表示される場合は (複数の Canvas を [[love.graphics.setCanvas (日本語)|love.graphics.setCanvas]] への引数として渡したとき)、  Canvas ごとに個別の色を出力するために '''effect''' の代わりに '''effects''' 関数を使用できます。それは次のプロトタイプ(原型)があります:
+
複数の Canvas を同時表示するときは (複数の Canvas を [[love.graphics.setCanvas (日本語)|love.graphics.setCanvas]] への引数として渡したとき)、各 Canvas ごとに個別の色を出力するために '''vec4 effect''' ではなく '''void effect''' (引数なし!)  関数を使用します。このために下記のプロトタイプ (原型) があります:
 
<source lang="glsl">
 
<source lang="glsl">
void effects(vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords)
+
void effect()
 
{
 
{
     // love_Canvases vec4 色の書き込み可能な配列です。各索引は Canvas に一致しています。
+
     // love_Canvases は書き込み可能な vec4 color の配列です。各インデックスは Canvas に対応しています.
     // 重要: 使用中の全ての Canvas へ値を代入しなければ、不具合が発生します。
+
     // IMPORTANT: 重要: 使用中の全ての Canvas へ値を代入しなければ、不具合が発生します。
 
     love_Canvases[0] = color;
 
     love_Canvases[0] = color;
 
     love_Canvases[1] = color + vec4(0.5);
 
     love_Canvases[1] = color + vec4(0.5);
Line 93: Line 116:
 
}
 
}
 
</source>
 
</source>
 +
 +
Canvas が一枚のバージョン (<code>vec4 effect</code>) に渡された引数を取得したいならば、組み込み[[Shader Variables (日本語)|シェーダー変数]]を参照してください。
 +
 +
<code>color</code> は <code>VaryingColor</code> であり、 <code>texture_coords</code> は <code>VaryingTexCoord</code> です。そして <code>screen_coords</code> は <code>love_PixelCoord</code> です。
 +
 +
描画操作で用いられたテクスチャにアクセスしたいならば、 <code>MainTex</code> の名前で uniform テクスチャを定義するか、または [[Shader:send (日本語)|Shader:send]] へ送信します。
  
 
== 頂点シェーダー関数 ==
 
== 頂点シェーダー関数 ==
Line 101: Line 130:
 
=== 引数 ===
 
=== 引数 ===
 
{{param|mat4|transform_projection|変換行列は [[love.graphics.translate (日本語)|love.graphics.translate]] および関連関数により影響を受けて正投影の行列と組み合わされます。}}
 
{{param|mat4|transform_projection|変換行列は [[love.graphics.translate (日本語)|love.graphics.translate]] および関連関数により影響を受けて正投影の行列と組み合わされます。}}
{{param|vec4|vertex_position|現在の頂点における生の未変形位置。}}
+
{{param|vec4|vertex_position|現在の頂点における生の未変換位置。}}
 
=== 返値 ===
 
=== 返値 ===
{{param|vec4|output_pos|現在の頂点における最終変形位置。}}
+
{{param|vec4|output_pos|The final transformed position of the current vertex.}}
 
+
=== 注釈 ===
== 注釈 ==
+
頂点シェーダー未使用時、 LÖVE はデフォルト・コードを使用します:
頂点シェーダーが使用されていない場合、 LÖVE は標準のものを使用します。これは、そのコードです:
 
 
<source lang="glsl">
 
<source lang="glsl">
 
vec4 position(mat4 transform_projection, vec4 vertex_position)
 
vec4 position(mat4 transform_projection, vec4 vertex_position)
 
{
 
{
     // 行列乗算を行うときに演算順序は重要です。
+
     // 行列乗算時の演算順序は重要です。
 
     return transform_projection * vertex_position;
 
     return transform_projection * vertex_position;
 
}
 
}
Line 116: Line 144:
  
 
== 注釈 ==
 
== 注釈 ==
頂点シェーダーのコードは画面へ描画される頂点毎に対して実行され(例えば love.graphics.rectangle は頂点を4つ生成します)、ピクセル・シェーダーへ頂点毎の配色およびテクスチャ座標の値を送信するのと同様に、原点座標から頂点位置へ画面空間を変形するために使用されます。
+
頂点シェーダーのコードは、画面に描画される全ての頂点 (例えば love.graphics.rectangle では頂点を4つ生成します) と元座標から画面空間への頂点座標の変換処理、さらにピクセル・シェーダーへ頂点毎の配色とテクスチャ座標の値などの情報送信時に実行されます。
  
ピクセル・シェーダーのコードは描画されたオブジェクトに接触している画面上の各ピクセルに対して実行され、大抵は画像から読み込んで、画面上の対象ピクセルと混合する色を生成するのに使用されます。時にはピクセル・シェーダーは断片的シェーダーとも呼ばれています。
+
ピクセル・シェーダー (別名はフラグメント・シェーダー) のコードは描画されたオブジェクトに接触している画面上の全ピクセルに対して実行します。大抵は画像から読み込んで、画面上の対象ピクセルと混合する色を生成するのに使用します。
  
<code>varying</code>  キーワードは頂点シェーダーおよび頂点間においての補間、さらにピクセル・シェーダーへ渡す値を設定するために使用できます。
+
<code>varying</code>  キーワードは頂点シェーダー、および頂点間の補間、さらにピクセル・シェーダーへ渡す値を設定するために使用します。
  
明確な頂点のコードは <code>#ifdef VERTEX .. #endif</code> および明確なピクセルのコードは <code>#ifdef PIXEL .. #endif</code> のブロックで囲むことにより、頂点およびピクセル・シェーダーのコードは1ファイルまたは文字列にて組み合わせることができます。
+
頂点シェーダーのコードを <code>#ifdef VERTEX .. #endif</code> で、ピクセル・シェーダーのコードは <code>#ifdef PIXEL .. #endif</code> のブロックで囲むことで、頂点とピクセル・シェーダーのコードをファイル、または文字列内で併用できます。
  
 
== 組み込み変数 ==
 
== 組み込み変数 ==
LÖVE はピクセルおよび頂点シェーダーの両方に対して若干の組込変数を提供します。こちらに全ての一覧があります: [[Shader Variables (日本語)|シェーダー変数]]
+
LÖVE ではピクセル・シェーダー、および頂点シェーダーで使える組み込み関数を用意しています。こちらに全リストがあります: [[Shader Variables (日本語)|シェーダー変数]]
  
 
== 用例 ==
 
== 用例 ==
=== シェーダーが設定されていない場合は動作する頂点およびピクセル・シェーダーのコードを使用してシェーダーを作成します。 ===
+
=== 頂点とピクセル・シェーダーのコードでシェーダーを作成します (シェーダー未設定時に動作)。 ===
 
<source lang="lua">
 
<source lang="lua">
function love.load()
+
local pixelcode = [[
    local pixelcode = [[
+
    vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
        vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords )
+
    {
        {
+
        vec4 texcolor = Texel(tex, texture_coords);
            vec4 texcolor = Texel(texture, texture_coords);
+
        return texcolor * color;
            return texcolor * color;
+
    }
        }
+
]]
    ]]
 
  
    local vertexcode = [[
+
local vertexcode = [[
        vec4 position( mat4 transform_projection, vec4 vertex_position )
+
    vec4 position( mat4 transform_projection, vec4 vertex_position )
        {
+
    {
            return transform_projection * vertex_position;
+
        return transform_projection * vertex_position;
        }
+
    }
    ]]
+
]]
  
    shader = love.graphics.newShader(pixelcode, vertexcode)
+
shader = love.graphics.newShader(pixelcode, vertexcode)
end
 
  
 
function love.draw()
 
function love.draw()
 
     love.graphics.setShader(shader)
 
     love.graphics.setShader(shader)
    -- なにか描画するもの
+
    -- 描画処理
 
     love.graphics.setShader()
 
     love.graphics.setShader()
    -- さらになにか描画するもの
+
    -- 描画処理の続き
 
end
 
end
 
</source>
 
</source>
  
=== '''varying''' キーワードによりピクセルシェーダーにある事前変形された頂点位置をアクセスします。 ===
+
=== '''varying''' キーワードでピクセルシェーダー内の事前変換した頂点位置へアクセスします。 ===
 
==== 頂点シェーダーのコード ====
 
==== 頂点シェーダーのコード ====
 
<source lang="glsl">
 
<source lang="glsl">
Line 172: Line 198:
 
varying vec4 vpos;
 
varying vec4 vpos;
  
vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords )
+
vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
 
{
 
{
 
     texture_coords += vec2(cos(vpos.x), sin(vpos.y));
 
     texture_coords += vec2(cos(vpos.x), sin(vpos.y));
     vec4 texcolor = Texel(texture, texture_coords);
+
     vec4 texcolor = Texel(tex, texture_coords);
 
     return texcolor * color;
 
     return texcolor * color;
 
}
 
}
 
</source>
 
</source>
  
=== 上述の例では '''#ifdef''' を使用して1つの文字列またはファイルへ組み合わせます。 ===
+
=== '''#ifdef''' で上述の用例に記述されている文字列、またはファイルを一つにまとめます。 ===
 
<source lang="glsl">
 
<source lang="glsl">
 
varying vec4 vpos;
 
varying vec4 vpos;
Line 193: Line 219:
  
 
#ifdef PIXEL
 
#ifdef PIXEL
vec4 effect( vec4 color, Image texture, vec2 texture_coords, vec2 screen_coords )
+
vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
 
{
 
{
 
     texture_coords += vec2(cos(vpos.x), sin(vpos.y));
 
     texture_coords += vec2(cos(vpos.x), sin(vpos.y));
     vec4 texcolor = Texel(texture, texture_coords);
+
     vec4 texcolor = Texel(tex, texture_coords);
 
     return texcolor * color;
 
     return texcolor * color;
 
}
 
}
Line 211: Line 237:
 
{{#set:Since=090}}
 
{{#set:Since=090}}
 
{{#set:PrettySince=0.9.0}}
 
{{#set:PrettySince=0.9.0}}
{{#set:Description=[[Shader (日本語)|Shader]] オブジェクトを新規作成します。}}
+
{{#set:Description=[[Shader (日本語)|Shader]] オブジェクトの新規作成。}}
  
 
== そのほかの言語 ==
 
== そのほかの言語 ==
{{i18n|love.graphics.newShader}}
+
{{i18n (日本語)|love.graphics.newShader}}

Latest revision as of 06:11, 7 October 2019

LÖVE 0.9.0 から使用可能
love.graphics.newPixelEffect から名称変更。


O.png この関数は love.update または love.draw などから繰り返し呼び出すと動作が重くなることがあります。もし、特定の資源を何度も使う必要がある場合は、一括で作成と格納を行うことで効率的に再利用できます!  



ハードウェア加速化による頂点またはピクセル・エフェクトで Shader オブジェクトを新規作成します。 Shader は頂点シェーダーやピクセル・シェーダーのコードの一方あるいは両方を有しています。

Shader は描画時にグラフィックス・カードで実行される小型のプログラムです。頂点シェーダーは各頂点に対して一括で実行されます (例えば Image の頂点は4つです。 - 角ごとに1つずつ。 Mesh では、それ以上あります)。ピクセル・シェーダーは描画されたオブジェクトが関係する画面上の各ピクセルに対して一括で実行します。全てのオブジェクトの頂点を頂点シェーダーで処理した後にピクセル・シェーダーのコードを実行します。

関数

概要

shader = love.graphics.newShader( code )

引数

string code
頂点シェーダー、あるいはピクセル・シェーダーで用いるコード (テキスト、またはファイル名)。

返値

Shader shader
描画操作で用いるShader オブジェクト。

関数

概要

shader = love.graphics.newShader( pixelcode, vertexcode )

引数

string pixelcode
ピクセル・シェーダーで用いるコード (テキスト、またはファイル名)。
string vertexcode
頂点シェーダーで用いるコード (テキスト、またはファイル名)。

返値

Shader shader
描画操作で用いるShader オブジェクト。

注釈

引数 pixelcode と vertexcode は任意順です。

シェーダー言語

シェーダーのプログラミングは Lua ではなく、シェーダー専用言語である GLSL を使用します。ただし、便宜上の都合でエイリアスとエントリポイントは少し異なります。 GLSL のシンタックスは C と非常によく似ています。 LÖVE で用意されているエイリアスの使用は一切強制していませんが、 GLSL 3 では texture2D は動作しません。ですが、 Texel は全 GLSL のバージョンで動作します。よって、 texture2D ではなく Texel の使用を推奨します。

GLSL LÖVE シェーダー言語
sampler2D Image
sampler2DArray ArrayImage
samplerCube CubeImage
sampler3D VolumeImage
texture2D(tex, uv) (GLSL 1 の場合) Texel(tex, uv)
texture(tex, uv) (GLSL 3 の場合) Texel(tex, uv)
float number (廃止予定)
uniform extern (廃止予定)


使用する GLSL のバージョンはシェーダーのソースコードファイルの先頭行に #pragma language glsl3 を記述したかどうか、あるいは LÖVE をデスクトップ、またはモバイル機器のどちらで実行しているかどうかによります:

LÖVE シェーダー言語 デスクトップ版 GLSL バージョン モバイル版 GLSL バージョン
glsl1 (デフォルト) GLSL 1.20 GLSL ES 1.00
glsl3 GLSL 3.30 GLSL ES 3.00

一部の旧式システムで GLSL 3 は非対応です。起動時に love.graphics.getSupported で対応状況を確認してください。


頂点シェーダーのコードには最低でも一本の関数があります。名前は position です。関数は画面空間へ描画されたオブジェクトから変換した頂点の位置を生成します。

ピクセルシェーダーのコードには最低でも一本の関数があります。名前は effect です。関数は描画されたオブジェクトが接触する各ピクセルに対して画面上へ混合処理をした色を生成します。

デフォルトで LÖVE には実用的なシェーダー変数 が用意されています。さらに、 LÖVE は色値を与えるために VideoTexel(uv) 関数により描画を行って現在の位置に Video を描画します。Video は複数のテクスチャにより、 YUV データとして描画とシェーダーへの変換が行われるため、 Texel (テクセル) 関数は使用できません。

ピクセルシェーダー関数

オブジェクト描画時にピクセルシェーダ関数 effect は何百~何千回も呼び出されます: 画面において各ピクセルがオブジェクトが接触するとき。その場合、ピクセルシェーダは頂点シェーダーの後に実行されます。

概要

vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )

引数

vec4 color
love.graphics.setColor にて設定する描画色、または頂点ごとの Mesh の色。
Image tex
テクスチャとして描画される画像または Canvas です。
vec2 texture_coords
ピクセルデータ取得先のテクスチャ内の位置です。左上角 (0, 0) を起点とするテクスチャ座標のとき、通常は (0, 0) から (1, 1) までの範囲を正規化します。
vec2 screen_coords
画面上のピクセルの座標。ピクセルの座標は正規化されません (テクスチャの座標とは異なります)。 (0.5, 0.5) は画面左上 (LÖVE version 0.10.0 以前では画面左下) を表します。

返値

vec4 output_color
ピクセルの色。

注釈

ピクセルシェーダー未使用時、 LÖVE 内部にある下記のデフォルト・コードを使用します:

vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords)
{
    vec4 texturecolor = Texel(tex, texture_coords);
    return texturecolor * color;
}

Video では、

vec4 effect(vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords)
{
    vec4 texturecolor = VideoTexel(texture_coords);
    return texturecolor * color;
}

複数の Canvas を同時表示するときは (複数の Canvas を love.graphics.setCanvas への引数として渡したとき)、各 Canvas ごとに個別の色を出力するために vec4 effect ではなく void effect (引数なし!) 関数を使用します。このために下記のプロトタイプ (原型) があります:

void effect()
{
    // love_Canvases は書き込み可能な vec4 color の配列です。各インデックスは Canvas に対応しています.
    // IMPORTANT: 重要: 使用中の全ての Canvas へ値を代入しなければ、不具合が発生します。
    love_Canvases[0] = color;
    love_Canvases[1] = color + vec4(0.5);
    // など。
}

Canvas が一枚のバージョン (vec4 effect) に渡された引数を取得したいならば、組み込みシェーダー変数を参照してください。

colorVaryingColor であり、 texture_coordsVaryingTexCoord です。そして screen_coordslove_PixelCoord です。

描画操作で用いられたテクスチャにアクセスしたいならば、 MainTex の名前で uniform テクスチャを定義するか、または Shader:send へ送信します。

頂点シェーダー関数

概要

vec4 position( mat4 transform_projection, vec4 vertex_position )

引数

mat4 transform_projection
変換行列は love.graphics.translate および関連関数により影響を受けて正投影の行列と組み合わされます。
vec4 vertex_position
現在の頂点における生の未変換位置。

返値

vec4 output_pos
The final transformed position of the current vertex.

注釈

頂点シェーダー未使用時、 LÖVE はデフォルト・コードを使用します:

vec4 position(mat4 transform_projection, vec4 vertex_position)
{
    // 行列乗算時の演算順序は重要です。
    return transform_projection * vertex_position;
}

注釈

頂点シェーダーのコードは、画面に描画される全ての頂点 (例えば love.graphics.rectangle では頂点を4つ生成します) と元座標から画面空間への頂点座標の変換処理、さらにピクセル・シェーダーへ頂点毎の配色とテクスチャ座標の値などの情報送信時に実行されます。

ピクセル・シェーダー (別名はフラグメント・シェーダー) のコードは描画されたオブジェクトに接触している画面上の全ピクセルに対して実行します。大抵は画像から読み込んで、画面上の対象ピクセルと混合する色を生成するのに使用します。

varying キーワードは頂点シェーダー、および頂点間の補間、さらにピクセル・シェーダーへ渡す値を設定するために使用します。

頂点シェーダーのコードを #ifdef VERTEX .. #endif で、ピクセル・シェーダーのコードは #ifdef PIXEL .. #endif のブロックで囲むことで、頂点とピクセル・シェーダーのコードをファイル、または文字列内で併用できます。

組み込み変数

LÖVE ではピクセル・シェーダー、および頂点シェーダーで使える組み込み関数を用意しています。こちらに全リストがあります: シェーダー変数

用例

頂点とピクセル・シェーダーのコードでシェーダーを作成します (シェーダー未設定時に動作)。

local pixelcode = [[
    vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
    {
        vec4 texcolor = Texel(tex, texture_coords);
        return texcolor * color;
    }
]]

local vertexcode = [[
    vec4 position( mat4 transform_projection, vec4 vertex_position )
    {
        return transform_projection * vertex_position;
    }
]]

shader = love.graphics.newShader(pixelcode, vertexcode)

function love.draw()
    love.graphics.setShader(shader)
    -- 描画処理
    love.graphics.setShader()
    -- 描画処理の続き
end

varying キーワードでピクセルシェーダー内の事前変換した頂点位置へアクセスします。

頂点シェーダーのコード

varying vec4 vpos;

vec4 position( mat4 transform_projection, vec4 vertex_position )
{
    vpos = vertex_position;
    return transform_projection * vertex_position;
}

ピクセルシェーダーのコード

varying vec4 vpos;

vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
{
    texture_coords += vec2(cos(vpos.x), sin(vpos.y));
    vec4 texcolor = Texel(tex, texture_coords);
    return texcolor * color;
}

#ifdef で上述の用例に記述されている文字列、またはファイルを一つにまとめます。

varying vec4 vpos;

#ifdef VERTEX
vec4 position( mat4 transform_projection, vec4 vertex_position )
{
    vpos = vertex_position;
    return transform_projection * vertex_position;
}
#endif

#ifdef PIXEL
vec4 effect( vec4 color, Image tex, vec2 texture_coords, vec2 screen_coords )
{
    texture_coords += vec2(cos(vpos.x), sin(vpos.y));
    vec4 texcolor = Texel(tex, texture_coords);
    return texcolor * color;
}
#endif

関連



そのほかの言語