在使用Vite和React开发的ThreeJS立方体显示项目中，遇到Chrome浏览器无法创建WebGL上下文的错误，而Edge浏览器则正常。错误信息显示与Chrome的硬件加速、ANGLE渲染器和SwiftShader有关。解决方法是检查Chrome的WebGL支持，确保硬件加速已开启，并重启浏览器。此方案成功解决了问题，使WebGL内容正常显示。
问题描述
-
使用 Vite 采用 React 前端框架创建 ThreeJS 的 demo：立方体显示
-
项目启动
- 使用 Chrome 访问：localhost:5173/ 无内容
- 使用 Edge 访问：localhost:5173/ 正常显示
-
Chrome 使用 F12 调试查看错误信息如下
Status: Could not create a WebGL context, VENDOR = 0xffff, DEVICE = 0xffff, GL_VENDOR = Google Inc. (Google), GL_RENDERER = ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (LLVM 10.0.0) (0x0000C0DE)), SwiftShader driver-5.0.0), GL_VERSION = 5.0.0, Sandboxed = yes, Optimus = no, AMD switchable = no, Reset notification strategy = 0x8252, ErrorMessage = BindToCurrentSequence failed
问题解决
-
访问网站：查看浏览器是否支持WebGL
-
若仅是未开启设置，前往 Chrome 设置 - 系统
-
将硬件加速模式开启并重新启动浏览器，正常显示
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
