WebGL 报错Uncaught RuntimeError: float unrepresentable in integer range

最新推荐文章于 2025-09-18 16:50:25 发布
原创 最新推荐文章于 2025-09-18 16:50:25 发布 · 2.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#unity #游戏引擎

本文介绍了如何在Unity WebAssembly构建中避免因float转integer导致的浏览器错误提示。通过在PublishSettings中调整WebAssemblyAirthmeticExceptions设置为Ignore，可以静默处理异常，不影响程序运行。

Unity官方论坛回答链接：https://forum.unity.com/threads/how-to-debug-webgl-builds.615094/

具体问题是float值转换integer时超出范围报错，这个错误也许无法直接解决，但可以直接不让浏览器抛出这个错误。

Unity在打包WebGL的时候可以在PublishSettings里更改 WebAssembly Airthmetic Exceptions 设置为 Ignore，忽略掉浏览器的异常错误。

这样子就不会在浏览器端弹出报错弹窗而影响程序运行逻辑。

axios请求错误报错Uncaught runtime errors:
01-12 2161
解决axios请求错误报错Uncaught runtime errors每天记录一点，助力成长！欢迎大家来浏览我的博客，如发现我有写错的地方，一起交流指正。系列文章会不段更新 来个打赏(微信) 马力全开 撸起袖子加油干~
Cesium 报错：RuntimeError: Fragment shader failed to compile. Compile log: ERROR: 0:163: ‘varying‘ : I
虎康的博客
05-26 417
摘要： 解决Cesium运行时错误"Fragment shader failed to compile"，该错误源于varying关键字在新版本WebGL2中的不兼容。自1.102.0版本起，Cesium默认使用WebGL2上下文，要求着色器代码升级至GLSL 300标准。解决方法包括：将varying改为in/out，gl_FragColor改为自定义输出变量vFragColor，texture2D替换为texture函数。若需继续使用WebGL1，可在初始化时配置相应参数。
Vue项目统一错误处理
qq_38937669的博客
12-31 1万+
统一错误处理（错误兜底）是一款好产品的基本配置。缺乏错误兜底的程序通常表现为： 点击某个操作，出错之后，界面上就反应 加载框一直转啊转，客户一脸迷茫的等待 给人非常差的用户体验。其实最简单的处理就是给个提示，客户看到提示之后反馈问题，程序员把bug修掉就好了。具体怎么做呢？ Vue项目中主要的错误来源包括： 后端接口错误, 400, 404, 500常见。这个时候我们需要在axio中做统一处理。 vue代码中本身逻辑错误，这个时候设置Vue的全局错误处理就可以了。省去在代码中到处写catch语句块
UniTask在Webgl上报错的记录
最新发布
curry丶的博客
09-18 804
实验发布Webgl后从场景中点击返回时报错的原因和解决方法
【Vue】vue项目中Uncaught runtime errors:怎样关闭
No8g攻城狮的博客
01-19 8736
参考资料：https://webpack.docschina.org/configuration/dev-server/#overlay。的vue项目，出现编译错误或警告时，在浏览器中显示全屏覆盖，如下图，以下是开发环境，此报错在生产环境下并不会出现。当出现编译错误或警告时，被设置了在浏览器中显示全屏覆盖的配置。项目本来运行的好好，换了个新的浏览器，新的。通过看控制台，找到关键词。
Uncaught runtime errors: × ERROR Avoided redundant navigation to current location: “/xxx“.
lplovewjm的博客
05-22 1万+
vue导航当前路由报错解决方案
Uncaught runtime errors: ERROR
weixin_62420492的博客
02-26 1470
解决方法：将此段代码复制到router下的index.js文件内即可。
Unity3d 2020版本发布WebGL报错Uncaught SyntaxError: Invalid or unexpected token 和unityFramework is not...修正
qq_33789001的博客
02-06 6249
如题的问题是在Windows项目发布WebGL时遇到的，Unity3d的版本是2020.3.12f1c1，部署平台是IIS，运行浏览器是Chrome。如果是其它的版本的Unity，该方法可能不适用。具体表现是打开WebGL网页后加载至8-90%时卡住，而且不会再提升加载进度：F12打开Console窗口报错：完整报错截图：刚开始怀疑的是工程中使用的插件或者dll等模块有影响，于是我进行了一个空项目上的测试，还是一样的情况，无法正常启动至运行界面。
unity生成webgl 运行时，浏览器出现：Unexpected token ‘＜‘ 报错的解决办法
ywyngq的博客
11-12 1749
unity webgl 生成文件
【我的OpenGL学习进阶之旅】着色器GLSL运行时报错： ERROR: 0:40: ‘gl_FragColor‘ : undeclared identifier
字节卷动
08-24 1987
【我的OpenGL学习进阶之旅】解决着色器GLSL运行时报错： ERROR: 0:40: 'gl_FragColor' : undeclared identifier
Uncaught runtime errors:×ERRORRequest failed with status code 404
weixin_38822843的博客
11-10 3965
Request failed with status code 404 at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15) at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:18:12) at XMLHttpRequest.handleLoad
Uncaught runtime errors:ERRORR ResizeObserver loop completed with undelivered notifications.
胡子哥哥的博客
10-29 2800
该问题只出现在这个引用<el-table> 的界面，我其他界面也有引用但没有出现该问题，并且在我发现第二种方法的时候，实现成功后，我尝试删除show-overflow-tooltip代码后界面代码也刷新了，也能用，然后我重新退出登录自己设计的企业门户后又登录再次删除添加验证又不行了，有点玄学，现在目前找到的这两种方案，如果你和我类似的经历遇到类似的错误，可以试一试。解决方案说完，下面说一下，我所遇到这个问题的过程，在跟做vue项目时遇到的。里面，反正在出现这个问题页面之前的页面都行。引用于：哔哩哔哩评论。
react axios请求报错，全屏展示Uncaught runtime errors:
m0_59148573的博客
11-03 2532
2.找到config下webpackDevServer.config.js,然后按下图去改。原因：webpack-dev-server。解决方法：1.npm run eject。
vue报错：Uncaught runtime errors: × ERROR ResizeObserver loop completed with undelivered notifications.
肥晨开发的学习之路
02-07 3578
问题：视窗尺寸变化或内容更新时，会频繁触发高度计算，导致 ResizeObserver 循环。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。el-table 组件使用了动态高度计算。🛠️1.用了动态的判断，导致的报错。
vue报错Uncaught runtime errors: × ERROR ResizeObserver loop limit exceeded at handleError (webpack
m0_51312071的博客
05-30 4834
单独使用都不会报错，但是两个结合在一起就产生了奇妙的化学反应。为什么最好不要在el-table外面套弹性布局盒子？使用了el-table组件+弹性布局。解决：修改弹性盒子布局。
axios请求错误处理Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server
热门推荐
weixin_46525113的博客
05-25 2万+
axios请求错误封装处理，全屏弹出Uncaught runtime errors:handleError@webpack-internal:///./node_modules/webpack-dev-server控制台也会全部展示
vue 项目报Uncaught runtime errors: 导致项目崩溃
qq_37550440的博客
09-18 4612
vue 项目报Uncaught runtime errors: 导致项目崩溃,关闭报错
解决Uncaught runtime errors:ResizeObserver loop completed with undelivered notifications报错
Leaton的博客
02-12 1990
当你兴致勃勃地打开自己正在开发的本地网站，本想F12打开控制台：结果整个页面突然红了，报错信息：是一个常见的浏览器控制台错误，通常与API 的使用有关。这个错误表示在尝试处理某些元素的尺寸变化时，未能及时完成通知，导致某些通知未被传递。
webgl float unrepresentable in integer range
04-26
<think>好的，我现在需要解决用户关于WebGL中浮点数无法在整数范围内表示的问题。首先，我得回顾一下WebGL的浮点数精度问题。WebGL主要使用32位浮点数，而整数通常用整数类型，但有时候在着色器中可能需要转换，这时候就可能出现精度丢失的情况。 用户提到的问题可能是，当试图用浮点数表示大整数时，由于浮点数的精度限制，某些整数无法准确表示。比如，32位浮点数的尾数有23位，加上隐含的1位，实际有效位数是24位。当整数超过2^24时，连续的整数就无法被准确表示了，因为它们之间的间隔超过了浮点数能分辨的最小单位。 接下来，解决方案可能需要考虑如何避免这种情况。可能的办法包括使用整数类型（如WebGL 2的int和uint），或者将数据归一化到浮点数可以精确表示的范围。另外，数据分块处理或者使用高位和低位分开存储的方法也可能有效。比如，将大整数分解成高位和低位两部分，分别存储在不同的变量中，然后在需要时合并。 还需要检查用户提供的引用内容，虽然看起来引用主要涉及Vue.js相关的库和工具，可能与当前问题关联不大。不过，用户可能之前讨论过前端相关的图像处理或UI框架，这时候可能需要结合WebGL在前端的应用场景来回答。 另外，用户可能需要具体的代码示例，比如在着色器中如何正确声明整数类型，或者如何使用归一化处理。例如，在WebGL 1中，可以使用`gl.FLOAT`类型，并结合归一化参数来确保数据转换正确。在WebGL 2中，直接使用整数纹理和相关的数据类型可能更有效。 还要注意不同版本的WebGL支持情况。WebGL 1对整数的支持有限，而WebGL 2引入了更多的整数类型和操作，这可能是一个关键的解决方案点。比如，使用`texImage2D`时指定正确的内部格式和类型，确保数据不会被错误地转换为浮点数。 最后，生成相关问题时要围绕浮点数精度、WebGL版本差异、数据转换方法等方向，帮助用户进一步探索这个主题。</think>### WebGL中浮点数无法精确表示整数的原因与解决方案 #### 原因分析 1. **IEEE 754标准限制** WebGL使用的32位浮点数遵循IEEE 754标准，其尾数部分仅有23位精度（实际有效位数为24位）。这意味着当整数超过$2^{24}$（即16,777,216）时，相邻整数间的间距会超过浮点数的最小可表示间隔，导致无法精确存储。例如： $$16,777,216 + 1 = 16,777,217$$ 在浮点数中将与$16,777,216$相同[^1]。 2. **WebGL 1的整数限制** 在WebGL 1中，缺少原生整数类型支持，所有数值运算基于浮点数。即便使用`gl.UNSIGNED_BYTE`等整数格式，数据仍可能被转换为浮点数处理。 3. **纹理采样问题** 使用浮点纹理时，硬件可能将整数像素值隐式转换为浮点数，导致高位数据丢失（如RGB通道值超过255时）。 #### 解决方案 1. **使用WebGL 2的整数类型** WebGL 2支持`int`/`uint`类型和整数纹理： ```glsl // 着色器中声明整数采样器 uniform usampler2D uIntegerTexture; ``` ```javascript // JavaScript端创建整数纹理 gl.texImage2D(..., gl.R32UI, gl.UNSIGNED_INT, data); ``` 2. **数据分块编码** 将大整数分解为高低位两部分存储： ```glsl // 将32位整数拆分为两个16位部分 uint high = value >> 16; uint low = value & 0xFFFFu; ``` 3. **归一化处理** 对于WebGL 1，使用归一化参数强制整数转浮点： ```javascript gl.vertexAttribPointer(location, 1, gl.UNSIGNED_SHORT, true, 0, 0); ``` 4. **精度补偿算法** 在着色器中进行误差修正： ```glsl float preciseInt(int value) { return float(value) + 0.5; // 添加补偿值 } ``` #### 关键代码示例 ```javascript // WebGL 2整数纹理配置 const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texStorage2D(gl.TEXTURE_2D, 1, gl.R32UI, width, height); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RED_INTEGER, gl.UNSIGNED_INT, data); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mayikami

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值