Cocos2d - js problems when using a custom shader-CodePudding

recently used cocosIDE has built an example of using a custom shader, the source of a custom shader is shadertoy on one example, when I used in my project, although effect displayed, but the picture is the horse show, I don't understand why this is, various wit understand please explain for us a novice, convenient to explain fragmentShader in note 1 statement,

VertexShader: very simple vertex shader, the question should not be out of here

 attribute vec4 a_position; 
Void main (void) {
Gl_Position=CC_PMatrix * a_position; 
}

FragmentShader: I will the no variables in cocos2djs replaced variables can be used in this case, the gl_FragCoord=fragCoord , CC_Texture0=iChannel0 , CC_Time [1]=iGlobalTime gl_FragColor=fragColor , and iResolution assigned to fixed value ( this example can not influence the results ), the other untouched

 
Void main () {
Vec2 iResolution=vec2 (960, 640);//no influence fixed value 
Vec2 uv=gl_FragCoord. Xy/iResolution. Y;//1 

Float w=(0.5 - (uv) x)) * (iResolution. X/iResolution. Y);//1 
Float h=0.5 - uv. Y;//1 
Float distanceFromCenter=SQRT (w + h * w * h); 

Float sinArg=10.0 iGlobalTime distanceFromCenter * * 10.0; 
Float slope=cos (sinArg); 
Vec4 color=texture2D (CC_Texture0, uv + the normalize (vec2 (w, h)) * slope * 0.05); 

Gl_FragColor=color; 
}

The entire program flow is the main js - & gt; The HelloWorld - & gt; BackgroundShaderNode
Code: the HelloWorld. Js

//HelloWorld. Js will add a Node 
Require (' SRC/action/BackgroundShaderNode. Js) 
Var HelloWorld=cc. Scene. The extend ({
Ctor: function () {
Enclosing _super (); 
//use backgroundnode node 
Var backgroundnode=new BackgroundShaderNode (); 
Enclosing addChild (backgroundnode); 
Backgroundnode. Attr ({
X: 0, 
Y: 0, 
AnchorX: 0, 
AnchorY: 0 
}); 
} 
});

Code: BackgroundShaderNode js

 
//BackgroundShaderNode. Js 
Var BackgroundShaderNode=cc. Node. The extend ({
Ctor: function (vertexShader framentShader) {
Enclosing _super (); 

//create shader 
Enclosing shader=new cc. GLProgram (" res/Shaders/shader. VSH ", "res/Shaders/shader. FSH"); 
This. Shader. The link (); 
This. Shader. UpdateUniforms (); 

This. Sprite=new cc. Sprite (' res/images/HelloWorld. PNG '); 
This. The Sprite. Attr ({
X: 480, 
Y: 320, 
AnchorX: 0.5, 
AnchorY: 0.5, 
}); 

//use the shader 
//in this case, the main is the cc GLProgramState class, specific how to do I don't know, I was told so. 
Enclosing glProgram_state=cc. GLProgramState. GetOrCreateWithGLProgram (enclosing shader); 
This. The Sprite. SetGLProgramState (enclosing glProgram_state); 
Enclosing addChild (this Sprite); 
} 
});

the main js, I won't write, is to jump into the HelloWorld scene, add up all the files effective code not more than 20 lines
I just wanted to know why the picture is upside down, said as specific carefully is to let a person directly points out the reason of the problem, don't go dispute places has nothing to do,
Also be provided a chestnut about shader,
This is the result of running: