最近使用cocosIDE新建了一個使用自定義shader的例子，自定義shader的來源是shadertoy上的一個例子。當我用在自己的專案中時，效果雖然顯示出來了，但是圖片卻是倒置顯示的，我不明白這是為什么，各路才子了解的請為我們新手解釋一下，方便的話解釋一下fragmentShader里標注1的陳述句。
vertexShader ： 非常簡單的vertex shader,問題應該不是出在這里
attribute vec4 a_position;
void main(void) {
gl_Position = CC_PMatrix * a_position;
}
fragmentShader：我將原始碼中的在cocos2djs中沒有的變數替換成了能在本例中使用的變數，gl_FragCoord = fragCoord , CC_Texture0 = iChannel0 , CC_Time[1] = iGlobalTime , gl_FragColor = fragColor ，并將iResolution賦為定值(對本例結果無影響)，其他的都沒動
void main() {
vec2 iResolution = vec2(960, 640);// 定值無影響
vec2 uv = gl_FragCoord.xy / iResolution.xy; // 1
float w = (0.5 - (uv.x)) * (iResolution.x / iResolution.y); // 1
float h = 0.5 - uv.y; // 1
float distanceFromCenter = sqrt(w * w + h * h);
float sinArg = distanceFromCenter * 10.0 - iGlobalTime * 10.0;
float slope = cos(sinArg) ;
vec4 color = texture2D(CC_Texture0, uv + normalize(vec2(w, h)) * slope * 0.05);
gl_FragColor = color;
}
整個程式流程是 main.js --> HelloWorld場景 --> BackgroundShaderNode
代碼：HelloWorld.js
// HelloWorld.js 就添加了一個Node
require('src/action/BackgroundShaderNode.js')
var HelloWorld = cc.Scene.extend({
ctor:function(){
this._super();
// 使用backgroundnode節點
var backgroundnode = new BackgroundShaderNode();
this.addChild(backgroundnode);
backgroundnode.attr({
x:0,
y:0,
anchorX:0,
anchorY:0
});
}
});
代碼：BackgroundShaderNode.js
//BackgroundShaderNode.js
var BackgroundShaderNode = cc.Node.extend({
ctor:function(vertexShader, framentShader) {
this._super();
// 創建shader
this.shader = new cc.GLProgram("res/Shaders/shader.vsh" ,"res/Shaders/shader.fsh");
this.shader.link();
this.shader.updateUniforms();
this.sprite = new cc.Sprite('res/images/HelloWorld.png');
this.sprite.attr({
x: 480,
y: 320,
anchorX:0.5,
anchorY:0.5,
});
// 使用shader
// 本例中最主要的是這個cc.GLProgramState類,具體怎么用我也不清楚,別人告訴我就這么用了.
this.glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this.shader);
this.sprite.setGLProgramState(this.glProgram_state);
this.addChild(this.sprite);
}
});
main.js我就不寫了，就是往HelloWorld場景跳轉,所有檔案加起來有效代碼不超過20行
我就想知道圖片為什么是倒置的，說的那么具體仔細主要是為了讓人直接指出問題的原因，不去計較一些無關的地方。
也算是提供了一個關于shader的小栗子。
這是運行的結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/75761.html
標籤：Cocos2d-x