让美术出个图或者动画盖在最上部
1赞
我写过一个类似的，cocos2dx的，你可以参考下改改，
function TestMenuShaderLayer:on2dBallPercent(parent)
local sp = cc.Sprite:create(“Images/page_01.png”)
parent:addChild(sp)
sp:setScale(2)
sp:setPosition(cc.p(display.cx,display.cy))
local width = 800
local height = 800
local renderTexture = cc.RenderTexture:create(width, height,cc.TEXTURE2_D_PIXEL_FORMAT_RGB_A8888,gl.DEPTH24_STENCIL8_OES)
renderTexture:clear(0,0,0,0);
renderTexture:setClearColor(cc.c4f(0, 0, 0, 0))
renderTexture:setClearFlags(GL_COLOR_BUFFER_BIT)
renderTexture:setPosition(cc.p(display.cx,display.cy))
parent:addChild(renderTexture,1)
local sp = renderTexture:getSprite()
sp:setBlendFunc(cc.blendFunc(gl.ONE,gl.ONE_MINUS_SRC_ALPHA))
local vertDefaultSource = [[
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
#ifdef GL_ES
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif
void main()
{
gl_Position = CC_PMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
]]
local pszFragSource = [[
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform vec2 resolution;
uniform float percent;
#define PI 3.14
#define step(b, a) smoothstep(a, a - (fwidth(b) * 2.0), b)
void main()
{
//修正x方向坐标位置
float factor = resolution.x/resolution.y;
vec2 uv = (2.0 * v_texCoord - vec2(1.0)) * 1.5;
uv.x *= factor;
float
sdf=length(uv),c=step(sdf,.85),
vB=smoothstep(.1,.9,sin(uv.x+(PI*.5))-.3),
vBA=vB*sin(CC_Time[1]*4.)*.1,
fW=(sin(((CC_Time[1]*2.)+uv.x)*2.)*.05)+vBA,
bW=(sin(((CC_Time[1]*-2.)+uv.x)*2.+PI)*.05)-vBA,
fA=(sin(CC_Time[1]*4.)*.05)*vB,
fV=mix(-.2,((percent)-.5)*2.,1.0),
fP=fV+(sin((CC_Time[1])*PI)*.1),
fF=step(uv.y,(fA+fW)+fP)*c,
bF=step(uv.y,(-fA+bW)+fP)*c;
vec4 color = vec4((step(sdf,1.)-step(sdf,.9))+
(fF+(clamp(bF-fF,0.,1.)*.8))+
clamp(pow((sdf+.01)*
((1.-(fF+bF))*c),5.),0.,1.));
color *= vec4(0.0,0.0,1.0,1.0);
gl_FragColor = color;
}
]]
local pProgram = cc.GLProgram:createWithByteArrays(vertDefaultSource,pszFragSource)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_POSITION,cc.VERTEX_ATTRIB_POSITION)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_COLOR,cc.VERTEX_ATTRIB_COLOR)
pProgram:bindAttribLocation(cc.ATTRIBUTE_NAME_TEX_COORD,cc.VERTEX_ATTRIB_FLAG_TEX_COORDS)
pProgram:link()
pProgram:updateUniforms()
local programState = cc.GLProgramState:create(pProgram)
programState:setUniformVec2("resolution",cc.p(width,height))
programState:setUniformFloat("percent",0.5)
sp:setGLProgramState(programState)
local sliderEvent = function(sender, eventType)
if eventType == ccui.SliderEventType.percentChanged then
local percent = sender:getPercent()
percent = percent / 100
print("percent----",percent)
programState:setUniformFloat("percent",percent)
end
end
local slider = ccui.Slider:create()
slider:setTag(1)
slider:setTouchEnabled(true)
slider:loadBarTexture("Images/sliderTrack.png")
slider:loadSlidBallTextures("Images/sliderThumb.png", "Images/sliderThumb.png", "")
slider:loadProgressBarTexture("Images/sliderProgress.png")
slider:setPosition(cc.p(display.cx,100))
slider:setPercent(0)
slider:addEventListenerSlider(sliderEvent)
parent:addChild(slider)
slider:setScale(5)
end
1赞
最简单的方案+1
难道需求是这种水面截面的渲染??
1:椭圆截面
2:符合人眼视角的效果,下部分比上部分窄,可调节
3:边缘平滑过渡
4:随着瓶子倾斜的时候,可动画或者程序实时修改对应属性以符合渲染结果
3.8.6
WaterEclipse.zip (29.9 KB)
6赞
shader 写个弧度 然后弄个椭圆盖在上面 设置对应颜色高亮
请问这个倒水的效果怎么实现的，什么思路，水面的横截面，和液体的弧线，
维护一个数组，每个元素代表一层水（有颜色和高度）。 每一帧会把每层的高度、颜色通过 setProperty 传递给 shader。横截面就是一个椭圆 获得当前总高度 设置椭圆坐标在高度上转化一下坐标
有已经实现的相关shader吗？可以有偿。谢谢！！！
论坛搜搜，两周前我还看到论坛有同样的帖子，有个大佬给了个shader
恍然大悟，原来可以如此，大道至简
，我2.x也遇到这种问题了,怎么解决啊
才做过一个，Shader写的，可私我
画个椭圆而已很简单的， 
不如来学 shader 自己画一个：
好巧 刚实现这个
1赞
实现了吗！
怎么实现的，有思路吗
这个是3D的吧?
这是2d水