#01.

WebGL 是什么

WebGL 是一种通过控制 GPU 着色器实时渲染，在网页上绘制复杂图形变化的技术。越来越多的品牌用 WebGL 来实现网页动效，给用户带来惊喜的交互。

#02.

WebGL + 网页创意

能做什么？

WebGl 与3D建模技术、空间模型算法结合可以在网页内呈现具有空间感的动态视效。「网页 3D 展馆」「网页虚拟空间」「网页模拟物理特效」都是 WebGL 技术的经典应用场景，让我们来看几个WebgGL 在网页、小程序、与 APP 内的应用案例。

直播间互动 

「Reno5 繁星之夜发布会直播间」

在网页直播间埋下“彩蛋”，用户用弹幕触发关键词，降下一场满屏幕的流星雨：

交互 Banner 

「OPPO Findx3 火星定制机预发布官网开屏页」

在 Banner 处安置一个可交互「海报」，光标掠过，网页上吹开火星尘埃 ，为预发布产品设置悬念：

       产品360度展示

 「OPPO FindN 3D展厅」

让用户在电商 APP 或网页内自由拖拽，360 度体验与真机一模一样的虚拟商品：

「抽象概念表达」

 「OPPO 系列技术专题页」

在介绍「技术」「文化」等抽象产品时，使用参数化的线条、粒子、波形把「科技/文化体验」可视化，更有科技感和感染力。

    粒子动效表达 5G 与万物互联概念

    电子光束与追随光标迁跃的轨迹表达闪充概念

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 把真实的噪音音频可视化表达耳机降噪效果

#03.

WebGL 与 视频动效

如何选择？

除了 WebGL 在网页中插入视频与序列帧动效也能呈现出相似的视觉效果，那么在进行网页设计时如何选择动效方案呢？我们从交互性、适配性、加载性能三个维度做一下比较：

 交互性：

WebGL > 视频/序列帧动效

WebGl 和视频动效的差异就像游戏和电影的差异。序列帧动效只能展示固定内容，交互有限。WebGL 可以通过不同的交互随机产生响应变化，像游戏一样更具有沉浸感和交互感。

WebGl 动效可实时模拟各种物理运动，可与鼠标、触屏各种交互结合产生更多及时响应的有趣创意。而视频/序列帧动效只能通过绑定鼠标滚轴或点击/滑动触发播放固定的内容。比如用序列帧去实现一个「伪」360度展厅，用户只能看设定好的运动角度。而用 WebGL 展示的 360 度展厅，用户可以随机拖拽、转换角度，像 3D 游戏一样通过浏览器的实时渲染看到产品任意角度，每个细节。

 适配性：

WebGL >视频/序列帧动效

各家浏览器对视频自动播放的支持可以说是群魔乱舞。但WebGL就很纯粹-能做就是能做，不行就是不行。但已经2022年了，大家表示我都可以！-----甚至包括 IE

UC、百度、微信、和各家厂商的自带浏览器的视频适配方案各有各的魔性 - 默认不播放、默认全屏播放、自带视频插件样式框，对于各家浏览器品牌的任性，前端工程师早就麻了— 打不过就降级。  在同时重性能与视觉表现的网页开发中涉及视频动效部分必须有针对各家浏览器的降级方案，这也导致了视频动效在小众浏览器上表现打折扣。但 WebGL 基于本地 GPU 实时渲染，不需要加载视频就没有这样的烦恼。而硬件行业也很卷的今天，绝大部分手机的 GPU 也都可以完美支持。

加载性能：

WebGL > 视频/序列帧 动效

一个1080p 60帧 3s 简单色彩应用的视频精致优化后大致 2～7M。但多数 WebGL无需从服务端下载资源到用户本地，由算法控制 GPU 着色器运算实时渲染在网页前端来模拟各种物理效果，可快速打开，用户不会因等待加载跳出。用在 KV 、开屏页等既需要快速加载又需要视觉冲击力的场景就非常合适了。

但对产品细节还原度较高的 3D 展厅、虚拟世界等应用场景则需要较大的3D模型静态资源加载，通常更适合做成独立跳转页面，避免影响整个网页的转化。

WebGL 实现粒子动效往往无需静态资源加载

视觉精致度：

视频/序列帧 动效> WebGL 

同样的，在精致程度的表现上 WebGl 和视频动效的差异也是游戏和电影的差异。

一个几秒的短片诞生背后是几台 1080ti 数小时的算力加持和后期老师的肝功能奉献。而 WebGL 依赖的是所有用户个人电脑或手机的实时渲染能力，所以在产品局部细节展示、CMF 表现等具象表达的精彩程度上就不及视频/序列帧动效了。

当然在具体的设计实践中，WebGL 与视频序列帧动效并非绝对的非此即彼，将二者巧妙结合着重利用视频序列帧动效的精致视觉展示和 WebGL 的交互性，结合设计主题就能创造更加精美的动效作品。

#04.

WebGL 越来越火？

时至今日， WebGL 在数字品牌和数字营销中的应用已经从单纯的炫技到了非常普及的程度。随着 NFT 与元宇宙的概念炒作和审美教育，消费者也越来越能从这些可交互、3D、抽象的视觉语言中获得品牌科技高级感的认知。国外品牌中无论是科技巨头Tesla、Apple、还是时尚奢品爱马仕、LV以及最会利用「科技概念」包装营销的区块链行业都在使用 WebGL 技术在品牌网页中做创新，用算法给用户呈现惊喜的网页交互，很多基于网页的元宇宙项目也是 WebGL 技术的作品。

Apple AirPods Pro 官网的空间音效表达

The Game Awards 微宇宙

Secret Sky 2021 线上音乐节

以上就是关于 WebGL 在数字营销和数字品牌中的应用介绍。欢迎关注执楠科技，一起探索更多技术与创意，打造精彩作品！

_

· follow us · 

iphone 12 产品站解析

iMac 产品站解析