WebGL绘制如何进行优化？

最新推荐文章于 2024-10-31 11:33:51 发布
最新推荐文章于 2024-10-31 11:33:51 发布
阅读量1.3k 收藏 4
点赞数 1
分类专栏： webgl 文章标签： webgl opengl shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/from_the_star/article/details/109739224
版权
本文探讨了WebGL渲染性能优化的关键因素，包括CPU优化、GPU优化和带宽管理。CPU优化涉及减少draw call和复杂脚本。GPU优化主要包括顶点处理（如几何体简化、LOD技术和面剔除）和片元处理。带宽优化建议使用mipmaps和纹理压缩。文章还提到了WebGL的渲染分析工具和实用的优化技术，如批处理、实例绘制、LOD、面剔除、控制绘制顺序和减少逐片元计算。
摘要由CSDN通过智能技术生成

很久之前写的笔记才贴出来，在某次面试之后，面试官问： 100万个模型绘制 ，很卡，你会怎么优化？
我查询的大部分资料都是OpenGL的（太久了，没留下地址），所以我会根据自己的经验，说明下WebGL怎么做。

影响性能的因素

  1. CPU
  • 过多的draw call（就是调用了drawElements或者是drawArrays函数，GPU就会根据渲染状态（例如材质、纹理、着色器等）和所有输入的顶点数据来进行计算，最终输出到屏幕）
  • 复杂的脚本或是物理模拟
  1. GPU
  • 顶点处理
    • 过多的顶点
    • 过多的逐顶点计算
  • 片元处理
    • 过多的片元（可能是由于分辨率造成的，也可能是由于overdraw造成的，同一个像素绘制多遍）
    • 过多的逐片元计算
  1. 带宽
    GPU虽然拥有强大的并行能力可以极快数据处理，但GPU储存有限，数据需要从外部传人，可能导致传输数据的时间远大于GPU处理的时间，所以带宽的问题也要注意下。
  • 使用了尺寸很大且未压缩的纹理
  • 分辨率过高的帧缓存

WebGL的渲染分析工具

  1. JavaScript Profiler：可以显示JS函数的执行时间
  2. FPS：查看Frame rate，GPU内存占用情况
  3. Performance：统计某一时间段的操作情况，录制各种性能指标（FPS，CPU，NET，重排重绘等）。可以通过统计报表中的Call tree找到对于的文件链接，点进去排查代码。

优化技术

1. CPU优化

最低0.47元/天 解锁文章
webgl 老是卡？可能你的浏览器没有开这个功能
bigPatrickstar的博客
03-22 3605
最近看了一些 webgl 的网站，发现比较卡，虽然我的不是什么好电脑，是一台垃圾 windows 笔记本，但也不至于看不了吧？ 注：webgl 例子链接，用这个看看你的电脑看 webgl 是否有压力 我的笔记本还是有个 GPU 的，我打开任务管理看看这个 GPU 有没有运作 原因 这一看不得了，GPU （独显）没干活，光是核显在卖力，我之前已经尝试过在 NVIDIA 控制面板中配置过了，但是还是不太行 注：你想知道怎么配置的话请出门右转，百度一大吧，但是我可以在这里告诉你，对我的电脑没有用，因此有了这篇文
JavaScript WebGL 绘制一个面
XXHolic
12-20 467
引子 JavaScript WebGL 基础疑惑点之后进行了一些优化，然后尝试绘制常见二维的面。 WebGL 中几何体最终都是由三角形构成，由三角形切入比较合适。 Origin My GitHub 绘制三角形 这是示例，基于绘制一条直线主要的变化有： 顶点 绘制图元 顶点 三角形有三个顶点，在基础疑惑点中知道坐标系是右手坐标系，个人习惯描述顶点的顺序以图形中心为原点，从第一象限到第四象限。 let vertices = [ 0.5, 0.5, 0.0, // 第一象限 -0.5,
【性能篇】30 # 怎么给WebGL绘制加速？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-20 901
【跟月影学可视化】学习笔记。例子：在一个画布上渲染 3000 个不同颜色的、位置随机的三角形，并且让每个三角形的旋转角度也随机。 我这台电脑渲染出来只有 可以创建一个正三角形，然后通过视图矩阵的变化来实现绘制多个三角形，而视图矩阵可以放在顶点着色器中计算。 也是 ，由于浏览器的 JavaScript 引擎的运算速度很快，感觉将顶点计算放到顶点着色器中进行了，性能差别也很微小。重复图形的批量绘制，在 WebGL 中也叫做，它是一种减少绘制次数的技术。多实例渲染的局限性：只能在绘制相同的图形时使用。 效果如下：
提升WebGL开发效率的利器：WebGL-Inspector插件
最新发布
gitblog_06557的博客
10-31 321
提升WebGL开发效率的利器：WebGL-Inspector插件 【下载地址】Chrome浏览器安装WebGL-Inspector插件指南分享 本资源文件提供了在Chrome浏览器中安装WebGL-Inspector插件的详细步骤和相关说明。WebGL-Inspector是一款强大的WebGL调试工具，能够帮助开发者在浏...
37 WebGL多个模型组成一个复杂的模型
现在学习也不晚
06-10 3142
案例查看地址：点击这里<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n
WebGL的CPU负载问题-WebGL对比
qq_34754747的博客
07-14 1045
我们都知道现在的显卡都要安装显卡驱动程序，通过显卡驱动程序暴露的 API，我们就可以操作 GPU 完成图形处理器的操作。问题就是，显卡驱动和普通编程界的汇编一样，底层，不好写，于是各大厂就做了封装 —— 码界的基操。OpenGL 就是干这个的，负责上层接口封装并与下层显卡驱动打交道，但是，众所周知，它的设计风格已经跟不上现代 GPU 的特性了。Microsoft 为此做出来最新的图形API 是 Direct3D 12，Apple 为此做出来最新的图形API 是 Metal，有一个著名的组织则做出来 Vulk
20个值得收藏的WebGL性能优化技巧
新缸中之脑
08-30 891
WebGL 是一项功能强大的技术，允许开发人员使用基于 OpenGL ES 图形标准的 WebGL API 在 Web 浏览器中创建 3D 图形。然而，由于在 Web 环境的限制下实时渲染 3D 图形的复杂性，优化 WebGL 性能可能具有挑战性。推荐：用快速搭建可编程3D场景。
WebGL太多怎么处理，E charts重绘会导致webgl太多吗？
07-15
3. 减少绘制对象数量：如果WebGL中有大量的绘制对象，可以考虑减少对象的数量，只渲染关键的数据或者根据用户交互动态加载。 关于Echarts重绘导致WebGL太多的问题，这取决于具体的使用情况。Echarts本身是基于...
html5 webgl绘制3D洞穴穿越无限延伸动画特效.zip
09-26
这个“html5 webgl绘制3D洞穴穿越无限延伸动画特效.zip”文件包含了一套完整的实现3D洞穴穿越效果的代码示例，对于学习和应用WebGL的开发者来说，这是一个非常实用的学习资源。 首先，我们要理解WebGL的基本概念。...
WebGL绘制带箭头贴图的线
Amesteur的博客
07-15 3776
示例 在讲述本文内容之前，我希望读者先具备以下知识点： 了解WebGL的基本知识，懂得调用自定义的Shader程序； 基本的数学基础和空间几何知识； 明白GPU的渲染管线流程； 因为，本文内容主要讲述绘制的核心思路和注意事项，所以对于基本知识只能简单描述，请谅解； 前言 首先，先附上一篇至今我看到思路十分正确，图文并茂（图片真的很好看）的讲述WebGL绘制有宽度的线和箭头贴图的文章：...
WebGL2系列之实例数组(Instanced Arrays)
weixin_33921089的博客
11-17 347
实例化数组 实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。 背景 假设这样的...
通过限制帧率解决WebGl游戏卡顿掉帧闪屏画面抖动问题
qq_58498259的博客
07-27 846
qg.setPreferredFramesPerSecond(40);
webgl限制帧率_javascript – WebGL和Chrome：高分辨率造成不良的性能
weixin_39557199的博客
12-29 820
我有一个应用程序使用LibGDX创建。我可以在桌面上运行该应用程序，它运行在90 fps @ 1080p。在Firefox上，它以40-50 fps @ 1080p(最大化窗口)运行。在Chrome上，它以30 fps @ 1080p(最大化窗口)运行。然而，在Chrome上，如果我降低分辨率，性能加倍(到60fps)。在Firefox上不会发生。这可能是什么原因？我使用webkitRequest...
unity2020打包webGL时卡进程问题
alayeshi的专栏
05-31 602
即使是打包一个新建项目的空场景也是同样的问题，我尝试过一直卡在这里会如何，结果还真打包成功了。只是打包一个空场景需要20多分钟，20多分钟的时间电脑风扇一直在响，CPU都快冒烟了。然后我换成了新的版本2022.3.21f1c1版的unity，这个问题就不出现了，空场景第一次打包只需要3分钟，之后打包同个场景会很快。我使用的2020.3.0f1c1，打包发布WEB版的时候会一直卡到asm2wasm.exe这个进程里，而且CPU占用率90%以上。尝试过各种方法解决这个问题，均已失败告终。
OpenGL Draw函数族以及渲染优化
ayww的博客
09-15 3738
OpenGL Draw函数族以及渲染优化前言1.最基本的Draw函数1.1 glDrawArrays1.2 glDrawElements2.基本Draw函数的变种2.1 *Instanced2.2 *BaseVertex2.3 *BaseInstance2.4 *BaseInstanceBaseVertex2.5 *Indirect2.6 小结3.多重Draw函数4.无绑定技术（bindless）...
对DrawCall的理解
热门推荐
srk19960903的博客
06-19 1万+
drawcall是CPU对底层图形绘制接口的调用命令GPU执行渲染操作，渲染流程采用流水线实现，CPU和GPU并行工作，它们之间通过命令缓冲区连接，CPU向其中发送渲染命令，GPU接收并执行对应的渲染命令。 这里drawcall影响绘制的原因主要是因为每次绘制时，CPU都需要调用drawcall而每个drawcall都需要很多准备工作，检测渲染状态、提交渲染数据、提交渲染状态。而GPU本身具有很
WebGL可以用来做什么？
乱七八糟的
04-13 4610
WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。 最好的HTML5 WEBGL中文资讯站 因为是被设计成直接工作在显卡端的，所以WebGL比目前其他的典型的web技术都要更加复杂。总的来说，它是相当的低等级的。这也正是它为什么能够如此迅速的完
WebGL（一）—— CPU与GPU
qq_51550750的博客
03-16 1667
WebGL（一）——CPU与GPU 什么是CPU 中央处理器（central processing unit，CPU）作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元。 什么是GPU 图形处理器（英语：Graphics Processing Unit，缩写：GPU），又称显示核心、视觉处理器、显示芯片，是一种专门在个人电脑、工作站、游戏机和一些移动设备（如平板电脑 、智能手机等）上做图像和图形相关运算工作的微处理器。 早期的显卡只包括存储器和缓冲区，实际上只是起到图形存储和传递的作用，
利用WebGL2 实现Web前端的GPU计算
weixin_34041003的博客
12-20 5204
2019独角兽企业重金招聘Python工程师标准>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>