鐢?shader effect 瀹炵幇闆ㄦ淮钀芥按鏁堟灉锛丆ocos Creator 3D !

Posted 2021-03-20

鏍囩锛?a href='http://www.mamicode.com/so/1/%e8%ae%a1%e7%ae%97' title='璁＄畻'>璁＄畻   cas   +=   director   orm   tip   鏂囩珷   material   

鏈€杩戦€涜鍧涙椂锛岀湅鍒颁竴浣嶅ぇ浣湪鍒嗕韩鍚勭 shader 鐗规晥銆傚熀浜庡叾涓殑姘存尝 shader 锛岀櫧鐜夋棤鍐板啓浜嗕竴涓帺姘存晥鏋滐紒鏂囩珷搴曢儴鑾峰彇瀹屾暣浠ｇ爜锛佽繕鍙互璇曡瘯姘村摝锛?/p>

鍏堜竴璧风湅鐪嬫晥鏋滐綖

鐐瑰嚮浠绘剰浣嶇疆锛屼細鍦ㄨ浣嶇疆鐢熸垚涓€涓按绾癸紝灏卞儚鏄洦姘磋惤鍦ㄦ按娲间腑涓€鏍凤綖

濡備綍浣跨敤 effect 鏂囦欢锛熸柊寤轰竴涓?material 锛孍ffect 灞炴€ч€夋嫨 water , 鎺ョ潃灏嗙汗鐞嗗浘鐗囨嫋鍒扮浉搴斿弬鏁般€?/p>

鏈€鍚庝负浣犵殑妯″瀷鑺傜偣閫夋嫨鏉愭枡銆?/p>

姘寸汗鐗囧厓鐫€鑹插櫒瀹炵幇鍘熺悊锛氶€氳繃璁＄畻涓庣偣鍑荤偣鐨勮窛绂诲拰鏂瑰悜锛岀敤 sin 鍑芥暟妯℃嫙姘寸汗鏁堟灉銆傞€氳繃璁＄畻鐐瑰嚮鏃堕棿鎴冲拰褰撳墠鏃堕棿涓庤窛绂伙紝鍒ゆ柇鏄惁娣诲姞姘寸汗鏁堟灉銆傚啀灏嗗涓偣鍑荤偣鍙犲姞璧锋潵锛屽緱鍒?texture 鏈€缁?uv 銆?涓昏浠ｇ爜濡備笅銆?/p>

for(int i = 0; i < 10; i++){
    vec2 uvDir = normalize(v_uv - center[i].xy);
    float dis = distance(v_uv, center[i].xy);
    float dis_time = center[i].z - cc_time.x + dis * 3.0;
    if ( center[i].z > 0.0 && dis_time < 0.0 && dis_time > -0.1 ){
        uv += sin_A  * uvDir * sin(sin_W * cc_time.x - dis * sin_D);
    }
}
o *= texture(mainTexture, uv);

濡備綍鑾峰彇鐐瑰嚮鐐癸紵杩欓噷闇€瑕佺敤鍒板皠绾挎娴嬶紝濡傛灉瀵瑰皠绾挎娴嬩笉浜嗚В鐨勮瘽锛屽彲浠ュ弬鑰?娴呮瀽灏勭嚎妫€娴?raycast 鐨勪娇鐢?锛丆ocos Creator 3D 锛?/a>

閫氳繃灏勭嚎妫€娴嬶紝浼氳繑鍥炰竴涓窛绂诲弬鏁帮紝鍐嶇粨鍚堝皠绾跨殑璧风偣鍜屾柟鍚戯紝鍙互璁＄畻鍑虹偣鍑荤偣鐨勫潗鏍囥€傚弬鑰冧唬鐮佸涓嬨€?/p>

this._temp_v3.set(this._ray.o);
this._temp_v3 = this._temp_v3.add(this._ray.d.clone().multiplyScalar(item.distance));

杩欎釜鍧愭爣鏄笘鐣屽潗鏍囷紝杩橀渶瑕佽绠楀嚭鍦ㄦā鍨嬩腑鐨勭浉瀵逛綅缃紝鏁板€艰寖鍥存槸 0~1銆傚彲浠ラ€氳繃妯″瀷鐨勬渶灏忋€佹渶澶т綅缃紝璁＄畻鍑鸿繖涓€笺€傚苟灏嗗綋鍓嶇殑娓叉煋鏃堕棿鎴充竴骞惰祴鍊笺€?/p>

const minPosition = item.node.worldPosition.clone().add(this.model_plane.mesh.struct.minPosition);
const maxPosition = item.node.worldPosition.clone().add(this.model_plane.mesh.struct.maxPosition);
this._temp_v4.set((this._temp_v3.x - minPosition.x) / (maxPosition.x - minPosition.x), (this._temp_v3.z - minPosition.z) / (maxPosition.z - minPosition.z), director.root.cumulativeTime, 0)

濡備綍浼犲€肩粰 shader 涓殑 uniform 鍙橀噺锛熷彲浠ラ€氳繃 material 鐩存帴璁剧疆銆?/p>

this.model_plane.material.setProperty(`center${this._count++ % 10}`, this._temp_v4);

褰撶劧杩樻湁涓€涓晥鐜囨洿楂樼殑鏂规硶锛岀洿鎺ヤ娇鐢?pass 鐨勬帴鍙ｃ€?/p>

const pass = this.model_plane.material.passes[0];
pass.setUniform(pass.getHandle(`center${this._count++ % 10}`), this._temp_v4);

鏃㈢劧鐢ㄥ埌浜?shader 锛岄『渚胯涓€涓嬪瓨鍌ㄩ檺瀹氬瓧鍚с€俛ttribute 鍙兘鍑虹幇鍦ㄩ《鐐圭潃鑹插櫒涓紝涓€鑸敤鏉ヨ〃绀洪€愰《鐐逛俊鎭€倁niform 鍙橀噺鏄竴涓叏灞€鍙橀噺锛岄《鐐圭潃鑹插櫒鍜岀墖鍏冪潃鑹插櫒鍏辩敤銆倂arying 鍙橀噺鐨勪换鍔℃槸浠庨《鐐圭潃鑹插櫒鍚戠墖鍏冪潃鑹插櫒浼犺緭鏁版嵁銆?/p>

浠ヤ笂涓虹櫧鐜夋棤鍐颁娇鐢?Cocos Creator 3D 瀹炵幇"鐜╂按鏁堟灉"鐨勬妧鏈垎浜€傚鏋滀綘鏈夋兂娉曪紝娆㈣繋鐣欒█鍒嗕韩锛?/p>

---

---

璇曠帺閾炬帴
瀹屾暣浠ｇ爜
鍙傝€冩枃绔?/a>
鍙傝€冭祫鏂?/a>