page flip turing

mousePos = event.position-global_position  

and

 material.set_shader_parameter("scale",global_scale)

in script needed, and the COLOR is not correct if using a texture with various ALPHA, need to be improved

Shader code
shader_type canvas_item;
uniform vec2 scale;
uniform vec2 mouse_pos = vec2(-1.,-1.);

vec2 Line2point(vec2 linePoint,vec2 lineDire,vec2 point) {
	lineDire = normalize(lineDire);
	vec2 line2Ori = - linePoint - dot(-linePoint,lineDire)*lineDire;
	vec2 p2Ori = - point - dot(-point,lineDire)*lineDire;
	return line2Ori-p2Ori;
	}
vec4 ColorWithA(vec4 oldCol,vec4 newCol){
	vec4 finalCol;
	if((newCol.a + oldCol.a)>=1.)
	{
		finalCol.rgb = newCol.rgb ;
		finalCol.a =1.0;
	}
	else{
		finalCol.rgb = newCol.a/(newCol.a + oldCol.a)*newCol.rgb + oldCol.a/(newCol.a + oldCol.a)*oldCol.rgb;
		finalCol.a = oldCol.a +newCol.a;
		}
	return 	finalCol;	
	}

void fragment() {
	vec2 uv = UV;
//	vec2 mouse_uv = mouse_pos ;
	
	//拉伸变形校正
	float scale_min = scale.x/scale.y;
	vec2 uv_max = vec2(scale_min,1.);
	float trueScale;
	if(scale.y<scale.x){
		scale_min = scale.y/scale.x;
		uv.y = uv.y * scale_min;
		uv_max = vec2(1.,scale_min);
//		mouse_uv = mouse_pos * TEXTURE_PIXEL_SIZE /scale.x;
		trueScale = scale.x;
		}
	else{
		uv.x = uv.x*scale_min;
//		mouse_uv = mouse_pos * TEXTURE_PIXEL_SIZE /scale.y;
		trueScale = scale.y;
	}
	
	COLOR= texture(TEXTURE,uv);

	
	//鼠标响应
	vec2 pPos = uv / TEXTURE_PIXEL_SIZE * trueScale;
	if (mouse_pos.x>-0.0001)
	{
		vec2 left_bottom = vec2(0.,uv_max.y/TEXTURE_PIXEL_SIZE.y * trueScale);
		vec2 midpoint = (mouse_pos - left_bottom)/2. + left_bottom;
//		vec2 midDirect = vec2(-1.,-1.)/1.414;
		vec2 midDirect = normalize(vec2(-(mouse_pos-left_bottom).y,(mouse_pos-left_bottom).x));
		//bg

		//pageback
		vec2 sharpPoint = vec2(0.,midpoint.y - midDirect.y/midDirect.x * midpoint.x);
		vec2 flipEdgeDire = normalize(sharpPoint - mouse_pos);
		//pagebackBottom
		vec2 sharpPointB = vec2(midpoint.x-midDirect.x/midDirect.y * (midpoint-left_bottom).y,left_bottom.y);
		vec2 flipEdgeDireB = normalize(sharpPointB - mouse_pos);
		
		//圆柱
		float cyOriOff = length(mouse_pos-left_bottom);
		if (cyOriOff>100.) cyOriOff = 100.;//圆柱向里面缩进
		float cyR = cyOriOff*2./PI;
		float pageHDire = PI/6.;
		vec2 midlineToP = Line2point(midpoint,midDirect,pPos);
		vec2 sideEdgeToP = Line2point(mouse_pos,flipEdgeDire,pPos);
		vec2 BottomEdgeToP = Line2point(mouse_pos,flipEdgeDireB,pPos);

		vec2 cyOriToP = midlineToP - normalize(mouse_pos- left_bottom)*cyOriOff;
		vec2 cyEdgeToP = midlineToP - normalize(mouse_pos- left_bottom)*(cyOriOff-cyR);

		bool atBG = (cyOriToP).x<=-0.01;
		bool atPageBack = !atBG&&(sideEdgeToP.y>0.)&&(BottomEdgeToP.x<=0.);
//		bool atCy = (cyOriToP).x<=0.;
		bool atCy = cyEdgeToP.x >=0. && (cyOriToP).x<=0.;
		bool atCyPage = false;
		vec2 uvCy ;
		vec2 uvCyB ;
		
		
		float shadow = 1.;
		if (atCy){
			vec2 cyOri = pPos-cyOriToP;
			vec2 trueDis = cyR*  asin(length(cyOriToP)/cyR)*normalize(cyOriToP);
			vec2 truePos = cyOri+trueDis;
				
			vec2 sideEdgeToTP = Line2point(mouse_pos,flipEdgeDire,truePos);
			vec2 BottomEdgeToTP = Line2point(mouse_pos,flipEdgeDireB,truePos);
			uvCyB = truePos * TEXTURE_PIXEL_SIZE /trueScale;
			shadow *= 1.-pow(length(trueDis)/(cyR*PI/2.),3.);
			
			if ((BottomEdgeToTP.x<0.)&& (sideEdgeToTP.y>0.))
				{
					atCyPage = true;
					uvCy = vec2(length(sideEdgeToTP),left_bottom.y-length(BottomEdgeToTP))*TEXTURE_PIXEL_SIZE /trueScale;
				}
			
			if ((uvCyB.x > uv_max.x)||(uvCyB.y > uv_max.y)||(uvCyB.x <= 0.)|| (uvCyB.y <= 0.))	
				atCy =false;
		}
		
		
		//色彩
		COLOR = vec4(0.);
		//page
		if(!atBG && !atCy){
			vec4 color =  texture(TEXTURE,uv);
			COLOR = ColorWithA(COLOR,color);
		}
//		//cyBottom
		if(atCy)
			{
				vec4 color =  texture(TEXTURE,uvCyB);
//				COLOR.a = 1.;
				COLOR = ColorWithA(COLOR,color);
				COLOR.xyz = COLOR.xyz * shadow;
			}
		if (atCyPage){	
				vec4 color =  texture(TEXTURE,uvCy);
				color.xyz *=0.8;
				COLOR = ColorWithA(COLOR,color);
//				COLOR = color;
				COLOR.xyz = COLOR.xyz*shadow;					
		}
		else if(atPageBack)
			{
				uv = vec2(length(sideEdgeToP),left_bottom.y-length(BottomEdgeToP))*TEXTURE_PIXEL_SIZE /trueScale;
				vec4 color =  texture(TEXTURE,uv);
				color.xyz *=0.8;
				COLOR = ColorWithA(COLOR,color);
			}

		//bg
		vec4 color = COLOR;
		color.xy = uv;
		color.a =1.0;
		COLOR = ColorWithA(color,COLOR);

//		COLOR.xy = (vec2(midLineDis)*.01);
		
		}
	
	// Place fragment code here.

//	FRAGCOORD.xy;
}
Tags
flip, page, turning
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from 50tu

water waves 2d

Related shaders

page flip with transparent background

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
kcfresh53
8 months ago

I was able to fix the transparency issue here:
https://godotshaders.com/shader/page-flip-with-transparent-background/

ikuffer
ikuffer
5 months ago

Awesome, interesting how you made it turn from the left corner. Is there a simple way to have it turn from the right corner instead?