Y8Games 中文文档 下载 App

WebGL 与现代浏览器 · 为什么 Flash 被 WebGL 和 HTML5 取代

WebGL 是什么

WebGL（Web Graphics Library）是一个浏览器原生支持的 JavaScript API，让开发者可以在网页里调用图形处理单元（GPU）进行 3D 渲染——效果和 PC 端用 OpenGL 做 3D 游戏一样，只不过运行环境变成了浏览器。

WebGL 基于 OpenGL ES（移动端 GPU 专用的 OpenGL 子集），由 Khronos Group 维护。它的核心特性：

时间线

时间事件
2011 年WebGL 1.0 发布，浏览器开始陆续支持
2013 年主流浏览器全部支持 WebGL 1.0
2017 年WebGL 2.0 发布（基于 OpenGL ES 3.0）
2020 年Adobe Flash 停止分发

所以 WebGL 在 2013 年前后就已经成熟到可以替代 Flash 的 3D 渲染能力，比 Flash 正式退场早了整整 7 年。

WebGL vs Flash 的渲染架构

这是两个技术最核心的区别：

Flash 渲染架构

Flash 用的是 ActionScript 虚拟机 + CPU 软渲染架构：

  1. 开发者写 ActionScript 代码
  2. Adobe Flash Player 解释执行 ActionScript
  3. 矢量图形由 CPU 逐帧软渲染成位图
  4. 音频由 Flash Player 内部解码器处理

整个过程完全在 CPU 上完成——Flash Player 早期有过尝试用 GPU 加速，但一直没成为主力。

WebGL + HTML5 渲染架构

现代浏览器游戏用的是 JavaScript + HTML5 Canvas + WebGL + Web Audio架构：

  1. 开发者写 JavaScript（或 TypeScript）
  2. 浏览器的 JavaScript 引擎（V8 / SpiderMonkey / JavaScriptCore）执行代码
  3. 2D 图形用 HTML5 Canvas 2D API（部分浏览器用 DXGI / Metal 做硬件加速）
  4. 3D 图形用 WebGL API 直接调 GPU 渲染管线
  5. 音频用 Web Audio API（浏览器原生音频处理）

关键差异在于 3D 渲染直接走 GPU——WebGL 可以发挥 GPU 的并行计算能力，而 Flash 的 3D 是 CPU 软模拟出来的。

框架生态

WebGL 本身是底层 API，直接写 WebGL 代码很繁琐。于是有了一系列上层 3D 框架：

框架特点
Three.js最流行的 WebGL 3D 框架，API 友好
PlayCanvas浏览器端 3D 游戏引擎，有可视化编辑器
Babylon.js微软出品，功能完整
Unity WebGLUnity 引擎直接导出 WebGL 版本

Y8 上的很多 WebGL 游戏就是用这些框架做的——比如 CS Dust 可能用了 PlayCanvas，简单的 io 游戏可能直接用 Three.js。

性能对比

拿一个简单的 3D 游戏做对比：

维度Flash 3D（Stage3D）WebGL 3D
渲染方式CPU 软模拟 / 有限 GPU 加速原生 GPU 管线
同复杂度 FPS约 20~30约 60
移动端支持差（移动端 Flash 已死）好（所有移动浏览器都支持）
依赖Adobe Flash Player 插件无

在 Y8 上的体现

Y8 平台上的 WebGL / HTML5 游戏和 Flash 游戏的体验差异非常明显：

相关内容