【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

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

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

关注

评论

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

第一周UML作业

吴建中

面试了 6 轮 Google中国 之后,还是挂了

程序猿石头

面试 谷歌Google 经验分享 面经

带你学够浪:Go语言基础系列 - 8分钟学复合类型

程序员柠檬

后端 Go 语言

scala callback hell

HackMSF

编程 最佳实践

HBase 常用 Shell 命令手册

Rayjun

Java HBase

食堂就餐卡系统设计

大雄

ARTS 打卡 WEEK3

编程之心

ARTS 打卡计划

第一周作业

andy

使用 Docker Desktop 中的 Kubernetes

FeiLong

Docker Kubernetes

作业1-食堂就餐卡系统设计

A Matt

mybatis 逆向工程使用姿势不对,把表清空了,心里慌的一比,于是写了个插件。

why技术

Java 源码 mybatis

ARTS打卡Week 03

teoking

ios LeetCode

第一周总结

andy

第一周总结

ARTS-02

NIMO

ARTS 打卡计划 ARTS活动

架构文档-作业01

ashuai1106

UML

架构师训练营-学习笔记-第一周

心在飞

极客大学架构师训练营

架构师训练营练习:食堂就餐卡系统设计

Shawn

SpringBoot整合Quartz实现任务定时

北漂码农有话说

SpringBoot 2

软件建模与设计文档

大雄

UML

ngrok穿越本地服务器,极客大学架构师训练营 第一课总结,John 易筋 ARTS打卡Week 03

John(易筋)

极客时间 极客大学 ngrok

第一周学习总结

A Matt

极客大学架构师训练营

公司出了一款新产品,要不要招代理商?

石云升

用户增长 价值网依赖 产品定位 新产品

年龄性别的问题,好像也不是太大问题……

zhoo299

生活 随笔

[安利] WSL Linux 子系统,真香!附完整实操

猴哥一一 cium

Docker Linux 推荐 WSL2 Windows 10

MySQL 笔记(二)日志系统

奈何花开

Java MySQL

ARTS-WEEK1

Allen

ARTS-week-2

youngitachi

ARTS 打卡计划

程序员的晚餐 | 6 月 7 日 豆腐年糕

清远

美食

图解Java垃圾回收算法及详细过程!

周果

Java JVM 虚拟机 垃圾回收机制

极客时间 - 架构师训练营 - week1 - 作业2

jjn0703

极客大学架构师训练营

史上最诡异问题,iOS 单例初始化两次,你遇到过吗?

liu_liu

ios 初始化 单例 两次

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