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