Ce site est optimisé pour être consulté depuis un navigateur moderne dans lequel JavaScript est activé.

ThreeJS R110 + Spine 3.8

Crisium

We are evaluvating if we can use Spine in our project with our current ThreeJS R110 setup.
We are getting errors when using spline:

three.js:48809 THREE.InterleavedBuffer: .length has been deprecated. Use .usage instead.
three.js:48719 THREE.BufferGeometry: .addAttribute() has been renamed to .setAttribute().

these are jus deprecated and should work.

but we also get:

WebGL: INVALID_ENUM: bufferData: invalid usage
WebGL: INVALID_VALUE: bufferSubData: buffer overflow

and this stops the rendering.

We really don't know what is causing this, but it only happens when we add the Spine to our scene.

any help?

Peter

PS: We are using the Spine 3.6 from the demo "raptor" on your site with ThreeJS R110 to get this error.
If we use Spine 3.8 we get another kind of error "Skin not found: default", but the json file does have a "default", so!?!?

Mario

Please update to 3.8. This means you also need to export your skeletons with Spine Editor version 3.8!

Crisium

Spine 3.8 => spine-all.js
ThreeJS R110
test file json => "spine": "3.8.76",

we get

WebGL: INVALID_ENUM: bufferData: invalid usage
WebGL: INVALID_VALUE: bufferSubData: buffer overflow

peter

I can see that the api for using the spine has changed.. I have correct our code to match the new format in the threejs example you provide.
This results now with an error in spine-all.js at line 2411

this.atlas.findRegion is not a function

am I missing something?

Peter

update..

found the bug for the region thingy. The old atlas used loadText the newer one now uses loadTextureAtlas. Would have been nice if the asset manager was constructed a little different so we can use the power of Types with TypeScript , this would let the compile catch these kind of errors.

running the code with the update interface to the spine api still result swith the same errors: buffer overflow

Peter

Mario

Sorry for the trouble. Typing the AssetManager would indeed be nice, if you have suggestions let me know.

Could you send me your skeleton assets (.json/.skel, .atlas, and .png) so I can reproduce the issue locally and fix it?

Crisium

The resources is from the github demo of the raptor, but I have attached them here anyways.
We are using threejs r110, but I can see there is now a r111

I fixed the setAttributes and usage to use THREE.DynamicDrawUsage instead of "true".. ThreeJS says the usage is deprecated, but it is a false use of deprecated since it has been fully removed. So, you must add the THREE.DynamicDrawUsage.

There is still issue with the size (transformation) and it seems like there is some zBuffer issues.

Looking forward to seeing an update 🙂

kind regards,
Peter

Mario

Ah sorry, I thought you saw the issues with your own assets. Thanks for all the info, I've opened an issue here: [threejs] Update from deprecated API · #1560

Mario

I've updated our ThreeJS backend to work with the latest r111 (also works with r110). I no longer get any warnings, and the rendering in the example scene is correct. Could you maybe modify our example scene to demonstrate the issues you still see? spine-runtimes/index.html at 3.8