この文書は不完全です。また現在利用例のサンプルコードのシェーダが動作していません。
Akashic Engine v3 は、限定的にフラグメントシェーダをサポートしています。
シェーダを使うには、g.ShaderProgram を利用します。
var fragmentShader = scene.assets["shader"].data; // テキストアセットからフラグメントシェーダを取得
var shader = new g.ShaderProgram({
fragmentShader: fragmentShader
});
var sprite = new g.Sprite({
..., // その他のプロパティ
shaderProgram: shader // シェーダの指定
});
sprite.shaderProgram = shader; // 既存の sprite にシェーダを指定
sprite.modified(); // modified() で表示に反映
次のコンテンツは、画像をモノクロ化して表示します。
以下、 WebGL のシェーダについての知識が必要です。
Akashic Engine は現在、フラグメントシェーダを限定的に利用することができます。
バーテックスシェーダは非サポートで、attribute も固定です。uniform は利用できます。 したがって現状の用途は、画像に対する単純なフィルタなどに限られます。
シェーダを利用するには、まず game.json の renderers に webgl を追加します。
"renderers": ["webgl"],
シェーダは g.ShaderProgram で表されます。g.ShaderProgram は g.E やそれを継承したクラス (g.Sprite , g.Pane など) に適用できます。
シェーダプログラムは親エンティティの値を継承します。そのため、シェーダプログラムを適用したエンティティに複数の子エンティティに追加することで、複数のエンティティに同一のシェーダプログラムを適用することができます。
下記のコードでは、テキストアセット monochrome.glsl を読み込み Pane に指定しています。Pane の子エンティティである Sprite と FilledRect にもシェーダが適応されます。
#version 100
precision mediump float;
varying vec2 vTexCoord;
uniform sampler2D uSampler;
uniform float uAlpha;
void main(void)
{
// 対象ピクセルの色情報を取得
vec4 color = texture2D(uSampler, vTexCoord);
// 対象ピクセルのRGB値を加算
float sum = dot(color.rgb, vec3(1.0));
// モノクロ化
vec3 outColor = vec3(sum / 3.0);
// 最終出力色
gl_FragColor = vec4(outColor, color.a * uAlpha);
}
function main() {
var scene = new g.Scene({ game: g.game, assetIds: ["player", "monochrome"] });
scene.onLoad.add(function() {
var fragmentShader = scene.assets["monochrome"].data;
var shader = new g.ShaderProgram({
fragmentShader: fragmentShader
});
var pane = new g.Pane({
scene: scene,
width: 300,
height: 300,
shaderProgram: shader
});
var sprite = new g.Sprite({
scene: scene,
src: scene.assets["player"],
x: 100,
y: 100
});
var rect = new g.FilledRect({
scene: scene,
width: 100,
height: 100,
x: 50,
cssColor: "red"
});
pane.append(sprite);
pane.append(rect);
scene.append(pane);
});
g.game.pushScene(scene);
}
module.exports = main;
.glsl 内で利用している uAlpha, uSampler, vTexCoord は固定で与えられます。
それぞれ opacity を反映した透明度、元の描画内容 (画像や FilledRect の単色) をテクスチャとして参照するサンプラー、そしてテクスチャ座標です。
設定したシェーダを戻したい場合、 undefined または null を指定します。 undefined と null は以下のように挙動が異なることにご留意ください。
undefined: 親エンティティのシェーダプログラムを利用する。(デフォルト)null: 親エンティティのシェーダプログラムを利用せず、常に初期のシェーダプログラム( undefined )を利用する。sprite.shaderProgram = null;
sprite.modified();