【Playcanvas】シェーダーの基礎！！テクスチャ加工編！！

【Playcanvas】シェーダーの基礎！！テクスチャ加工編！！

福田です！！
今日もシェーダーについてやっていきます！！

今回やっていくことは、元となるテクスチャがあること前提で、テクスチャを加工してマテリアルに割り当てよう！というところです！！

はい！それではさっそくやっていきましょう！

用意したテクスチャはこちらです！！

とりあえずこの画像をテクスチャデータとして読み込み、シェーダーで触れるようにしていきます！！！

/*-------- プログラム名.js --------*/

/*------- 受付窓 ---------*/
プログラム名.attributes.add('diffusemap', {
    type: 'asset',
    assetType: 'texture',
    title: 'Diffuse Map'
});


/*-------- マテリアルの接続部 --------*/
this.マテリアル名 = new pc.Material();
this.マテリアル名 = this.material.resource;
this.shader = new pc.Shader(gd, shaderDefinition);
this.マテリアル名.Shader = this.shader
this.マテリアル名.setParameter('uDiffuseMap', diffuseTexture);

最初のattributesで任意のテクスチャを受け取ることが出来る受付窓を作成しています。
ここで受け取ったテクスチャdiffusemapは、まだjs上で触れるようにしただけです。

なのでマテリアルをfragmentシェーダーに渡します。
1行目で、新しいマテリアルの作成。
2行目で、既存のマテリアル情報を新規マテリアルにコピー。
3行目で、新しく作ったシェーダーにvertexとfragmentのシェーダーを紐づけし、
4行目で、マテリアルに登録します。
5行目でようやく、テクスチャデータをマテリアルに渡しています。

fragmentシェーダーで、マテリアルの中をいろいろと操作した後に、js側でマテリアルを上書きします。

続いて、fragment側について説明します！
fragmentでは今回は、黒い部分を透明にするようにします！
このままopacityに入れると、緑のところは半透明になってしまうので、シェーダー側で黒い部分のみ処理をします。
結果がこちらです！

ちゃんと透過できてますね～！
使用したコードは下記をご覧ください！！

uniform sampler2D uDiffuseMap;

void getAlbedo(void)

{

    vec4 color = texture2D(uDiffuseMap, vUv0);
    float alpha = 1.0;

    alpha = ( color.r + color.g + color.b == 0.0)? 0.0 : 1.0 ;

// dAlbedo = color.rgb;
    dAlbedo = color.rgb;
    dAlpha = alpha;

}

たったこれだけで透過できるのはすごいですね！

ここまでご覧くださりありがとうございました！
福田でした！

現在シェルパグループでは、一緒に働く仲間を募集中！
建築パース、3DCG、UnrealEngine、Unity、プログラミングに興味のある方は
是非リクルートサイトをご覧ください！

■シェルパグループ　リクルートサイト
https://sherpa-recruit.jp/

 

sherpa.staff