那些有趣的玩法!满足用户的花式晒图
2020/4/16 11:09:19
本文主要是介绍那些有趣的玩法!满足用户的花式晒图,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
![](/upload/202004/16/202004161109052847.png)
什么是可交互内容
具体案例介绍
▐ 深度图
![1_NG8D-zi5u-dS6rGVYtFcfQ.gif](/upload/202004/16/202004161109062643.png)
玩法解析:
![](/upload/202004/16/202004161109063795.png)
![](/upload/202004/16/202004161109071061.png)
vec4 dep = texture2D(depthMap, vTextCoord); vec2 disCords = vTextCoord + offset * (dep.r * -1.0 + params.x) * params.y; gl_FragColor = texture2D(colorMap, disCords);复制代码
效果展示:
![](/upload/202004/16/202004161109081862.png)
玩法意义:
▐ 晃动玩法
玩法解析:
![2019_12_19_22_16_38.gif](/upload/202004/16/202004161109084763.png)
vec2 offset = getOffset(sketch.PointLT, sketch.PointRT, sketch.PointRB, sketch.PointLB, sketch.Center, sketch.Time, TextureCoordsVarying, sketch.Direction, sketch.Amplitude); vec4 mask = texture2D(Texture, TextureCoordsVarying + offset); gl_FragColor = vec4(mask.rgb, 1.0);复制代码
效果展示:
![](/upload/202004/16/202004161109090281.png)
玩法意义:
▐ 流动玩法
![2019_12_20_12_53_10.gif](/upload/202004/16/202004161109100994.png)
玩法解析:
![2019_12_19_22_12_29.gif](/upload/202004/16/202004161109107332.png)
//1、根据输入的特征点进行三角刨分 Rect rect(0, 0, size.width, size.height); Subdiv2D subdiv(rect); for (vector<Point2f>::iterator it = points.begin(); it != points.end(); it++) subdiv.insert(*it); std::vector<Vec6f> triangleList; subdiv.getTriangleList(triangleList); //2、通过仿射变换对边界框内所有像素点进行仿射投影,最后根据进度加权求的最终这个三角形的像素值 applyAffineTransform(warpImage1, img1Rect, t1Rect, tRect); applyAffineTransform(warpImage2, img2Rect, t2Rect, tRect); Mat imgRect = (1.0 - alpha) * warpImage1 + alpha * warpImage2; multiply(imgRect, mask, imgRect); multiply(img(r), Scalar(1.0, 1.0, 1.0, 1.0) - mask, img(r)); img(r) = img(r) + imgRect;复制代码
效果展示:
![](/upload/202004/16/202004161109118172.png)
玩法意义:
▐ 视角图
![视觉图_漫画.gif](/upload/202004/16/202004161109122137.png)
玩法解析:
效果展示:
![](/upload/202004/16/202004161109130380.png)
玩法意义:
- 跟静图相比:细节表达,内容更丰富,更立体,故事性、趣味性、互动性;
- 跟视频相比:内容表达,更轻量级,交互更有趣,没有时长的概念可以反复把玩;
- 跟动图相比 :心情表达,轻量级,可交互,趣味性得到延伸,能够承载更大的场景而不是表情动态图,可以慢慢仔细观察每个视角的细节,让图片更场景化,具有上下文和故事性。比如,时光轮:比如动态展示房屋的装修前/装饰后的布局过程,室内灯光冷到暖的变化过程。3D展示:对室内台灯装饰挂件等 3D 展示效果,任意角度观看细节。场景预览:全景图预览模式,可以转动手机看到整间屋子里的格局布局,任意角度暂停观察。
▐ 场景增强
![合成_烛光.gif](/upload/202004/16/202004161109134520.png)
玩法解析:
![](/upload/202004/16/202004161109138417.png)
if(uTextureType==0){//仅输出上半部分到FBO vec2 topTexCoord=vec2(vTexCoord.x,vTexCoord.y*0.5); gl_FragColor=texture2D(sTexture, topTexCoord); }else if(uTextureType==1){ //仅输出下半部分FBO vec2 botTexCoord=vec2(vTexCoord.x,1.0-mod(1.0-vTexCoord.y*0.5,0.5)); gl_FragColor=texture2D(sTexture, botTexCoord); }else if(uTextureType==2){//根据遮罩层合并FBO到主屏 vec4 bgColor=texture2D(samplerBg,vTexCoord); vec4 topColor=texture2D(samplerTop,vTexCoord); vec4 btmColor=texture2D(samplerBtm,vTexCoord); gl_FragColor=bgColor * (1.0-btmColor.r) + topColor * btmColor.r; }复制代码
效果展示:
![](/upload/202004/16/202004161109144228.png)
玩法意义:
▐ 天气仿真
玩法解析:
效果展示:
![](/upload/202004/16/202004161109151474.png)
玩法意义:
▐ 特效玩法
玩法解析:
效果展示:
![](/upload/202004/16/202004161109160635.png)
玩法意义:
将短视频里常见的特效玩法,放到内容社区,动与静的灵感碰撞,创造出更多有趣的玩法。
▐ 人物相关:
玩法解析:
![image.png](/upload/202004/16/202004161109162168.png)
效果展示:
![](/upload/202004/16/202004161109176358.png)
玩法意义:
★ 眨眼交互
![1577977068403.gif](/upload/202004/16/202004161109178663.png)
玩法解析:
效果展示:
![人脸_ 眨眼.gif](/upload/202004/16/202004161109180636.png)
玩法意义:
▐ 其他探索
![分割3D.gif](/upload/202004/16/202004161109183546.png)
![跳出3D.gif](/upload/202004/16/202004161109190304.png)
![图片转3D.jpg](/upload/202004/16/202004161109191681.png)
技术沉淀&总结展望
通过在交互玩法方向上的探索学习,沉淀了一套基于 OpenGL 的交互组件库,为什么是 OpenGL ,而不是用原生native来实现这些效果?
1、高性能,充分利用GPU的运算渲染能力。
2、动态化,封装标准输入输出,脚本动态下发。
通过不断的建设和完善,对外整体提供一套可扩展的交互组件库和产品数据分析能力。
内容社交只是形式,晒才是用户的核心需求,通过交互创新,希望能够帮助内容社区扩展内容玩法和多元化,提升内容的表现力和趣味性,从交互细节打动用户,建立口碑;从交互玩法打造爆点,扩大影响(打造标志性交互:比如微信的摇一摇、探探的左划右划、QQ 的拖动消除气泡等)。让有质量有温度的内容带来更多的交互和留存, 希望能够有更多有价值的落地场景。
这篇关于那些有趣的玩法!满足用户的花式晒图的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)