图形渲染相关
文章平均质量分 90
学习Web Canvas等图形渲染以及渲染引擎相关
玉案轩窗
这个作者很懒,什么都没留下…
展开
-
PIXI入门系列之基本使用(下篇)
本篇文章主要介绍纹理Texture、滤镜Filter、Mesh和Shader、渲染器相关的知识,这其中会涉及到的一些3D概念。PIXI底层使用WebGL/WebGPU来实现绘制,想要深入的理解PIXI必然要去学习3D知识,这是绕不开的,本文会尽可能的说明相关的3D概念从而加深对PIXI的理解。本文对应的PIXI版本是v8.1.0。本文介绍了纹理Texture、Mesh和Shader、滤镜Filter、WebGL渲染器以及涉及到的相关3D知识,可以结合官网相关细节从而加深对PIXI的理解和使用。原创 2024-04-28 22:09:15 · 408 阅读 · 0 评论 -
PIXI入门系列之基本使用(上篇)
在之前文章PIXI开篇中对于PIXI的定位以及历史进行了说明,相信对PIXI整体有了一定的认知,本篇是入门系列的第二篇,本篇文章主要介绍相关PIXI API的具体使用以及一些关键知识点,相关的细节性还是需要结合PIXI API文档来具体查看。本篇文章熟悉PIXI基本API的使用,主要介绍了如下Application、Container、Sprite、Graphics、Text、Ticker、Assets的基本使用以及一些关键点。原创 2024-04-27 18:02:41 · 646 阅读 · 0 评论 -
PIXI入门系列之开篇
入门篇主要是熟悉PIXI的API使用源码篇顾名思义则是PIXI源代码的分析,主要学习其架构逻辑以及相关性能优化处理PIXI是什么以及应用场景PIXI的大体发展历史,从而对其有较为完整的认知本篇文章主要是去了解PIXI是什么、应用场景以及目前的底层技术发展,对于全局理解PIXI有着很好的帮助,一些具体的细节可以去PIXI官网去了解。目前主流的浏览器基本上都支持WebGL,通常情况下无需考虑PIXI底层使用什么技术来实现图像渲染,关注业务逻辑本身就行。PIXI的定位是渲染2D视觉内容。原创 2024-04-26 17:44:00 · 359 阅读 · 0 评论 -
Konva离屏缓存
cache实例方法定义在Node基类上,通过该方法可以实现图形缓存,在Konva中Stage、Layer、Group、Shape等所有容器类和图形类都直接或间接继承了Node基类,故而都可以使用缓存方法。本篇文章就是探讨Konva背后的缓存机制,版本是v9.2.1。Konva缓存本质上就是创建位于内存中的Canvas图层,将当前图形绘制到CachedCanvas中,之后渲染时使用drawImage将整个CachedCanvas绘制到场景中,从而减少向CPU发送操作指令进而实现性能的提升。原创 2023-09-29 19:11:22 · 246 阅读 · 0 评论 -
Konva事件机制
不同于HTML或SVG标签可以直接绑定事件,Canvas是使用JavaScript来绘制内容,这意味着其内容没有具体的DOM,所以Canvas渲染引擎都会自己实现一套事件机制。Konva的事件机制支持图形的选中、拖拽等交互处理,同时还支持单个图形对象绑定对应的事件。Konva版本是v9.2.1。Konva实现的事件机制可以实现图形对象绑定事件,实际上所有继承自Node基类的类,都可以使用on等实例方法来监听对应事件。原创 2023-09-28 20:23:47 · 459 阅读 · 0 评论 -
Konva批量渲染
Konva作为优秀的Canvas渲染引擎之一,其内部存在很多优化策略,这些优化策略就是构建其高效的基石,批量渲染机制就是其中之一。批量渲染就是将多次更新操作合并为一次,减少渲染的次数。批量渲染机制在前端领域的应用非常广泛,像Vue、React等框架中都存在,例如Vue异步队列渲染等。本篇文章探究Konva的渲染流程,Konva版本是v9.2.1。Konva对于图形的更新渲染逻辑与初始化时渲染逻辑是相同的,最后都会通过batchDraw来实现绘制逻辑,只是触发的来源不同而已。原创 2023-09-27 21:02:09 · 373 阅读 · 0 评论 -
Konva基本处理流程和相关架构设计
canvas是使用JavaScript基于上下文对象进行2D图形的绘制的HTML元素,通常用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。基于Canvas之上,诞生了例如 PIXI、ZRender、Fabric、Konva等 Canvas渲染引擎,兼顾易用的同时保证了优秀可靠的渲染性能。虽然对PIXI、Fabric也有所了解,但个人最早接触的是Konva,之后的系列文章都是基于Konva进行学习总结,涉及到其相关架构设计、优化策略等方面,Konva版本是v9.2.1。原创 2023-09-26 20:41:50 · 1569 阅读 · 0 评论