読者です 読者をやめる 読者になる 読者になる

フニゲの開発日記

Electronとか...

はじめてのシェーダ

cocos2d-html5


 OpenGLにはいい思い出がない。
 うっかりどこか書き換えると画面に何も出なくなって、何日も原因が分からずに途方に暮れるとか、昔の記憶がよみがえって、いやな汗が出る。
 確実に動くものから、少しずつ作りはじめて、迷ったらいつでも戻れるように足場を固めていこう。

 まずテクスチャの色を変えるだけの簡単なシェーダ。
 VertexシェーダとFragmentシェーダの2つが必要なのだが、今回は色をいじるだけなのでVertexシェーダは何もやることがない。

// test.vsh
attribute vec4 a_position;
attribute vec2 a_texCoord;

varying mediump vec2 v_texCoord;

void main()
{
    gl_Position = (CC_PMatrix * CC_MVMatrix) * a_position;
    v_texCoord = a_texCoord;
}

 Fragmentシェーダでは、テクスチャのrgbをひっくり返してみる。

// test.fsh
varying vec2 v_texCoord;
uniform sampler2D CC_Texture0;

void main()
{
    lowp vec4 color = texture2D(CC_Texture0, v_texCoord);
    color.rgb = 1.0 - color.rgb;
    gl_FragColor = color;
}

f:id:funige:20140120204021p:plain

 Cocos2d-html5でスプライトにシェーダを適用するのは簡単。
 まずいつものようにresouce.jsでシェーダのプログラムを先読みしておく。

// resource.js
var g_resources = [
    ...
    {src:"res/test.fsh"},
    {src:"res/test.vsh"},
];

 あとはゲームの開始時にシェーダをコンパイルして、setShaderProgramでスプライトにセットするだけ。

    init:function () {
        if ('opengl' in sys.capabilities) {
            if (!this.reverseShader) {
                var program  = cc.GLProgram.create("res/test.vsh", "res/test.fsh");
                program.addAttribute(
                    cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);

                program.retain(); // これが必要らしい
                program.link();
                program.updateUniforms();
                this.reverseShader = program;
            }
        }
        ...
        var bg = cc.Sprite.create("res/bg.png");
        bg.setShaderProgram(this.reverseShader);
        this.addChild(bg);
    },

 何か計算させないとあんまり意味がないか。次回以降パラメータの与え方とか書いてみようと思う。


Open GL ES 2.0 プログラミングガイド

Open GL ES 2.0 プログラミングガイド

 昔はシェーダの参考書は公式?のこれぐらいしか無かったけど、今はモバイル開発者向けのいい本がいろいろあるのだな。
 いい時代になったものだ。

広告を非表示にする