WARNING: Too many active WebGL contexts. Oldest context will be lost

最新推荐文章于 2024-09-23 09:46:30 发布
最新推荐文章于 2024-09-23 09:46:30 发布
阅读量2.6k 收藏 1
点赞数
文章标签： chrome 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42369612/article/details/126877914
版权

WARNING: Too many active WebGL contexts. Oldest context will be lost 问题

问题原因:

浏览器对单个页面能运行的WebGL上下文上下文有限制
chrome的限制是15个,当创建第16个的时候,会把第一个给删掉,导致页面显示不正常

解决:

没有太好的方法,因为是浏览器的限制,只能在个人程序上做约束,不要创建超过15个web gl的对象

参考:
https://segmentfault.com/a/1190000003906569
https://github.com/dvgis/dc-sdk/issues/11

David_Xia001
关注
Electron：WARNING Too many active WebGL contexts. Oldest context will be lost.
liuzhen007的专栏
10-19 1418
不管遇到什么问题，不要慌，任何问题都怕你花时间研究。好比文中的问题，从最开始自己遇到这个问题的一头雾水和不知所措，再到后来找到了不仅一种解决方案，还能权衡一把选择最优的，就很能说明问题。作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一名典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解。
WebGL入门（032）：WEBGL_lose_context 简介、使用方法、示例代码
大剑师兰特的GIS世界
09-06 1441
在WebGL中，`WEBGL_lose_context`扩展提供了一种机制来模拟WebGL上下文丢失的情况。这对于测试WebGL应用程序在上下文丢失时的行为非常有用，因为真实世界中的上下文丢失可能由于多种原因发生，例如浏览器崩溃、GPU过热、驱动程序错误等。
Too many active WebGL contexts. Oldest context will be lost
weixin_48002230的博客
06-26 2859
vue项目，浏览器报错：Too many active WebGL contexts. Oldest context will be lost。报错原因：在项目中使用了echarts-gl组件，切换页面后组件不销毁，一直累积。解决方法：在每次初始化图表之前，把之前的组件销毁掉。全部代码如下,echarts-gl用法来自于。
记录echarts-gl生成3d图超过16个后，出现白屏的问题
qq_43209807的博客
12-28 991
最近在做大屏可视化的时候，需要用到3d饼状图，使用到了echarts-gl，遇到了一下问题，所以记录一下在页面中创建多个webgl的时候，当webgl的个数超过一定限制时，最初创建的webgl丢失context（即绘制内容消失并且不可再绘制），同时浏览器命令行提示：WARNING: Too many active WebGL contexts. Oldest context will be lost.
arcgis for javascript遇到Too many active WebGL contexts. Oldest context will be lost
u011339731的博客
09-14 2403
arcgis for javascript遇到Too many active WebGL contexts. Oldest context will be lost： 参考： https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/webglcontextlost_event const canvas = document.getElementById('canvas'); const gl = canvas.getContext
WARNING: Too many active WebGL contexts. Oldest context will be lost.
qq_39522549的博客
08-30 9750
MapView.js:427 WARNING: Too many active WebGL contexts. Oldest context will be lost.
【WebGIS bug】WARNING: Too many active WebGL contexts. Oldest context will be lost.
老靳的WebGIS
07-14 2369
多次使用多屏对比功能给页面添加图形，然后报错WARNING: Too many active WebGL contexts. Oldest context will be lost.
vue项目使用高德地图
前端劝退工程师
12-05 2067
本来想用vue-amap的,但是一直报错,确实还不够成熟 在index.html文件中引入 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key='你的key'"></script> 在webpack.base.conf.js中配置 context: path.resol...
虚拟现实和增强现实之虚拟现实和增强现实平台：WebXR：WebXR与WebGL集成开发.docx
08-26
虚拟现实和增强现实之虚拟现实和增强现实平台：WebXR：WebXR与WebGL集成开发.docx
Unity-WebGL-3D-Chat:Unity5 WebGL x Socket.IO = Web 浏览器上的在线 3D 聊天！
07-05
Unity WebGL 3D 聊天 介绍 这是一个简单的demo，将Unity5的WebGL输出游戏与Socket.IO连接起来，多人一起玩。 统一Unity项目集 网络 托管来自 Unity 的 WebGL 输出并与 Socket.IO 连接的 Node.js 服务器 输出文件（ ...
webgl-context:在浏览器中获取WebGL上下文
05-31
webgl-上下文 获取一个 WebGLRenderingContext，如果它不存在则返回 null。 类似于 。 //get a webgl context, will be null if not found var gl = require ( 'webgl-context' ) ( ) if ( gl ) { document . body . appendChild ( gl . canvas ) //do something... } 或者，带有选项： //or with optional settings... var gl = require ( 'webgl-context' ) ( { canvas : canvas , //the canvas DOM element to use width : 400 , //resi
webgl-light-waves:在WebGL中使用Three.js的光波带进行的视觉实验
04-28
WebGL是一种基于OpenGL标准的JavaScript API，用于在任何兼容的Web浏览器中实现交互式3D图形，无需插件。这个项目“webgl-light-waves”是利用Three.js库在WebGL环境中创建的一种视觉实验，主要关注光波效果的实现。...
HT图形组件设计之道（三）
weixin_33935777的博客
06-13 127
上篇我们通过定制了CPU和内存展示界面，体验了HT for Web通过定义矢量实现图形绘制与业务数据的代码解耦及绑定联动，这类案例兴许文章还会继续以便大家掌握很多其它的矢量应用场景，本篇我们先切换个话题，谈谈模型-视图-事件之间的关系。 图形组件设计架构上主要就是在规划Data模型。View视图和Event事件之间的关系。这些年业界逐渐将各种GUI设计模式提炼成理论归类。MVC、...
three.js动画性能优化
X01动力装甲的专栏
05-29 2291
three.js 动画性能优化 1、 requestAnimationFrame 和 setInterval requestAnimationFrame 和 setInterval 在three动画开发中非常用，但是他们两个都不会随着canvas的销毁而销毁，需要我们手动清除。 setInterval对应clearInterval(this.setInter) requestAnimationF...
webgl：关于webgl
weixin_42755384的博客
08-26 183
webgl可以与其他web界面元素相结合。 webgl可以以分层的形式置于其他内容页面的上方或下方。3d canvas可以占据页面的一部分或者整个页面，它也可以被包括在被设置了z-index属性的div元素中，这意味着我们可以使用webgl构建3d图形，而使用常规html特性来构建其他页面元素，并将他们无缝组合在一起呈现给用户。 ...
【Echarts】echarts快速入门-小白必看（防止踩坑）
w13346019869的博客
06-23 728
原生Js+Echarts以及ElemetUI+Echarts,如果你在操作的过程中发生错误，看目录 新版本需要使用 * as echarts 来代替 echarts 否则会导致找不到echarts文件,在使用过程中发生错误请看目录最后 导入Echarts发生错误...
【Linux】进程控制
最新发布
qinjh_的博客
09-23 2739
💬 hello!各位铁子们大家好哇。今日更新了Linux的进程控制的内容。
webgl2.js下载
11-06
webgl2.js是一种用于实时渲染3D图形的JavaScript库。它允许开发人员在Web浏览器中创建令人印象深刻的交互式和高性能的3D应用程序和视觉效果。要下载webgl2.js，您可以按照以下步骤进行操作： 第一步，打开您选择的Web浏览器，并在搜索引擎中搜索"webgl2.js下载"。 第二步，浏览搜索结果，找到可信赖的网站或资源，提供关于webgl2.js下载的信息。 第三步，点击您选择的下载链接，该链接将指向一个可用的webgl2.js文件。 第四步，下载完成后，将下载的webgl2.js文件保存到您计算机上的适当位置。您可以选择将其保存在专门的JavaScript文件夹中，以便于未来的使用。 请注意，确保从可信赖和安全的来源下载webgl2.js文件，以避免潜在的安全问题。此外，在使用webgl2.js之前，建议您先了解该库的基本知识和用法，以便您能够充分利用其功能和特性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值