什么是可交互内容

具体案例介绍

▐ 深度图

玩法解析：

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

效果展示：

玩法意义：

▐ 晃动玩法

玩法解析：

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、根据输入的特征点进行三角刨分
    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展示：对室内台灯装饰挂件等 3D 展示效果，任意角度观看细节。场景预览：全景图预览模式，可以转动手机看到整间屋子里的格局布局，任意角度暂停观察。

▐ 场景增强

玩法解析：

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;
}复制代码

效果展示：

玩法意义：

▐ 天气仿真

玩法解析：

效果展示：

玩法意义：

▐ 特效玩法

玩法解析：

效果展示：

玩法意义：

▐ 人物相关：

玩法解析：

效果展示：

玩法意义：

★ 眨眼交互

玩法解析：

效果展示：

玩法意义：

▐ 其他探索

技术沉淀&总结展望

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

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

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

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

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