r152 Skinned Mesh and Raycasting issue

[RemusMar]

Description

Guys, I found another one.
Everything was just fine in r150 (and before that).
152 sample: https://necromanthus.com/Test/html5/testA_disco.html

Reproduction steps

Try to aim at Lara (now it's a real russian roulette).
When red fire a "bullet" and that will freeze her.
Now check out her frozen skinned mesh: the result is a complete mess.
It also depends on your position around her, why is that ???

Code

// You should be aware of the code changes

Live example

https://necromanthus.com/Test/html5/testA_disco.html

Screenshots

No response

Version

152

Device

Desktop, Mobile

Browser

Chrome, Firefox, Safari, Edge

OS

Windows

[RemusMar]

This piece of code is involved in all of these:

				lasttrg.material.color.set( 0xffffff );
				var camvec = new THREE.Vector3( 0, 0, -1 );
				camvec.applyQuaternion( camera.quaternion );
				raycaster.set ( camP, camvec );
				var intersects = raycaster.intersectObjects( targets.children );
				if ( intersects.length > 0 ) {
					intersects[0].object.material.color.set( 0xff0000 );
					lasttrg = intersects[0].object;
				}

[RemusMar]

Another (very important) note: in case of static meshes (see Claire), everything is still working fine.

[Mugen87]

Do you mind using the non-minified version of three.js in testA_disco? This is potentially a bounding volume related issue in SkinnedMesh.raycast() (see #25791).

[RemusMar]

Here is the working 150 version: https://necromanthus.com/Test/html5/testA_disco_150.html

Do you mind using the non-minified version of three.js in testA_disco

I will prepare one asap

[RemusMar]

The minified 152bis version is resulted from the current three.js file processed by Google Closure Compiler with this command line:
java -jar compiler.jar --js "three.js" --js_output_file "three.min.js" --language_out=ES5

Reason: The SEA3D loader needs ES5.

[Mugen87]

Is it possible to share the Lara model as a glTF asset? I want to inspect the skeleton and the bounding sphere of the skinned mesh in the three.js editor in more detail.

BTW: It seems the dog asset shows the same issue. So sharing this one would also be fine.

[Mugen87]

One thing that would be interesting to test is the recomputation of the bounding spheres for the animated dog and Lara. What happens if you add the following two lines in your animation loop:

dog.computeBoundingSphere();
lara.computeBoundingSphere();

[RemusMar]

Is it possible to share the Lara model as a glTF asset?
It seems the dog asset shows the same issue. So sharing this one would also be fine.

Sure.
https://necromanthus.com/Test/html5/Lara_gltf.html
https://necromanthus.com/Test/html5/dog_gltf.html

What happens if you add the following two lines in your animation loop

I will try now

[RemusMar]

What happens if you add the following two lines in your animation loop:

dog.computeBoundingSphere();
lara.computeBoundingSphere();

No change.

[Mugen87]

Um, not sure what's going wrong yet.

Do you mind making a quick test with r151 to ensure everything works with that version?

[RemusMar]

Do you mind making a quick test with r151 to ensure everything works with that version?

Where can I find the r151 three.js file?

[Mugen87]

Here: https://github.com/mrdoob/three.js/tree/r151/build

[RemusMar]

Yes, I found it.
151 is good!

[Mugen87]

That's good!

Since r152, SkinnedMesh has an own raycast() method:

three.js/src/objects/SkinnedMesh.js

Lines 100 to 111 in d50cf0c

	raycast( raycaster, intersects ) {
	if ( this.boundingSphere === null ) this.computeBoundingSphere();
	_sphere.copy( this.boundingSphere );
	_sphere.applyMatrix4( this.matrixWorld );
	if ( raycaster.ray.intersectsSphere( _sphere ) === false ) return;
	this._computeIntersections( raycaster, intersects );
	}

Could please make a test by removing it from the build so the class uses the implementation from Mesh.raycast() again? I just want to make sure the problem comes from #25791 and not elsewhere.

[RemusMar]

I've put them all here:
150 good: https://necromanthus.com/Test/html5/testA_disco_150.html
151 good: https://necromanthus.com/Test/html5/testA_disco_151.html
152 bad: https://necromanthus.com/Test/html5/testA_disco.html

[RemusMar]

Could please make a test by removing it from the build so the class uses the implementation from Mesh.raycast() again?

With that part removed from 152, everything is perfect again.