写点什么

Flash 替代者 PiXiJS 为交互式 App 提供跨平台 WebGL 支持

  • 2019-06-13
  • 本文字数:2021 字

    阅读完需:约 7 分钟

Flash 替代者 PiXiJS 为交互式 App 提供跨平台 WebGL 支持

PixiJS是 Adobe Flash 的一个开源替代品,最近发布了第五个主要版本。PixiJS v5通过一组新的 API 抽象了大量的 WebGL 特性,如果有必要可以回退到 HTML5 的Canvas。开发人员不需要再深入研究 WebGL API,也不需要处理浏览器和设备兼容性问题,就可以创建丰富的交互式图形、跨平台应用程序和游戏。除了一流的 WebGL 支持,新的 PixiJS 还提供了更快的图形和 sprite 渲染,更低的 GPU 利用率,以及升级过的过滤器和纹理。


PixiJS 将自己描述成“HTML5 创建引擎”,是一个渲染库,用于方便地创作交互式内容,包括丰富的图形,这让人想起 Adobe Flash。PixiJS v5 也很关注性能和开发人员体验。用 PixiJS 团队的话来说:


这个项目的目的是提供一个快速的轻量级 2D 库,可以跨所有设备工作。PixiJS 渲染器可以让每个人在不了解 WebGL 的情况下利用强大的硬件加速功能。而且它很快,真的非常快。


PixiJS v5 提供完整的WebGL支持,如果 WebGL 不可用,它将回退到 HTML5 的 Canvas。不过,PixiJS v5 通过一个中间层 API 抽象了底层的 WebGL 特性,该 API 在渲染时会自动优化底层的 WebGL 层。具体地说,中间层 API 包括 Geometry、Shader 和 State,它们用于定义在给定时间点定义图形的 Mesh。通过添加事件处理程序和修改 Mesh 属性将会得到最终的交互式图形。Pixi 的文档给出了一个旋转纹理三角形的例子,通过以下 50 行代码来生成这个三角形:


const app = new PIXI.Application();document.body.appendChild(app.view);const geometry = new PIXI.Geometry()    .addAttribute('aVertexPosition', // the attribute name        [-100, -100, // x, y            100, -100, // x, y            100, 100], // x, y        2) // the size of the attribute    .addAttribute('aColor', // the attribute name        [1, 0, 0, // r, g, b            0, 1, 0, // r, g, b            0, 0, 1], // r, g, b        3) // the size of the attribute    .addAttribute('aUvs', // the attribute name        [0, 0, // u, v            1, 0, // u, v            1, 1], // u, v        2); // the size of the attributeconst vertexSrc = `    precision mediump float;    attribute vec2 aVertexPosition;    attribute vec3 aColor;    attribute vec2 aUvs;    uniform mat3 translationMatrix;    uniform mat3 projectionMatrix;    varying vec2 vUvs;    varying vec3 vColor;    void main() {        vUvs = aUvs;        vColor = aColor;        gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);    }`;const fragmentSrc = `    precision mediump float;    varying vec3 vColor;    varying vec2 vUvs;    uniform sampler2D uSampler2;    void main() {        gl_FragColor = texture2D(uSampler2, vUvs) * vec4(vColor, 1.0);    }`;const uniforms = { uSampler2: PIXI.Texture.from('examples/assets/bg_scene_rotate.jpg') };const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, uniforms);const triangle = new PIXI.Mesh(geometry, shader);triangle.position.set(400, 300);triangle.scale.set(2);app.stage.addChild(triangle);app.ticker.add((delta) => {    triangle.rotation += 0.01;});
复制代码


相比之下,一个静态、无色彩的场景如下所示:



这个需要超过120行代码,以及 40 多次调用 WebGL API。


WebGL(用于 Web 图形库)是一个开源的通用底层图形 Web API。WebGL 命令被设计成直接访问图形处理单元(GPU)的特性集。GPU 是大规模并行处理器,由大量计算单元组成,这些计算单元被设计成彼此并行工作,并与 CPU 并行运行。WebGL 主要用于在不使用插件的浏览器中渲染二维图形和交互式三维图形。WebGL 程序由 JavaScript 编写的控制代码和涉及帧缓冲的特殊效果代码(着色器代码)组成。


WebGL 渲染是一个管道化的过程。使用 WebGL 进行可视化的场景被分解为由三个顶点组成的三角形(镶嵌)。管道的第一阶段(顶点着色)获取三角形并计算它们应该绘制的 Canvas 坐标。WebGL Canvas 是一种三维画布,三个轴的值都是从-1.0 到+1.0。三角形被栅格化(第二管道阶段),然后由片段着色器(第三阶段)绘制,它将颜色、深度和其他相关属性与三角形的每个像素相关联。结果映射存储在 WebGL 帧缓冲区中,因此可以应用帧缓冲操作,如深度测试或混合(第四阶段)。


由于 GPU 和 CPU 之间的通信可能很昂贵,优化图形渲染涉及到最大化 GPU 并行使用和最小化 GPU 和 CPU 之间的同步操作。PixiJS v5 添加了批处理和缓存技术,以在幕后实现这些,从而增强开发者体验。


此外,PixiJS v5 具有较低的 GPU 利用率,并提供升级过的滤器和纹理。


PixiJS 基于 MIT 许可协议。


查看英文原文Pixi.js, HTML5 Alternative to Adobe Flash, Adds WebGL Support for Cross-Platform, Interactive Apps


2019-06-13 08:006799
用户头像

发布了 731 篇内容, 共 448.6 次阅读, 收获喜欢 2002 次。

关注

评论

发布
暂无评论
发现更多内容

国产替代的新领域:用友BIP积极投身信创生态建设

用友BIP

国产替代

IPD(集成产品开发)是什么?适合什么样的团队?

禅道项目管理

自动驾驶中的点云标注:技术与应用

来自四九城儿

点云标注的挑战与未来发展

来自四九城儿

促进协作、提高生产力:育碧选择Perforce Helix Core的原因

龙智—DevSecOps解决方案

游戏开发 育碧 刺客信条

磨刀不误砍柴工,数据压缩,带来的可不止空间节省 | StoneDB数据库观察

StoneDB

数据库 数据压缩 StoneDB

共探AI大模型时代下的挑战与机遇,华为云HCDE与大模型专家面对面

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 7 月 PK 榜

算法总结--ST表

快乐非自愿限量之名

算法

实现价值替代,不只是功能替代

用友BIP

国产替代

10个安全问题带你了解OWASP 定义的大模型应用

华为云开发者联盟

开发 华为云 华为云开发者联盟 企业号 7 月 PK 榜

低代码没有存在感?看看这七个赛道战况!

高端章鱼哥

自动化 低代码 业务自动化 机器人自动化

OpenTiny 前端组件库正式开源啦!面向未来,为开发者而生

英勇无比的消炎药

开源 Vue 前端 UI组件库 angluar

大形势不好的情况下,程序员的护城河是什么?

程序员小毕

Java 程序员 互联网 后端 架构师

使用 INFINI Console 实现 Elasticsearch 的增量数据迁移

极限实验室

数据迁移 infini 实现原理 功能介绍 增量迁移

为什么 MySQL 使用 B+ 树?| StoneDB数据库观察

StoneDB

MySQL 数据库 B+树

OpenTiny 前端组件库正式开源啦!面向未来,为开发者而生

英勇无比的消炎药

开源 Vue 前端 UI组件库 angluar

华为开发者大会2023—我和“华为云”有个约会

华为云PaaS服务小智

云计算 华为云 华为开发者大会2023

Stable Diffusion AIGC:3步成为P图大师

华为云开发者联盟

人工智能 华为云 华为云开发者联盟 企业号 7 月 PK 榜

物联网开发技术 | 社区征文

DS小龙哥

年中技术盘点

让Jira能够按工作流配置审批规则,WorkflowWise全新功能发布

龙智—DevSecOps解决方案

Jira Jira插件 WorkflowWise

StoneDB 源码解读系列|查询模块流程及源码介绍——StoneDB 优化器

StoneDB

数据库 StoneDB

合约编写基础知识介绍基础篇

BSN研习社

驱动您的在线成功:解密香港云主机的关键优势

一只扑棱蛾子

香港云主机

StoneDB 开源社区月刊 | 202301期

StoneDB

开源社区 StoneDB

倒计时3天,京东技术20年实践分享邀您莅临!

京东科技开发者

京东云峰会 企业号 7 月 PK 榜

MySQL 主从延迟的常见原因及解决方法

互联网工科生

MySQL 后端

活动回顾|阿里云 Serverless 技术实战与创新广州站回放&PPT下载

Serverless Devs

云计算 Serverless 弹性计算

点云标注的质量评估与优化

来自四九城儿

Midjourney最强劲的对手来临,SDXL被动开源的浪潮,AI生成图片未来可期 | 社区征文

派大星

年中技术盘点

华为云开发者联盟助力培养数字化人才,加速应用构建质效提升

华为云开发者联盟

云计算 华为云 华为云开发者联盟 企业号 7 月 PK 榜

智慧城市革命!低代码开发平台引领未来城市转型

快乐非自愿限量之名

低代码 智慧城市 数智时代

Flash 替代者 PiXiJS 为交互式 App 提供跨平台 WebGL 支持_语言 & 开发_Bruno Couriol_InfoQ精选文章