首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏jQuery每日经典

    GCanvas 渲染引擎介绍

    用一句话来概括 GCanvas,即遵循 W3C 标准,移动端的跨平台的高性能图形渲染引擎。可以从三个方面来解释。 我们将其称为渲染引擎内核。并通过交叉编译,使得可以适配 Android、iOS 这两大主流移动平台,因而具有跨平台的特性。 的图形渲染能力的支持。 使用了 GCanvas 则不需要经过 WebView 内部的复杂逻辑处理和图层树渲染,而是让 JavaScript 通过桥接方式直接调用渲染引擎内核(OpenGL ES)。 Chart 图标渲染 Chart 图标库的渲染效果 基于图表库,不同类型的图表渲染测试。

    1.5K10编辑于 2022-01-20
  • 来自专栏前端小馆

    浅谈 Canvas 渲染引擎

    因此,大部分 Canvas 渲染引擎都会内置了一些性能优化手段。 常见的性能优化手段有离屏渲染、脏区渲染、异步渲染等等。 3. 性能 由于 Canvas 渲染引擎都会进行大量的封装,所以开发者想针对底层做性能优化是非常难的,需要渲染引擎自身去支持一些优化。 飞书文档多维表格没有做 Canvas 渲染分层,但对各种交互响应速度非常快,也是得益于底层渲染引擎对脏矩形渲染的支持,它的性能也是所有同类产品里面最好的。 跨平台 很多 Canvas 渲染引擎并不满足于只做 Canvas,一般还会支持一些其他的渲染模式,比如 SVG 渲染、WebGL 渲染、WebGPU 渲染等等。 但很多 Canvas 渲染引擎本身也支持 SVG 渲染,即使不支持,也可以通过 canvas2svg 这个库来进行转换。

    3.6K20编辑于 2023-03-16
  • 来自专栏柒八九技术收纳盒

    Chromium 最新渲染引擎--RenderingNG

    ❞ 而这篇文章的原文是负责Blink中渲染引擎研发的主管所写。无论是从专业角度和时间新鲜程度(2021年)都「墙裂推荐」。 渲染进程中的主线程 2. 渲染进程中的合成线程 3. (每个关键节点中都会有自己特定的数据格式,这个我们会有一篇文章介绍) ❝渲染过程主要涉及到 1. 渲染进程中的主线程 2. 渲染进程中的合成线程 3. ❝如果一个frame是在一个渲染进程中渲染的,那么它就是该进程的「本地框架」,否则就是「远程框架」。 ❞ 根据帧的渲染过程为其着色。 Blink 渲染器 告诉 合成器compositor 它需要开始渲染操作 合成器compositor 告诉Viz它需要进行渲染 Viz将渲染的「开始信号」传回给合成器。

    2.1K10编辑于 2022-08-25
  • 来自专栏前端全栈分享

    Event Loop 和 JS 引擎渲染引擎的关系

    本文会讲 JS 引擎的编译流水线、渲染引擎渲染流程,然后引入为什么需要 event loop。 渲染引擎 渲染时会把 html、css 分别用 parser 解析成 dom 和 cssom,然后合并到一起,并计算布局样式成绝对的坐标,生成渲染树,之后把渲染树的内容复制到显存就可以由显卡来完成渲染。 如何结合 JS 引擎渲染引擎 不管是 JS 引擎、还是渲染引擎,都比较傻(纯粹),JS 引擎只会不断执行 JS 代码,渲染引擎也是只会布局和渲染。但是要完成一个完整的网页应用,这两者都需要。 (后来加了 web worker,但不是主流) 我们知道,JS 引擎只知道执行 JS,渲染引擎只知道渲染,它们两个并不知道彼此,该怎么配合呢? 答案就是 event loop。 总结 总之,浏览器里有 JS 引擎做 JS 代码的执行,利用注入的浏览器 API 完成功能,有渲染引擎做页面渲染,两者都比较纯粹,需要一个调度的方式,就是 event loop。

    2.9K20发布于 2021-07-05
  • 来自专栏前端二次元

    Skyline 渲染引擎——更接近原生渲染的性能体验

    Web 技术至今已有 30 多年历史,作为一款强大的渲染引擎,它有着良好的兼容性和丰富的特性。 为了进一步优化小程序性能,提供更为接近原生的用户体验,我们在 WebView 渲染之外新增了一个渲染引擎 Skyline,其使用更精简高效的渲染管线,并带来诸多增强特性,让 Skyline 拥有更接近原生渲染的性能体验 而 Skyline 只有 AppService 线程,且多个 Skyline 页面会运行在同一个渲染引擎实例下,因此页面占用内存能够降低很多,还能做到更细粒度的页面间资源共享(如全局样式、公共代码、缓存资源等 由于 WebView 的内存占用较大,页面层级最多有 10 层,而 Skyline 在内存方面更有优势,因此在连续 Skyline 页面跳转(复用同一引擎实例)的情况下,不再有该限制。 (img-zIr6ldp8-1688353807103)快速体验环境要求目前,安卓微信 8.0.33、iOS 微信 8.0.34 起内置了 Skyline 渲染引擎,可先更新到该版本,预览时通过强切开关打开

    1.6K50编辑于 2023-11-30
  • 来自专栏进击的多媒体开发

    01-什么是渲染引擎

    在开始写代码之前,要先明确渲染引擎到底是什么东西,才能知道要写什么东西。 在 Google 里面搜索 ? 渲染引擎关键字,出来的结果都是关于浏览器渲染引擎的。 不过,一方面能看出,搜索引擎对于渲染引擎的定位更偏向于浏览器渲染了,另一方面也是我们搜索的关键字不够清晰准确。 我本想知道渲染引擎用代码写出来之后运行起来是个什么效果,结果就来几张图片,有点 开局一张图,内容全靠编 的感觉。 后来我才知道,原来这些图就是用渲染引擎渲染出来的效果图。 如果渲染引擎渲染的一张图,你看着就和在现实中用相机拍的图片一样,根本分辨不出是现实还是模拟的,那说明这渲染引擎造诣很早,技术上已经很逼真了。 说到这里,有人会觉得这渲染引擎和游戏引擎很类似。是的,渲染引擎更像是游戏引擎的子集,一个很重要的子集,在实现的时候都会去参考游戏引擎的架构设计、功能特点,算是摸着游戏引擎过河了。

    4.2K10发布于 2021-01-14
  • 来自专栏前端小馆

    LeaferJS,全新的 Canvas 渲染引擎

    前言 前几天群里有人发了一个新 Canvas 渲染引擎的图片,看数据和宣传口号相当炸裂,号称只用 1.5s 可以渲染 100 万个矩形,还是个国产的。 Creator 提供了一系列创建方法,其中 renderer 是创建了一个渲染器,里面封装了 Canvas 渲染的核心机制。 请求渲染之后,就会放入一个 requestAnimateFrame 里面进行下一帧渲染,这样做是为了提升性能做批量更新,避免大量属性修改的时候频发触发更新。 3.1 可视区域渲染 先来看一下 fullRender 方法,这个是全量渲染,不会去计算最小渲染区域。当初次渲染或者设置了 usePartRender 为 false 的时候就会走全量渲染。 事件拾取 事件拾取也是 Canvas 渲染引擎里面的一个核心功能,一般来说 Canvas 在 DOM 树里面的表现只是一个节点,里面的形状都是自己绘制的,因此我们无法感知到用户当前触发的是哪个形状。

    1.4K10编辑于 2023-10-16
  • OpenGL渲染引擎-设计与实践

    它被广泛用于实现2D和3D图形渲染,并且是许多应用程序、游戏和网页浏览器的核心组件。一、OpenGL的主要特性1. 低层次的渲染 API:OpenGL 提供了直接与图形硬件进行交互的能力。 PipeLine;在 C/S结构 这节,则介绍 OpenGL C/S 结构给 OpenGL 带来的一些对于初学者看起来可能觉得奇奇怪怪的东西.三、核心模式与立即渲染模式:早期OpenGL使用立即渲染( OpenGL的优点包括:成为绘图引擎的标准,绘图质量高,编程相对复杂但上手简单,适合追求完美的绘图精确度。跨平台支持,可以在多个操作系统上使用,包括Windows、Linux和Mac等。 提供了一整套用于游戏开发的API,包括Direct3D用于3D图形渲染、Direct2D用于2D图形渲染等。与Windows紧密相连,难以移植,但提供了强大且方便的IDE和GPU语言调试工具。 要做游戏,游戏引擎甚至需要的图形学知识很少,基础图形学完全足够,游戏引擎更着重的是全套工具链和细节性能优化,尤其是全套工具链,游戏开发需要很多各种功能,场景编辑 动画 骨骼 地形天空 基础特效光照粒子系统

    1.1K10编辑于 2024-06-03
  • 来自专栏开源心路

    3D渲染引擎介绍

    背景 专业处理视觉呈现的渲染库。 3D引擎从商业属性上分为:商业引擎和开源引擎,从业务领域上分为:游戏引擎、GIS引擎、仿真引擎等,部分引擎可能具备多种领域组合,开发语言涉及包括:C++、C#、Java、JavaScript、GLSL及各类脚本等 引擎列表 UE4游戏引擎-商业引擎(源码开源)-游戏引擎-C++及脚本 UE4, 开发语言C++和蓝图。UE4是3A游戏开发者引擎的首选,它以逼真的渲染效果著称。 总结一下Unity的特点: 能制作精美的3D游戏画面,和定制渲染管线,画面效果不如UE4。 能制作各种类型的3D游戏上线,每种类型的游戏都被商业项目验证过。 缺点 可视化和渲染效果不如游戏引擎,不过国内有一些厂家也定制了渲染管线,提升了渲染效果。

    1.6K10编辑于 2023-06-30
  • 来自专栏进击的多媒体开发

    跨平台渲染引擎之路:拨云见日

    ,这篇文章之于之后构建渲染引擎之路来说,无异于拨云见日的作用。 实现一个渲染引擎需要点亮哪些技能点?哪些是必须技?哪些可以边做边点亮? 渲染引擎的基本渲染流程是什么样的? 目前有哪些出色的渲染引擎?怎么筛选参考引擎?参考哪些? 3D引擎着色方式的演化史 这部分内容是我在寻找渲染流程过程中的额外收获,虽然说的是演化史,但是里面的内容正好是对 启程 章节里对渲染引擎主要流程的描述的扩展,通过对多种着色方式的了解,可以间接对渲染流程里的几个主要步骤有一个初步的感知 名词解释 Light Culling:剔除光照 渲染/游戏引擎调查 渲染引擎属于游戏引擎中的一部分,本章节主要简要整理一下找到的一些渲染引擎和游戏引擎,具体内在区别后续进一步深入了解的时候再整理补上。 ,后续的分析系列文章也会先以这些引擎来作为目标: 渲染引擎 bgfx 可实现2D以及文字绘制,3D渲染,光照等效果 可自动切换Metal等渲染驱动 OGRE 3D 老牌渲染引擎,除了渲染之外还包含动画系统和粒子系统

    1.7K31发布于 2019-07-30
  • 来自专栏棒棒小飞人

    使用velocity模板渲染引擎代码分析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传压缩项目包</title> </head> <body> 提示:压缩包内请勿包含中文!

    <form name="zipForm" id="zipForm"> <input type="text" id="file-name" name

    1K00发布于 2021-10-07
  • 来自专栏前端笔记本

    鸿蒙 OpenHarmony 移植表格渲染引擎总结

    - OpenHarmonySheet 渲染引擎是我们最终目标,虽然难度偏大,但我们团队成员决定分开三步来实现该目标,首先至少先学会使用基础组件和容器组件,然后再学会使用画布组件,最后综合这些经验实现一个渲染引擎 ,我们一开始考虑的是实现一个游戏引擎,但考虑到比赛剩余时间并不足够,并且游戏引擎的实用性和创意性不利于展现,所以经过我们团队综合考量,我们最终决定实现一个文档表格渲染引擎。 思考 可能有人疑问为什么会选择移植一个文档渲染引擎,这里想起外网知乎有过类似的讨论,中国要用多久才能研发出类似 Excel,且功能涵盖 Excel 95% 功能的替代软件? "屏幕截图.png")] 为了提升渲染性能,提供更优质的编辑体验从 DOM 更换成 Canvas 渲染,方便开发者构建重前端大型在线文档项目,在国内外实现类似引擎的公司仅仅只有几家,如:腾讯文档,金山文档和谷歌文档等 ,降低性能损耗,优化渲染耗时,整个核心引擎代码控制在 1500 行左右,另补充演示代码 500 行,方便大家理解阅读和进行二次开发。

    3.5K20编辑于 2022-03-24
  • 来自专栏Flutter

    Flutter 渲染引擎详解 - iOS GL 篇

    Flutter 渲染引擎在 iOS 上支持三种渲染方式,分别是纯软件(CPU),Metal 和 GL。 这篇文章的主要内容是讲解在 iOS 上,Flutter 渲染引擎: 需要的 GL GPU 上下文环境是如何完成初始化; 目标输出 Surface 的设置过程; 渲染流水线执行光栅化的调用过程。 上图显示了 Flutter 渲染引擎在 iOS 上主要涉及的对象,绿色背景是 iOS SDK 原生对象,黄色背景是平台相关的适配对象,白色背景是平台无关的通用对象。 break; } FML_CHECK(false); return nullptr; } PlatformViewIOS 一个主要的职责就是创建 IOSContext 对象,由它来为渲染引擎提供 光栅化输出 关于 Flutter 渲染流水线比较完整的说明请参考我之前的文章Flutter 渲染流水线浅析,在这里我们只关注光栅化的部分。

    1.8K10发布于 2020-10-23
  • 来自专栏Flutter

    Flutter 渲染引擎详解 - iOS Metal 篇

    Flutter 渲染引擎在 iOS 上支持三种渲染方式,分别是纯软件(CPU),Metal 和 GL。 这篇文章的主要内容是讲解在 iOS 上,Flutter 渲染引擎: 需要的 Metal GPU 上下文环境是如何完成初始化; 目标输出 Surface 的设置过程; 渲染流水线执行光栅化的调用过程。 上图显示了 Flutter 渲染引擎在 iOS 上主要涉及的对象,绿色背景是 iOS SDK 原生对象,黄色背景是平台相关的适配对象,白色背景是平台无关的通用对象。 break; } FML_CHECK(false); return nullptr; } PlatformViewIOS 一个主要的职责就是创建 IOSContext 对象,由它来为渲染引擎提供 光栅化输出 关于 Flutter 渲染流水线比较完整的说明请参考我之前的文章Flutter 渲染流水线浅析,在这里我们只关注光栅化的部分。

    2.6K31发布于 2020-10-23
  • 来自专栏web前端渲染

    腾讯文档Doc Canvas渲染引擎流程改造

    为了解决部分历史渲染问题,实现移动端canvas渲染的新功能,以及支持后续功能扩展,对腾讯文档Doc Canvas渲染引擎的流程进行了改造,本文对改造进行介绍和小结。1. 改造背景1.1. 实现新功能(移动端canvas引擎统一渲染)为了支持在移动端预览和PC端完全一致的文档内容(更完整排版、格式支持),需要在移动端通过canvas渲染引擎统一进行渲染;然而直接移植复用canvas渲染,原有渲染引擎在移动端存在性能问题 :图片所以,为了解决上述问题,需要对原有canvas渲染引擎进行改造优化。 ,是造成移动端下canvas渲染引擎性能问题的罪魁祸首之一。 总结经过分页渲染改造,解决了滚动时渲染空白的历史问题,对后续环绕元素的层级渲染提供了支持;最重要的是解决了canvas渲染引擎在移动端的性能问题,使移动端的“分页视图”新功能可以正常使用,让用户可以直接在移动端浏览到和

    6K130编辑于 2022-11-22
  • 来自专栏kyle的专栏

    使用art-template模板引擎渲染数据

    一:什么是art-template art-template 是一个简约、超快的模板引擎。 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。 使用art-template也便于维护代码,以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容,如果html内容需要修改,我们需要在js中修改。 而用了模板引擎以后,我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。 、Koa、Webpack 支持模板继承与子模板 浏览器版本仅 6KB 大小 三:art-template与其他模板引擎运行速度对比 ?

    2.2K30发布于 2020-08-24
  • 来自专栏Python小屋

    Python+matplotlib调用LaTex引擎渲染公式

    问题描述: 在图形中标题、坐标轴标签、图例、注解等不同位置渲染公式。 技术原理: 在渲染文本时,可以在字符串中使用一对$符号表示要使用Latex渲染,例如'abc$...

    1.6K10发布于 2020-04-02
  • 来自专栏Android知识点总结

    【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制

    当我偶然知道 echarts 底层是由 ZRender 引擎渲染时,内心是非常激动的。无论是简单的统计图,还是复杂的雷达图、地图、关系图,本质上都是通过 ZRender 引擎渲染绘制的。 所以我悟了,相比于 图表库 这种复杂上层建筑,在起步阶段时,一个好的引擎作为底层基础是必不可少的。想打造一个像 echarts 这样几乎完美的图表库,在短时间内是不可能凭空实现的。 相比而言,Html 的绘制显得更加原始一些,面向过程的味道更浓,这也是封装一个绘制引擎的必要性。 通过 zrender.init 来关联 dom 节点进行初始化,获取渲染对象。如何创建绘制对象,添加到渲染对象中即可。 如下是折线 Polyline 的的绘制效果,可以看出 ZRender 默认的坐标系是以 dom 节点 左上角为原点,向左和下方为正方向的直角坐标系,这也是屏幕渲染中最常用的坐标系: Polyline

    3K21编辑于 2022-10-31
  • 来自专栏前端开发随笔

    NodeJs使用ejs模板引擎实现后端渲染

    安装ejs npm install ejs 项目引入 const ejs = require('ejs') 目录文件 app.js const http = require('http');

    2.1K20发布于 2020-09-02
  • 来自专栏视频加密

    数字孪生云渲染引擎部署显卡要求

    点量小芹在长期的接触中发现,很多项目人员对于云渲染的常见疑问是,使用云渲染技术需要服务器配置什么显卡。 图片实时渲染和离线渲染不同,该项技术更多的关注的是实时互动性,不像离线渲染那样对CPU有很高的要求。实时渲染其实更多的是借助服务器端GPU的算力来完成渲染和编码,并通过网络将实时画面传输到终端。 则在准备使用云渲染系统的服务器上,可以参考类似的显卡和CPU配置。 通过点量云渲染技术来做到负载均衡,支持更多并发。 和实时渲染相对应的是离线渲染,一般是用在电影、动漫等特效中,对于实时性没有要求,但是对于画面质量要求比较高,这个一般是是借助CPU来完成。

    2.4K10编辑于 2022-07-15
领券