是这样的,
我设定了一个Node,带了模糊效果,
结果在淡出的时候,这个节点会卡一下,也就是不像其他Node在淡出时那么自然
请教各位前辈,
我是应该在淡出之前,将该节点的shader停止,还是该如何做呢?
请前辈们指点,感谢
附带shader的代码:
const _vert = `
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main()
{
gl_Position = ( CC_PMatrix * CC_MVMatrix ) * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
`
const _vert_no_mvp = `
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
`
const _frag = `
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
uniform float u_strength;
uniform float u_widthStep;
uniform float u_heightStep;
const float blurRadius = 3.0;
const float blurPixels = ( blurRadius * 2.0 + 1.0 ) * ( blurRadius * 2.0 + 1.0 );
void main()
{
float radius = blurRadius;
vec3 sumColor = vec3( 0.0, 0.0, 0.0 );
for(float fy = -blurRadius; fy <= blurRadius; ++fy )
{
for(float fx = -blurRadius; fx <= blurRadius; ++fx)
{
vec2 coord = vec2( fx * u_widthStep, fy * u_heightStep );
sumColor += texture2D( CC_Texture0, v_texCoord + coord ).rgb;
}
}
gl_FragColor = vec4( mix( texture2D( CC_Texture0, v_texCoord ).rgb, sumColor / blurPixels, u_strength ), 1.0 );;
}
`
let shaderClass = cc.Class(
{
extends: cc.Component,
editor:
{
requireComponent: cc.Sprite,
executeInEditMode: true,
},
properties:
{
previewId: { default: null, editorOnly: true, visible: false, },
_program: { default: null, visible: false, },
Strength: { default: 0.8, type: cc.Float, },
},
onLoad()
{
this.updateRender();
},
onEnable()
{
this.node.on( 'touchstart', function (event) { event.stopPropagation(); });
this.node.on( 'touchend', function (event) { event.stopPropagation(); });
},
onDestroy()
{
//if ( this.previewId !== null ) clearInterval( this.previewId );
},
onFocusInEditor()
{
this.updateRender();
// if ( this.previewId !== null ) clearInterval( this.previewId );
// this.previewId = setInterval( this.updateRender.bind( this ), 1 );
},
onLostFocusInEditor()
{
//if ( this.previewId !== null ) clearInterval( this.previewId );
},
updateRender()
{
this.render( this.Strength );
},
render( strength )
{
if ( !this._program ) this._program = new cc.GLProgram();
if ( cc.sys.isNative )
{
this._program.initWithString( _vert_no_mvp, _frag );
this._program.link();
this._program.updateUniforms();
const glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram( this._program );
}
else
{
this._program.initWithVertexShaderByteArray( _vert, _frag );
this._program.addAttribute( cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
this._program.addAttribute( cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
this._program.addAttribute( cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
this._program.link();
this._program.updateUniforms();
}
this._uniStrength = this._program.getUniformLocationForName( "u_strength" );
this._uniWidthStep = this._program.getUniformLocationForName( "u_widthStep" );
this._uniHeightStep = this._program.getUniformLocationForName( "u_heightStep" );
if ( cc.sys.isNative )
{
const glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram( this._program );
glProgram_state.setUniformFloat( "u_strength", strength );
glProgram_state.setUniformFloat( "u_widthStep", ( 1.0 / this.node.getContentSize().width ) );
glProgram_state.setUniformFloat( "u_heightStep", ( 1.0 / this.node.getContentSize().height ) );
}
else
{
/* 模糊 0.5 */
/* 细节 -2.0 */
/* 细节 -5.0 */
/* 细节 -10.0 */
/* 边缘 2.0 */
/* 边缘 5.0 */
/* 边缘 10.0 */
/* 模糊 1.0 */
this._program.setUniformLocationWith1f( "u_strength", ( strength + 0.2 ) );
this._program.setUniformLocationWith1f( "u_widthStep", ( 1.0 / this.node.getContentSize().width ) );
this._program.setUniformLocationWith1f( "u_heightStep", ( 1.0 / this.node.getContentSize().height ) );
}
this.setProgram( this.node._sgNode, this._program );
},
setProgram( node, program )
{
if ( !cc.sys.isNative ) { node.setShaderProgram( program ); }
else
{
let glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram( program );
node.setGLProgramState( glProgram_state );
}
let children = node.children;
if (!children) return;
for ( let i = 0; i < children.length; i++ ) this.setProgram( children[i], program );
},
});
module.exports = shaderClass;
顺带请教一下,
设置了shader的节点,该如何让节点不再使用这个shader呢?
感激不尽