CocosCreator1.x實現水流動的效果

Cocos Creator版本：1.10.2

運行結果：(H5和原生都支持)

場景:

腳本：
HelloWorld.js：

let shader = require(`shader`);cc.Class({extends: cc.Component,properties: {water: cc.Node,waterNormalMap: cc.SpriteFrame,},onLoad() {// 加載所有著色器程序shader.loadShaderPrograms();// 初始化水的著色器程序this._time = 0;this._waterSpeed = 0.1;shader.setGLProgramForNode(`water`, this.water);shader.use(`water`);shader.setUniformTexture(`water`, `normalMap`, this.waterNormalMap.getTexture());shader.setUniformFloat(`water`, `v_offset`, 0);},update(dt) {// 更新水的著色器程序this._time += dt;shader.use(`water`);shader.setUniformFloat(`water`, `v_offset`, (this._time * this._waterSpeed) % 1);}, });

shader.js

let WaterShader = require(`WaterShader`);module.exports = {// 加載所有的著色器程序loadShaderPrograms() {this.createGLProgram(`water`, WaterShader.vert, WaterShader.frag);},///// 存放所有著色器程序gLProgramDict: {},// 創建一個著色器程序createGLProgram(glProgramName, vertStr, fragStr) {let glProgram = this.gLProgramDict[glProgramName];if (glProgram) {cc.error(`${glProgramName}這個glProgram已經注冊過了！！！`);return;}glProgram = new cc.GLProgram();if (cc.sys.isNative) {glProgram.initWithString(vertStr, fragStr);} else {glProgram.initWithVertexShaderByteArray(vertStr, fragStr);glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);}glProgram.link();glProgram.updateUniforms();glProgram.use();this.gLProgramDict[glProgramName] = glProgram;},// 設置指定的著色器程序于指定node上setGLProgramForNode(glProgramName, node) {let glProgram = this.gLProgramDict[glProgramName];if (!glProgram) {cc.error(`${glProgramName}這個glProgram未注冊！！！`);return;}let sprite = node.getComponent(cc.Sprite);if (!sprite) {cc.error(`這個node沒有Sprite組件啊！！！`);return;}let sgNode = sprite._sgNode;if (cc.sys.isNative) {let glProgramState = cc.GLProgramState.getOrCreateWithGLProgram(glProgram);sgNode.setGLProgramState(glProgramState);} else {sgNode.setShaderProgram(glProgram);}},// 應用指定著色器程序use(glProgramName) {let glProgram = this.gLProgramDict[glProgramName];if (!glProgram) {cc.error(`${glProgramName}這個glProgram未注冊！！！`);return;}glProgram.use();},// 為指定著色器程序設置uniform值setUniformFloat(glProgramName, uniformName, uniformValue) {if (typeof uniformValue !== `number`) {cc.error(`setUniformTexture 輸入的值不是數字類型 @`, glProgramName, uniformName);return;}this.setUniformCommon(glProgramName, uniformName, uniformValue, `setUniformFloat`, `setUniformLocationWith1f`);},setUniformTexture(glProgramName, uniformName, uniformValue) {if (!(uniformValue instanceof cc.Texture2D)) {cc.error(`setUniformTexture 輸入的值不是紋理類型 @`, glProgramName, uniformName);return;}if (cc.sys.isNative) {this.setUniformCommon(glProgramName, uniformName, uniformValue, `setUniformTexture`, `setUniformLocationWith1f`);} else {let glProgram = this.gLProgramDict[glProgramName];if (!glProgram) {cc.error(`${glProgramName}這個glProgram未注冊！！！`);return;}let uniformLocation = glProgram.getUniformLocationForName(uniformName);glProgram.setUniformLocationWith1i(uniformLocation, 1);cc.gl.bindTexture2DN(1, uniformValue);}},setUniformCommon(glProgramName, uniformName, uniformValue, jsbFnName, h5fnName) {let glProgram = this.gLProgramDict[glProgramName];if (!glProgram) {cc.error(`${glProgramName}這個glProgram未注冊！！！`);return;}if (cc.sys.isNative) {let glProgramState = cc.GLProgramState.getOrCreateWithGLProgram(glProgram);glProgramState[jsbFnName](uniformName, uniformValue);} else {let uniformLocation = glProgram.getUniformLocationForName(uniformName);glProgram[h5fnName](uniformLocation, uniformValue);}} };

WaterShader.js

module.exports = {vert: `attribute vec4 a_position;attribute vec2 a_texCoord;attribute vec4 a_color;varying vec2 v_texCoord;void main(){gl_Position = CC_PMatrix * a_position;v_texCoord = a_texCoord;} `,frag: `varying vec2 v_texCoord;uniform sampler2D normalMap; // 法線貼圖uniform float v_offset; // 法線貼圖v坐標偏移// 糾正紋理坐標 （當采樣坐標超出范圍時，從另一邊出來，比如 1.1糾正為0.1，-0.1糾正為0.9 等）vec2 get_fixuv_by_uv(vec2 uv) {if (uv.x > 1.0) {uv.x -= 1.0;}if (uv.x < 0.0) {uv.x += 1.0;}if (uv.y > 1.0) {uv.y -= 1.0;}if (uv.y < 0.0) {uv.y += 1.0;}return uv;}// 獲取法向vec3 get_normal() {vec2 uv = v_texCoord + vec2(0, v_offset);uv = get_fixuv_by_uv(uv);return normalize(texture2D(normalMap, uv).xyz * 2.0 - 1.0); }// 根據 折射方向 獲取新的紋理坐標vec2 get_uv_by_refract(vec3 refractVec) {vec2 uv = v_texCoord + vec2(refractVec) * 0.5;return uv;}void main() {// 視點位置vec3 eyePos = vec3(0.5, 0.5, 10.0); // 入射方向vec3 inVec = normalize(vec3(v_texCoord, 0.0) - eyePos); // 獲取法線vec3 normal = get_normal(); // 根據 入射方向,法線,折射率 獲取折射方向vec3 refractVec = refract(inVec, normal, 0.7); // 根據 折射方向 獲取新的紋理坐標vec2 v_texCoord2 = get_uv_by_refract(refractVec); // 最終顏色gl_FragColor = texture2D(CC_Texture0, v_texCoord2); }`, };

總結

以上是生活随笔為你收集整理的CocosCreator1.x实现水流动的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。