Error Creating WebGL context

[Latent-Logic]

When trying to open the website in Chromium I'm getting a black page with nothing in it. If I open in Firefox on the same box it does render and I can interact. When using the Chromium inspect I saw some errors on the console:

three.module.js:15829 THREE.WebGLRenderer 106
three.module.js:15963 THREE.WebGLRenderer: Error creating WebGL context.
three.module.js:15829 THREE.WebGLRenderer 106
three.module.js:15963 THREE.WebGLRenderer: Error creating WebGL context.
2
react-dom.production.min.js:4408 Error: Error creating WebGL context.
    at new $i (three.module.js:15948)
    at index.js:631
    at Object.useState (react-dom.production.min.js:3560)
    at useState (react.production.min.js:362)
    at index.js:630
    at $i (react-dom.production.min.js:3274)
    at Mo (react-dom.production.min.js:3745)
    at To (react-dom.production.min.js:3733)
    at So (react-dom.production.min.js:3716)
    at Lo (react-dom.production.min.js:4077)
three.module.js:15948 Uncaught (in promise) Error: Error creating WebGL context.
    at new $i (three.module.js:15948)
    at index.js:631
    at Object.useState (react-dom.production.min.js:3560)
    at useState (react.production.min.js:362)
    at index.js:630
    at $i (react-dom.production.min.js:3274)
    at Mo (react-dom.production.min.js:3745)
    at To (react-dom.production.min.js:3733)
    at So (react-dom.production.min.js:3716)
    at Lo (react-dom.production.min.js:4077)

If I expand out that first error I get:

three.module.js:15963 THREE.WebGLRenderer: Error creating WebGL context.
$i	@	three.module.js:15963
(anonymous)	@	index.js:631
useState	@	react-dom.production.min.js:3560
useState	@	react.production.min.js:362
(anonymous)	@	index.js:630
$i	@	react-dom.production.min.js:3274
Mo	@	react-dom.production.min.js:3745
To	@	react-dom.production.min.js:3733
So	@	react-dom.production.min.js:3716
Lo	@	react-dom.production.min.js:4077
qa	@	react-dom.production.min.js:5514
Ya	@	react-dom.production.min.js:5536
Ps	@	react-dom.production.min.js:5958
Ms	@	react-dom.production.min.js:5925
Ds	@	react-dom.production.min.js:5992
notify	@	Subscription.js:23
t.notifyNestedSubs	@	Subscription.js:65
o.notifySubscribers	@	Provider.js:59
t.handleChangeWrapper	@	Subscription.js:70
v	@	redux.js:213
(anonymous)	@	backup.middleware.js:13
(anonymous)	@	createMiddleware.js:98
(anonymous)	@	demo.middleware.js:12
(anonymous)	@	packaging.middleware.js:22
l	@	runtime.js:45
(anonymous)	@	runtime.js:264
e.<computed>	@	runtime.js:98
r	@	asyncToGenerator.js:3
s	@	asyncToGenerator.js:25
(anonymous)	@	asyncToGenerator.js:32
(anonymous)	@	asyncToGenerator.js:21
(anonymous)	@	packaging.middleware.js:20
(anonymous)	@	selection.middleware.js:79
(anonymous)	@	song.middleware.js:599
l	@	runtime.js:45
(anonymous)	@	runtime.js:264
e.<computed>	@	runtime.js:98
r	@	asyncToGenerator.js:3
s	@	asyncToGenerator.js:25
(anonymous)	@	asyncToGenerator.js:32
(anonymous)	@	asyncToGenerator.js:21
(anonymous)	@	song.middleware.js:70
(anonymous)	@	syncState.js:177
(anonymous)	@	index.js:11
(anonymous)	@	createLoader.js:12
Promise.then (async)		
(anonymous)	@	createLoader.js:15
ue	@	store.prod.js:20
(anonymous)	@	index.js:9
p	@	(index):1
(anonymous)	@	index.js:6
p	@	(index):1
l	@	(index):1
e	@	(index):1
(anonymous)	@	main.b1496be2.chunk.js:1

There are also some warnings about the AudioContext:

audio.service.js:13 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

Browser info:

Chromium	77.0.3865.120 (Official Build) Arch Linux (64-bit)
Revision	416d6d8013e9adb6dd33b0c12e7614ff403d1a94-refs/branch-heads/3865@{#884}
OS	Linux

Please let me know if there's anything else I should test / logs to gather. This is not insurmountable as I can run this in Firefox, but figure you'd be interested in the error.

[joshwcomeau]

hey @Latent-Logic, thanks for the report. Looks similar to #37, which is a bummer because it's an error I can't reproduce :/ I dug into this a bit then, and the internet suggested this wasn't an error with the tool I'm using (three.js), but instead a fundamental incompatibility with the browser and graphics card (mrdoob/three.js#4927). Given that you're the second person to report an issue like this, though, I'm a bit more concerned :/

Do you get any errors in Chrome on this page? https://threejs.org/examples/#webgl_animation_cloth

[Latent-Logic]

Do you get any errors in Chrome on this page? https://threejs.org/examples/#webgl_animation_cloth

Unfortunately yes I get a similar error:

three.module.js:23649 THREE.WebGLRenderer: Error creating WebGL context.
WebGLRenderer @ three.module.js:23649
init @ webgl_animation_cloth.html:558
(anonymous) @ webgl_animation_cloth.html:417

three.module.js:23629 Uncaught Error: Error creating WebGL context.
    at new WebGLRenderer (three.module.js:23629)
    at init (webgl_animation_cloth.html:558)
    at webgl_animation_cloth.html:417
WebGLRenderer @ three.module.js:23629
init @ webgl_animation_cloth.html:558
(anonymous) @ webgl_animation_cloth.html:417

However the bug you linked for three.js did point to a browser option:

Make sure this option is selected in your chrome settings.
[ ] Use hardware acceleration when available

Which looking at my settings was disabled for some reason lost to the mists of time. Next time I restart my browser (way too much gui state at the moment 😛) I'll see if checking that option makes the difference. Thanks for looking into this!

[joshwcomeau]

Glad to hear it!

Closing since that sounds like the culprit :)