creator 2 1 史上最強Shader註解

2021-10-09 12:10:39 字數 2097 閱讀 8369

今天我們以乙個2.1版最新creator材質+熔岩shader為例子,詳細的註解最新的cocos creator shader結構, 希望幫助新手搞定cocos creaetor shader。

先看一下完成的渲染流程圖,多看幾遍,我們寫的shader**就是實現紅色環節的:

看完了麼?啥也不說了,直接上註解:

dissolve.effect (creator shader檔案), 我將檔案按不同顏色分成了三個部分,

方便大家理解。

%

]

layer: 0

}

] // 細節描述結束

// 材質球上的面板屬性

properties:

nosie_tex:

time:

}

%} // shader 描述結束

// 頂點shader模組開始

%% vs

} // end 頂點shader模組結束

%% fs

color *= texture2d(texture, v_uv0); // 從原紋理裡面取樣乙個顏色,疊加;

// 將0.05範圍內的邊緣設定成乙個顏色;

if (value < time + 0.05)

// 將顏色返回給渲染管道, gl_fragcolor 固定的;

gl_fragcolor = color;

}

} // 著色shader 結束

程式裡面如何控制shader裡面的引數?

step1: 獲取材質

step2: 使用材質物件cc. material的介面setproperty來修改shader uniform變數

step3: 更新材質物件

上註解:

熔岩特效**控制dissolve_ctrl.js

cc.class({

extends: cc.component,

properties: {

onload() {

// 材質物件在sprite元件例項上,所以要獲取;

this.sp = this.getcomponent(cc.sprite);

this.theold_value = 0; // 熔岩的閥值的變化範圍[0, 1]

this.dis_speed = 1 / 5; // 熔岩5秒結束, 計算出熔岩的速度;

this.set_dissolve_threold(0);

start () {

set_dissolve_threold(value) {

// 從精靈中clone出精靈的材質物件;

// (注意是clone, 另外乙個材質物件)

let material = this.sp.sharedmaterials[0];

// 設定材質物件的屬性變數即 uniform 變數名字;

material.setproperty('time', this.theold_value);

// 將材質物件設定為sprite的材質物件;

this.sp.setmaterial(0, material);

update (dt) {

// 每次update 修改閥值

// 將閥值設定到shader, 參生動態的熔岩效果;

this.theold_value += (this.dis_speed * dt);

this.set_dissolve_threold(this.theold_value);

史上最牛的面試

1.你為什麼來應聘這份工作。答 以前俺是乙隻迷途的騾子,現在可算找到組織了。2.你是怎麼知道我們招聘這個職位的呢?答 乙個合格的員工除了要有騾子般的身體以外,還必須有獵狗一樣的嗅覺。3.我們為什麼要聘你呢?答 俺吃的少,拉的多。4.你認為自己最大的優點是什麼?答 像騾子一樣吃苦,像工蜂一樣耐勞,像獵...

史上最經典的黑客

是我當黑客以來接到的一項最具挑戰性的生意,是去黑另乙個黑客的電腦。工欲善其事,必先利其器,我很明白現今裝備的重要性,於是我把自己從頭武裝到 腳,包裝上了全黑的緊身夜行衣和戴上墨鏡。這樣我看起來就很黑很客,很重很要了。一出門,我就給車撞了 司機下車後,打著強光手電筒找了好半天才找到了躺在地上的我,說了...

史上最經典的黑客

是我當黑客以來接到的一項最具挑戰性的生意,是去黑另乙個黑客的電腦。工欲善其事,必先利其器,我很明白現今裝備的重要性,於是我把自己從頭武裝到 腳,包裝上了全黑的緊身夜行衣和戴上墨鏡。這樣我看起來就很黑很客,很重很要了。一出門,我就給車撞了 司機下車後,打著強光手電筒找了好半天才找到了躺在地上的我,說了...