NVIDIA 初创加速计划,免费加速您的创业启动 了解详情
写点什么

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:006541
用户头像

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

关注

评论

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

如何判断候选人与岗位的匹配程度?

石云升

极客时间 1月月更 技术领导力实战笔记

企业架构治理指什么,如何做?

涛哥 数字产品和业务架构

架构治理 企业构架

如何妥善且优雅地做好解聘工作?

石云升

极客时间 1月月更 技术领导力实战笔记

模块六作业

Ryan

架构

空降负责人如何与团队建立信任?

石云升

极客时间 1月月更 技术领导力实战笔记

海外拥有最庞大社区人群的Verasity($VRA),后市值得期待

股市老人

CleanMyMac X2024版本值不值得买?

茶色酒

CleanMyMac X CleanMyMac X2023

如何用Know Streaming来查询Kafka的消息

石臻臻的杂货铺

Kafk

精华推荐 | 【深入浅出 RocketMQ原理及实战】「底层源码挖掘系列」透彻剖析贯穿RocketMQ的消费者端的运行核心的流程(上篇)

洛神灬殇

RocketMQ 消息队列 原理分析

FPGA:Verilog HDL程序的基本结构

timerring

FPGA

你知道这个提高 Java 单元测试效率的 IDEA 插件吗

JAVA旭阳

Java

GLM国产大模型训练加速:性能最高提升3倍,显存节省1/3,低成本上手

OneFlow

人工智能 深度学习

IntelliJ中高效重构的 10 个快捷方式

JAVA旭阳

Java

模块5 微博高性能计算架构设计

KING

国产 ETL工具 ETL产品 数据交换系统

weigeonlyyou

postgresql hadoop elasticsearch Prometheus 时序数据库

2022年回顾:一个37岁中年程序员的一百场面试

无人之路

自动驾驶 面试 求职 大厂 跳槽

影响产品开发决策的认知偏见

俞凡

认知

复习前端:CSS

devpoint

CSS Flex scss BFC

会声会影2023功能强大的视频编辑软件

茶色酒

会声会影2023

CrossOver2023软件Mac电脑版虚拟机安装包

茶色酒

CrossOver2023

PHP转Go实践:xjson解析神器「开源工具集」

王中阳Go

php golang 高效工作 学习方法 Go web

OneFlow v0.9.0正式发布

OneFlow

人工智能 深度学习

极客时间运维进阶训练营第12周作业

独钓寒江

FPGA:逻辑功能的仿真与验证

timerring

FPGA

复习前端:浏览器渲染机制

devpoint

DOM CSSOM 渲染树 重绘 重排

什么是AirServer?2024版本如何下载安装包

茶色酒

AirServer

问题代码定位神器: Git Bisect

俞凡

git

Verilog HDL仿真常用命令

timerring

FPGA

简述styled-components性能

devpoint

CSS React 样式组件 前端性能

消息队列存储数据消息Mysql设计

闲人Eric

架构实战营

设计微博系统中”微博评论“的高性能高可用计算架构

悟空

架构 高可用 高性能 微博评论

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