一个炫酷的opengles2.0翻页效果(安卓上opengles2.0 翻书效果附源码)

写了一个opengles2.0的小效果,平台是安卓,给各位朋友们看一看,有兴趣想要源码的朋友可以email我 5358951@qq.com。

 

 

先看效果

前言

1、在安卓上实用opengles进行开发,大家可以参考android官网的例子,在例子里面大家可以通过github上下载,稍后我会把官网的例子放到github上;
2、这里特地说明下,完成这个效果需要对opengles2.0基础只有个简单的了解;
       

开干

1、算法,要想实现翻页的效果,必需对翻页建立一个数学模型,然后在shader里面去实现,那么最关键的就是模型什么。

 如果一页纸,我们用收去翻它,其实这也纸,已经被粗略的分成了三个部分 
(1)、未被翻起的部分A;

(2)、被翻起的部分C;

  (3)、 翻起的部分和未被翻起的连接部分(即发生了弧形形变部分)B;

随着页面的翻转A先变化成B最后变换成C,那么手移动的距离就是影响这个这个效果进展到什么成都,因此我把手移动的相关的参数定义为S;

上面的模型实际上得出了一个依赖关系。也就是S的变化会改变A,B,C中各个三角形顶点的坐标。

2、如何生成3d模型参见 http://blog.csdn.net/yellow_beard/article/details/77721002

3、实现

(1)、主要针对shader进行编码,

直接上源码,

 

String vShaderStr = "uniform mat4 u_mvMatrix;                   							\n"
				+ "uniform mat4 u_pMatrix;                  			 							\n"
				+ "const mediump float r = 80.0;                			 						\n"
				+ "uniform float f;                  			 									\n"
				+ "attribute vec4 a_position;                  										\n"
				+ "attribute vec2 a_texCoord;   													\n"
				+ "varying vec2 v_texCoord;    														\n"
				+ "void main()                                 										\n"
				+ "{                                           										\n"
				+ "                                    		   										\n"
				+ "                            		   												\n"
				+ "	mediump vec4 v =    u_mvMatrix * a_position ;  								\n"
				+ "     mediump vec2 pd = vec2(0.8660,-0.5000);              		   				\n"
				+ "     mediump vec2 vpmax = vec2(230.0,-400.0);              		   				\n"
				+ "     mediump float vpmaxf = dot(pd, vpmax);              		   				\n"	
				+ "     mediump float vp = dot(pd, v.xy);                      		   				\n"
				+ "     if (vp < f  + vpmaxf) {   													\n"
				+ "     } else if (vp < f+ vpmaxf +r*3.1416) {                      		   		\n"
			 	+ "         mediump float a = (vp-f-vpmaxf)/(r)-1.5708;                    			\n"
			 	+ "         v.xyz += vec3((f+vpmaxf+r*cos(a)-vp)*pd, r+r*sin(a));      				\n"
				+ "     } else {                    		   										\n"
			   	+ "        v.xyz += vec3((2.0*(f+ vpmaxf -vp)+3.1416*(r))*pd, 2.0*r);                 \n"
				+ "     }                    		   												\n"
				+ "                                    		   										\n"
				+ "   gl_Position = u_pMatrix  * v  ; 												\n"
				+ "   v_texCoord = a_texCoord;  													\n"
				+ "    				 																\n"
				+ "}                                           										\n";
		String fShaderStr = "precision mediump float;                            \n"
				+ "varying vec2 v_texCoord;                            \n"
				+ "uniform sampler2D s_baseMap;                        \n"
			//	+ "uniform sampler2D s_lightMap;                       \n"
				+ "void main()                                         \n"
				+ "{                                                   \n"
				+ "  vec4 baseColor;                                   \n"
				+ "  vec4 lightColor;                                  \n"
				+ "                                                    \n"
				+ "  gl_FragColor = texture2D( s_baseMap, v_texCoord );   \n"
			//	+ "  lightColor = texture2D( s_lightMap, v_texCoord ); \n"
			//	+ "  gl_FragColor = baseColor * (lightColor + 0.25);   \n"
				+ "}                                                   \n";	mediump vec4 v =    u_mvMatrix * a_position ;  								\n"
				+ "     mediump vec2 pd = vec2(0.8660,-0.5000);              		   				\n"
				+ "     mediump vec2 vpmax = vec2(230.0,-400.0);              		   				\n"
				+ "     mediump float vpmaxf = dot(pd, vpmax);              		   				\n"	
				+ "     mediump float vp = dot(pd, v.xy);                      		   				\n"
				+ "     if (vp < f  + vpmaxf) {   													\n"
				+ "     } else if (vp < f+ vpmaxf +r*3.1416) {                      		   		\n"
			 	+ "         mediump float a = (vp-f-vpmaxf)/(r)-1.5708;                    			\n"
			 	+ "         v.xyz += vec3((f+vpmaxf+r*cos(a)-vp)*pd, r+r*sin(a));      				\n"
				+ "     } else {                    		   										\n"
			   	+ "        v.xyz += vec3((2.0*(f+ vpmaxf -vp)+3.1416*(r))*pd, 2.0*r);                 \n"
				+ "     }                    		   												\n"
				+ "                                    		   										\n"
				+ "   gl_Position = u_pMatrix  * v  ; 												\n"
				+ "   v_texCoord = a_texCoord;  													\n"
				+ "    				 																\n"
				+ "}                                           										\n";
		String fShaderStr = "precision mediump float;                            \n"
				+ "varying vec2 v_texCoord;                            \n"
				+ "uniform sampler2D s_baseMap;                        \n"
			//	+ "uniform sampler2D s_lightMap;                       \n"
				+ "void main()                                         \n"
				+ "{                                                   \n"
				+ "  vec4 baseColor;                                   \n"
				+ "  vec4 lightColor;                                  \n"
				+ "                                                    \n"
				+ "  gl_FragColor = texture2D( s_baseMap, v_texCoord );   \n"
			//	+ "  lightColor = texture2D( s_lightMap, v_texCoord ); \n"
			//	+ "  gl_FragColor = baseColor * (lightColor + 0.25);   \n"
				+ "}                                                   \n";

 

 

 

 

 

上面仅供大家学习用。

 

 

 

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值