可交互内容玩法技术揭秘

传统内容增强通过滤镜、标签、贴纸等手段丰富和提升内容的表现力，在抖音快手短视频大行其道的信息快速消费时代，如何通过有趣的玩法，好玩的特效降低用户的创作成本，提高内容表现形态和张力，是目前内容社区可以借鉴和思考的方向之一。

什么是可交互内容

在千篇一律的社区内容 Feed 流里，Timeline 上的一切都是机械的呈现，通过交互创新的玩法来实现内容卡片的个性化、场景化，给用户更多新鲜和趣味的互动方式。对用户来说，内容不是死的，是沉浸式的，可交互的，可把玩的，以给用户新颖的体验。

可交互玩法是一种视觉强化的方式，通过交互创新进行内容重建，赋予静态内容更多的空间表现力。主要手段有：

1、提升维度：深度图，维度重建；裸眼 3D，维度突破。

2、视角变换：视觉图，视角转换；形变图，平面变换。

3、整体相关性形变，包括人物，年龄，妆容等。

4、局部相关性形变，局部晃动，局部流动。

5、其他变换，物理变换，粒子变换，天气变换。

6、场景合成，场景增强等。可以在图片场景，相册场景，视频场景结合具体案例进行玩法创新。

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文手册
专注分享前端知识，你想要的，在这里都能找到

具体案例介绍

深度图

人物，静物，风景，通过对二维图片进行深度信息提取，再根据陀螺仪进行深度视角变换，产生一种伪 3D 交互效果，经典案例如 facebook 的 3D 图片。

玩法解析：

1、先根据原图提取深度信息图，iOS 的双目可以拍出带深度信息的图片，也可以使用深度学习技术直接从原始图片中提取深度信息。

2、使用陀螺仪输出的位姿角 attitude 表征用户视角的变化，根据对应的深度图，以及由 pitch 和 roll 两个位姿角确定的视角变化值。

核心实现：根据深度图信息，结合焦点和深度，随着陀螺仪产生像素偏移变化视角的效果。

vec4 dep = texture2D(depthMap, vTextCoord);vec2 disCords = vTextCoord + offset * (dep.r * -1.0 + params.x) * params.y;gl_FragColor = texture2D(colorMap, disCords);

效果展示：

玩法意义：

深度图其实是一种伪 3D 特效 (2D-plus-depth)，根据陀螺仪轻微旋转视角，给浏览者一种身临其境的感觉，让千篇一律的静态图片内容中出现一些充满惊喜的交互，让图片不仅仅是滑动浏览消费，视角变换带来的感官让浏览者身临其境，富有控制欲，可以反复把玩每一个有趣的细节。

晃动玩法

根据局部圈选的可晃动区域，让内容部分在 feed 流中跟随手势产生抖动效果的交互，咖啡、蛋糕、布丁、煎蛋、脸蛋，宠物，还有各种新奇有趣的创意玩法。

玩法解析：

1、通过控制点生成的贝塞尔曲线圈选可晃动区域。

2、根据每个点到中心的位置随着陀螺仪运动而产生像素偏移。

3、随着与中心点距离的增加，位移呈非线形递减，偏移幅度随时间逐步衰减。

核心实现：根据点到偏移中心的位置，结合陀螺仪的晃动产生周期性像素偏移：

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);

效果展示：

玩法意义：

通过对局部内容的形象化加工，在浏览消费时产生更加真实有趣体感，能够比标签滤镜更能体现出素材内容的核心表达力。通过手势晃动引起内容晃动，让用户对内容细节更加有体感。

流动玩法

蓝天白云，海边天空，头发毛绒、水流、沙滩、衣服裙摆、烟雾等材质都通过动态化的流动，让内容更加生动和具有表现力。

玩法解析：

1、通过触摸手势采集流体方向，这些是变换过程中匹配的动点。

2、对图片内容中静止不动的部分进行固定锚点，防止非流体部分参与运动变换。

3、通过三角刨分和仿射变换不断更新进度，使整个图片运动起来。

核心实现：通过三角刨分一一对应的特征点进行仿射变换

//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;

效果展示：

玩法意义：

动态图能够更生动地展示图片隐含的内容信息，让视觉更加立体和饱满。

视角图

一种全新的用户交互方式，比单张图片更丰富，比短视频更简单，用户主动掌控视角，释放想象力，包括时光轮，长曝光，小动画，3D 展示，全景预览等等特效。

这种扭动手机以看到不同照片的交互，能让浏览者产生一种微妙的感觉。他们会想：‘我能控制这个！’或者‘我可以看我想看的任何一张图片！‘ 把控制的主动权交给用户是件很简单的事情，提高图片把玩性，增加内容的消费形式。

玩法解析：

1、拍一个 6S 短视频，每 1s 截取 4 帧，250ms 获取一张图，跟拍照类似，转一圈自动拍摄；或者独立拍摄 24 张图，这些照片可以是关联的，也可以是相对独立的，也不必是在同一时间拍摄的。用户若想营造出一种时光飞逝或者场景的流转装饰过程的感觉，完全可以将老照片及新照片放在一起进行展示。

2、根据手机陀螺仪的角度变换更换不同视角的照片。

效果展示：

玩法意义：

• 跟静图相比：细节表达，内容更丰富，更立体，故事性、趣味性、互动性；
• 跟视频相比：内容表达，更轻量级，交互更有趣，没有时长的概念可以反复把玩；
• 跟动图相比 ：心情表达，轻量级，可交互，趣味性得到延伸，能够承载更大的场景而不是表情动态图，可以慢慢仔细观察每个视角的细节，让图片更场景化，具有上下文和故事性。比如，时光轮：比如动态展示房屋的装修前 / 装饰后的布局过程，室内灯光冷到暖的变化过程。3D 展示：对室内台灯装饰挂件等 3D 展示效果，任意角度观看细节。场景预览：全景图预览模式，可以转动手机看到整间屋子里的格局布局，任意角度暂停观察。

场景增强

不同于实时视频流里的 VR 增强现实，场景增强是作为一种在静态内容中通过场景合成，营造更多的与场景融合的元素，以增强整个画面的动态感和微妙氛围。水气、水珠、蜡烛、闪光灯、火粒子，烟雾、花草树木等场景增强，还可以与内容和活动结合出可互动的节日氛围和场景玩法以及其他乐趣性的场景化玩法，例如烟花、圣诞、雪花等氛围，吸引用户互动。

玩法解析：

1、通过视频文件对合成场景进行加工，包含原场景和其透明通道的遮罩层。

2、通过预处理将原图通过遮罩层与真实场景根据编辑的位置进行融合。

核心实现：通过将预处理将遮罩层渲染到 FBO 预处理，再根据透明度做场景合成。

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;
}

效果展示：

玩法意义：

通过场景合成的方式，可以扩展出成千上万的有趣玩法，让内容的额外表现力更加丰富。

天气仿真

雾气，阳光、白云、雪花、水滴地面、水雾玻璃、水纹、彩虹、气泡，星空等仿真天气特效。

玩法解析：

通过纯 shader 实现仿真天气效果，和原内容进行混合。

效果展示：

玩法意义：

通过原生 glsl 实现各种高帧率仿真天气特效，成本低，易于线上验证和发布。部分天气效果配合陀螺仪还可以产生有趣的交互玩法。

特效玩法

转场玩法：图片切换，视频转场特效

抖音特效：故障、闪烁、灵魂出窍等抖音特效

粒子系统：雪花、彩带、光圈等标准 plist 粒子文件

玩法解析：

通过转场变换特效和粒子系统，将抖音里的特效玩法迁移到内容社区中。

效果展示：

http://mpvideo.qpic.cn/0bf2u4aaiaaazaaajm3snnpfbj6dastqabaa.f10002.mp4?dis_k=be4af4934dc7f95050b1335412474f5f&dis_t=1585310586

玩法意义：

将短视频里常见的特效玩法，放到内容社区，动与静的灵感碰撞，创造出更多有趣的玩法。

人物相关：

抖音大火的人脸特效包括变老变年轻，人脸变换，宝宝特效，也可以在内容社区通过合理玩法结合起来。

★ 人脸变换

多张不同时期的图片人脸变换产生时光流逝的效果。

玩法解析：

通过人脸关键点进行三角刨分，再多图间进行仿射变换，产生抖音的人脸变换的玩法。

效果展示：

玩法意义：

相比单独的多张自拍，更有趣味性和可玩性。脱离抖音的视频环境，人物图集的变换玩法也可以搞点有趣的事情, 可以跟陀螺仪结合或者图集自动播放：人脸或者宠物图集的动态转场效果，例如作为尝鲜功能让用户解锁，降级时还是正常图片 Gallery。

★ 眨眼交互

当图片收到点赞之后，和图片内的人物会有互动，比如眨眼的 BulingBuling 特效，丰富点赞的情感和交互。从交互细节上增强用户体感，给用户更多的正反馈。

玩法解析：

通过人脸识别关键点求出人眼位置，再通过局部纹理挤压变形实现眨眼效果。

效果展示：

玩法意义：

通过小细节交互，产生额外的互动行为，给用户交互行为更多的正向反馈，增加好感度和互动趣味性，促使和鼓励用户进行更多的交互互动行为探索。

其他探索

裸眼 3D：splitDepth 的两种经典形式：

图片重建，场景重建等

技术沉淀 & 总结展望

通过在交互玩法方向上的探索学习，沉淀了一套基于 OpenGL 的交互组件库，为什么是 OpenGL ，而不是用原生 native 来实现这些效果？

1、高性能，充分利用 GPU 的运算渲染能力。

2、动态化，封装标准输入输出，脚本动态下发。

通过不断的建设和完善，对外整体提供一套可扩展的交互组件库和产品数据分析能力。

内容社交只是形式，晒才是用户的核心需求，通过交互创新，希望能够帮助内容社区扩展内容玩法和多元化，提升内容的表现力和趣味性，从交互细节打动用户，建立口碑；从交互玩法打造爆点，扩大影响 (打造标志性交互: 比如微信的摇一摇、探探的左划右划、QQ 的拖动消除气泡等)。让有质量有温度的内容带来更多的交互和留存， 希望能够有更多有价值的落地场景。

作者：
链接：https://www.infoq.cn/article/CIvA9J0izqxLqWKE0UKh