cocos creator熔巖特效shader注釋詳解
今天我們以一個2.1版最新creator材質+熔巖Shader為例子，詳細的注解最新的cocos creator Shader結構,?希望幫助新手搞定cocos creaetor Shader。
?
先看一下完成的渲染流程圖，多看幾遍，我們寫的Shader代碼就是實現(xiàn)紅色環(huán)節(jié)的:
看完了么？啥也不說了，直接上注解：
dissolve.effect (creator Shader文件), 我將文件按不同顏色分成了三個部分，
方便大家理解。
%{ // 描述開始
??// shader 細節(jié)描述開始
??techniques: [ ?
????{
??// 存放渲染管道描述的數(shù)組集合
??????passes: [
????// pass ---> 完整的渲染流水線;
????????{
??????????vert: vs // 頂點Shader在 vs模塊(下面定義);
??????????frag: fs // 著色shader 在fs模塊(下面定義)
??????????cullMode: none
??????????blend: true
????????}
??????]
??????layer: 0
????}
??] // 細節(jié)描述結束
??
??// 材質球上的面板屬性
??properties: {
????texture: {
??????type: sampler2D // 類型
??????value: null // 默認值
????}
nosie_tex: {
??????type: sampler2D
??????value: null
????}
time: {
??type: number
??value: 0
}
??}
%} // shader 描述結束
?
// 頂點Shader模塊開始
%% vs {
// 定義float的精度為高精度
precision highp float;
// 引擎根據(jù)節(jié)點位置等生成的模型到透視的變換矩陣;
uniform mat4 cc_matViewProj;
?
// 頂點Shader 從渲染管道里面獲取哪些數(shù)據(jù),使用attribute來修飾;
attribute vec3 a_position; // 頂點坐標
attribute lowp vec4 a_color; // 顏色;
attribute mediump vec2 a_uv0; // 紋理坐標;
?
// 傳遞給著色Shader; ?varying 來修飾;
// 頂點Shader 和著色Shader都要定義一次;
varying mediump vec2 v_uv0;
varying lowp vec4 v_color; ?
?
?
void main () {
??// 定義了一個矩陣類型變量;
??mat4 mvp;
??// 模型坐標到透視的變換矩陣, 由游戲引擎設置好。
??mvp = cc_matViewProj;
??
??// 把頂點紋理坐標，傳遞給著色Shader;
??v_uv0 = a_uv0;
??// 把頂點的顏色傳遞給著色Shader;
??v_color = a_color;
??// 將我們模型頂點的坐標變換以后, 返回給渲染通道;
??gl_Position = mvp * vec4(a_position, 1);
}
?
} // end 頂點Shader模塊結束
?
%% fs {
// 定義了我們的float的精度;
precision highp float;
?
// CPU給我們指定的紋理對象; Sprite組件內部代碼會設置進來;
uniform sampler2D texture;
// 熔巖閥值[0, 1];
uniform float time;
// 熔巖形狀的紋理;
uniform sampler2D nosie_tex;
?
// vert定義了，著色也要定義，而且是同名的;
varying mediump vec2 v_uv0;
varying lowp vec4 v_color; ?
?
?
void main () {
??vec4 color = v_color;
??// texture2D: GLSL紋理采樣函數(shù), 返回一個顏色值;
??float value = texture2D(nosie_tex, v_uv0).r;
??
??// 如果顏色的r分量小于閥值，將這個著色操作丟棄;
??// discard將著色操作丟棄, 實現(xiàn)空洞
??if (value < time) {
????discard;
??}
??color *= texture2D(texture, v_uv0); // 從原紋理里面采樣一個顏色，疊加;
??// 將0.05范圍內的邊緣設置成一個顏色;
??if (value < time + 0.05) {
????// 熔巖的邊緣設置一個邊緣過度顏色
color = vec4(0.9, 0.6, 0.3, color.a);
??}
??
??// 將顏色返回給渲染管道, ?gl_FragColor 固定的;
??gl_FragColor = color;
}
?
} // 著色shader 結束
?
?
程序里面如何控制Shader里面的參數(shù)？
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, 參生動態(tài)的熔巖效果;
???? this.theold_value += (this.dis_speed * dt);
???? this.set_dissolve_threold(this.theold_value);
????},
});
?
需要完整的熔巖特效項目源碼+視頻講解課程的同學，可以加我的QQ群
