`gl.getParameter(gl.VERSION).indexOf("WebGL 1.0") != -1;` causing error on Edge v128

[RaenonX]

https://github.com/EsotericSoftware/spine-runtimes/blob/d769c1a9308799f529428531606ec7932e6e4316/spine-ts/spine-player/src/Player.ts#L458

This line on my browser is causing the following error:

Browser:

Microsoft Edge Version 128.0.2739.42 (Official build) (64-bit)

Let me know what else do I need to provide. Thanks!

[davidetan]

I'm on Mac, just installed Microsoft Edge Version 128.0.2739.42 (Official build) (arm64), and it works as expected.

I suppose that the only way gl.getParameter(gl.VERSION) return null is when the webgl context is lost.

If there is no webgl context at the beginning, you should see the following error in your page in the canvas:

Sorry, your browser does not support WebG, or you have disabled WebGL in your browser settings.
Please use the latest version of Firefox, Chrome, Edge, or Safari.

If the webgl context is lost after, you should see a sad face like this one:

What do you see in the canvas?

[RaenonX]

I'm on Mac, just installed Microsoft Edge Version 128.0.2739.42 (Official build) (arm64), and it works as expected.

I suppose that the only way gl.getParameter(gl.VERSION) return null is when the webgl context is lost.

If there is no webgl context at the beginning, you should see the following error in your page in the canvas:

Sorry, your browser does not support WebG, or you have disabled WebGL in your browser settings.
Please use the latest version of Firefox, Chrome, Edge, or Safari.

If the webgl context is lost after, you should see a sad face like this one:

What do you see in the canvas?

Thanks for responding. This is what I am seeing:

For more context, I am using React. This is how I initialize it with hrefOfSkeleton being the relative link to the skeleton file /actions/pokemon/regular/194/action/move.skel; target being a ref to a <div/> for showing the animation, and player being a ref to store the SpinePlayer instance.

React.useEffect(() => {
  if (!hrefOfSkeleton || !target.current) {
    return;
  }

  player.current = new SpinePlayer(target.current, {
    preserveDrawingBuffer: false,
    skeleton: hrefOfSkeleton,
    atlasUrl: hrefOfSkeleton.replaceAll('.skel', '.atlas'),  // Temporary, file would exist
  });

  return () => player.current?.dispose();
}, [hrefOfSkeleton, target.current]);

The callback in useEffect() gets called multiple times because of React strict mode.

---

In addition, I would like to know if this is a right place to ask https://en.esotericsoftware.com/forum/d/26766-unable-to-load-spine-fils-using-spine-web-player since I am having this issue if I change the line to gl.getParameter(gl.VERSION)?.indexOf("WebGL 1.0") to let it pass.

[davidetan]

As you can see from the warning in your browser console, you are losing your webgl context.

Strict mode during development triggers effects twice. The Too many active WebGL contexts warning indicates that your effect is executed multiple time, not only two.

You should fix your effect to be idempotent and initialize the SpinePlayer once.

I'll close this since it's not a bug. We can continue the discussion on the thread you created in the forum.

[RaenonX]

As you can see from the warning in your browser console, you are losing your webgl context.

Strict mode during development triggers effects twice. The Too many active WebGL contexts warning indicates that your effect is executed multiple time, not only two.

You should fix your effect to be idempotent and initialize the SpinePlayer once.

I'll close this since it's not a bug. We can continue the discussion on the thread you created in the forum.

Will continue there, thanks!