Three.js: 장면 루트에서 멀리 떨어져있을 때 SkinnedMesh 버그 (0,0,0)

음, 내 Pixel에서 데모가 좋아 보입니다.

내 iPhone SE에서 확인 된 문제 —

아마도 iOS의 WebGL 정밀도 문제

그러나 iOS 장치는 실제로 스키닝 구현의 코드 경로 기반의 부동 텍스처를 사용합니다. 다음 적합성 테스트를 통해이를 확인할 수 있습니까?

https://www.khronos.org/registry/webgl/conformance-suites/1.0.3/conformance/extensions/oes-texture-float.html

iPhone SE에는 해당 페이지에 다섯 가지 오류가 있습니다. 😕

내 프로젝트에서 보여 드리기 위해 작은 스크린 캐스트를 만들었습니다.
http://cornflex.org/webgl/skin-bug.mp4

아바타가 0,0,0에서 너무 멀어지면 보시다시피 피부에 버그가 생기기 시작합니다.
나는 골격과 뼈의 깊은 프로파일 링을 만들었습니다. 지오메트리가 어떤 식 으로든 "풀링"된 것을 제외하고는 모든 것이 괜찮아 보입니다. 애니메이션 루트가 좋지 않지만 다시 말하지만 Threejs에서는 모두 괜찮아 보입니다.

Prob는 Skinning 셰이더의 Skeleton 및 bonesTexture와 명확하게 연결되어 있습니다.
나는 또한 정밀도에 관해서도 있지만 Mugen이 말했듯이 iOS 장치는 쉽게 지원해야합니다.

... 왜 아이폰에서만 : /

나는 꽤 붙어 있습니다 ... 백업 계획으로 png 시퀀스로 방향을 바꾸고 있습니다 ... :(

이것은 아이폰 6이 충분한 뼈를 지원하지 않기 때문일 가능성이 큽니다.

나는 똑같은 문제가 있었다.

여기에서 뼈 제한을 확인하십시오 : https://virtulo.us/2/vr/test

나는 그렇게 생각하지 않는다.
skinnedmesh가 0,0,0에 있으면 전혀 문제가 없습니다.
아바타 대신 모든 애셋을 이동하는 것도 고려 중입니다 ... (이것은 제 해결 방법 # 2입니다) 물론 스켈레톤이 데스크탑만큼 잘 작동하는 것을 선호합니다.

친구가 iPhone 8에서 동일한 버그를보고했습니다.

다음 적합성 테스트에서 어떤 결과를 얻습니까?

https://www.khronos.org/registry/webgl/conformance-suites/1.0.1/conformance/misc/shader-precision-format.html

ThreeJS 소스를 2 일 동안 살펴본 후 ... bonesTexture가 업데이트되면 문제가있는 것 같습니다.
이 텍스처가 올바르게 업데이트되지 않은 것 같고 정점을 원래 위치로 밀어 넣습니다 ... 물론 틀릴 ​​수 있습니다.

흠 ... 여기에 몇 가지 실패가 있습니다.

아마도 문제는 이러한 실패와 관련이 있습니다. 예를 들어 내 Pixel은 모든 테스트를 통과합니다.

로 이동 : 밖으로의 시도 뭔가하자 WebGLCapabilities 와의 값으로 설정 floatVertexTextures 에 false (이 플로트 질감의 사용을 방지 할 수 있습니다). 빌드를 만들고 앱에서이 three.js 버전을 사용합니다. 무슨 일이 일어나는지 궁금합니다 😊.

https://github.com/mrdoob/three.js/blob/099e4364541502fdf22fc7b1c0f54239d2ba1708/src/renderers/webgl/WebGLCapabilities.js#L105

렌더러에서 이미 floatVertexTextures = false를 시도했습니다.
피부가 미쳐가는 것을 멈췄지만 더 이상 애니메이션이 없습니다 : /
샘플을 푸시하겠습니다.

여기 있어요:
http://cornflex.org/webgl/skinning-bug2.html

renderer.capabilities.floatVertexTextures = false;

=> 더 이상 실행중인 애니메이션 없음

예, 내 Pixel에서도 동일합니다 (데스크톱 작동). 획일적 인 한계에 도달하고있는 것 같습니다.

버그가 점진적으로 나타나는 마지막 샘플을 만들었습니다.
http://cornflex.org/webgl/skinning-bug3.html

0,0,0에서 시작해서 앞으로 나아갑니다 ... 몇 초만 기다리세요 ... 피부가 미치기 시작합니다.

0,0,0에서 모두 괜찮다는 것은 매우 이상합니다. 그렇지 않습니까?

z : 1255> 여전히 정상
z : 18870> 미친 피부

내가 말했듯이 CPU 측의 모든 뼈대와 뼈 위치를 딥 프로파일 링했습니다. 모든 값이 괜찮은 것 같습니다. 내가 가진 유일한 단서는 메시가 0,0,0에서 멀어 질 때 iOS에서 올바르게 작동하지 않는 bonesTextures 및 bonesMatrix입니다.

뼈의 위치를 ​​확인한 이유는 루트 노드의 안정된 뼈의 일반적인 동작이기 때문입니다.

스킨 셰이더에서 GPU 측의 부동 정밀도에 대해 확인했지만 다시 한 번 ... 영향을 미치는 것은없는 것 같습니다.

아주 이상하게도 아무도 SkinnedMesh를 씬 내부로 옮기지 않았고 이것을보고하지 않았습니다.

한 가지 더 질문 : Chrome에 동일한 문제가 있습니까?

같은 문제예요.

정밀 문제인 것 같습니다. 장면을 축소 해 보셨습니까? (11195는 11km입니다).

또 다른 옵션은 캐릭터 대신 장면을 이동하는 것입니다. 큰 장면에서 일반적인 솔루션이되는 경향이 있습니다.

또한 스키닝 코드가 월드 공간에 있다고 생각합니다. 우리는 이것을 조사 할 수 있습니다.

당신의 뼈 수가 67 개인 것 같습니다.

내 (wifes) iphone 6의 Max Hardware Bones 제한은 27입니다.

내가 본 변형은 내 게임에서 그녀의 휴대폰에서 본 것과 동일합니다 (그리고 애니메이터에게 메시 아 미처를 수정하기 전에 가졌던 동일한 문제). 이것이 적어도 귀하의 문제의 일부가 아니라면 놀랄 것입니다.

시간이 지남에 따라 악화되는 이유는 무엇입니까? 몰라. 다른 누군가가 비슷한 것을 언급했지만 관련 여부는 확실하지 않습니다. https://discourse.threejs.org/t/updated-with-fiddle-as-animations-go-faster-there-is-increasing-error-in-accuracy/ 1707 년 6 월

아이폰에서 발견 한 또 다른 성가신 것 (적어도 아이폰 6) : 나는 반드시 highp 쉐이더 정밀도를 사용해야하고, mediump와 lowp는 똑같은 무서운 모양으로 메시를 왜곡하지 않지만 (전화상의 뼈 문제와 같이), 텍스처가 보입니다. 애니메이션하는 동안 이상하고 왜곡되거나 픽셀 화됩니다.

테스트중인 장치의 하드웨어 뼈 제한은 무엇입니까?

@mrdoob 이미 축소하려고 시도했지만 실제로 스키닝이 훨씬 더 빨리 미쳐집니다.
0.1로 축소하면 버그가 10 배 빠르게 나타납니다.

여기서 설명하기 위해 사용한 데모는 threejs 예제에서 나왔습니다.
내 게임에서 규모는 그다지 크지 않지만 버그는 동일하며 더 빨리 나타납니다.

실제로 스키닝은 세계 공간 또는 로컬 공간에서 수행되는 것처럼 보이지만 중심에서 멀리 이동하면 늘어납니다. 이것이 0,0,0에서 꽤 잘 실행되는 이유입니다.

아바타가 아닌 온 세상을 움직이는 것은 내 작업 # 2.
이미 물리학과 모든 것을 갖춘 세계 공간에서 러너 게임의 모든 루틴을 개발할 때 그것은 나쁜 선택이라는 것을 인정해야합니다. 그리고 z = 11000은 러너 게임에서 그리 멀지 않습니다. : / ... 그리고 그것은 배가 아니라 단지 달리는 사람입니다.

ThreeJS로 많은 게임을 만들었지 만 skinnedmesh를 사용하는 것은 처음입니다. 이 iOS 버그는 정말 짜증납니다.

Workaroung # 1 : 스프라이트 시트 애니메이션으로 6 개의 png 시퀀스를 수행하겠습니다. 그런 다음 세계 공간 논리를 유지할 수 있습니다. 마감일이 멀지 않습니다 :(

@titansoftime 아내의 iPhone 8에도 문제가 나타납니다. 이것은 iPhone 6에만 관련이 없습니다.
또한 최대 뼈대 문제가 있으면 처음부터 버그가 발생합니다. 여기에서 0,0,0에서 버그가 아님을 알 수 있습니다. 그렇다면 뼈 한계는 문제가 아닙니다. 스키닝 셰이더에서 뼈와 bonesMatrix의 월드 스페이스 계산은 IMO입니다.

iPhone 8의 최대 하드웨어 뼈대는 무엇입니까?

나도 몰라. 그리고 나는 그것이 장치에 의존하는지 확신하지 못합니다.

그러나 다시 ... IMO, 그것은 maxbones 값과 전혀 관련이 없습니다.

샘플은 iPhone 6,8, X에서 올바르게 작동합니다 .... 5도 ... SkinnedMesh가 0,0,0에있을 때만
https://threejs.org/examples/webgl_loader_fbx.html

maxbones가 문제 였다면 0,0,0에서도 스키닝이 좋지 않을 것입니다.

관련 :

https://www.opengl.org/discussion_boards/archive/index.php/t-159613.html
https://www.opengl.org/discussion_boards/archive/index.php/t-159364.html

zeoverlord 사용자

지 터링은 플로트에만 자연스럽고, 숫자가 높을수록 변수의 정밀도가 떨어 지므로 1.0에 가까울수록 정밀도가 가장 좋습니다. 이제 이것은 실제로 문제가되지는 않지만 엄청난 수의 행렬 계산을 많이 수행하면 정밀도 저하 (일명 지 터링)가 많이 발생할 것임을 의미합니다. 그래서 당신은 합리적인 숫자로 원점을 중심으로 모든 수학을 한 다음 번역해야합니다.

음, 매우 흥미로운 @ Mugen87! 누출을 발견 한 것 같습니다.

z : 1255> 여전히 정상
z : 18870> 미친 피부

오류는 귀하의 편일 수 있습니다.
일반적인 실수 : 스킨 모디파이어가 제대로 적용되지 않았습니다.
오류 1 : 너무 많은 골격으로 제어되는 정점
오류 2 : 가중치가없는 (또는 가중치가 매우 작은) 정점.

SkinnedMesh가 원점 (0,0,0)에 가까워지면 이러한 오류를 알 수 없습니다.
하지만 멀리 이동하면 모바일 장치의 정확성을 탓할 것입니다.
따라서 가장 먼저해야 할 일은 스킨 모디파이어를 다시 디자인하는 것입니다 (이번에는 적절하게).

@RemusMar 페이지의 소스를 보셨습니까?
내가 공개 한 예제는 ThreeJS 소스에서 바로 나왔습니다.

내 설명에서 잘 언급되었습니다.)

나는 이것을 게시하기 전에 많은 테스트를 실행했습니다 ... 내 애니메이션 내보내기에서 단서를 찾고 있었지만 모든 종류의 형식 (GLTF, FBX, Collada, JSON, ...)에서 버그가 발생하는 것을 발견했습니다.

나는 문제를 드러내 기 위해 깨끗한 소스로 명확한 예를 만들었습니다. 스마트 폰에서 확인하는 것은 매우 쉽습니다.

http://cornflex.org/webgl/skinning-bug.html

내가 공개 한 예제는 ThreeJS 소스에서 바로 나왔습니다.

그래서 뭐?

ThreeJS의 모든 skinnedmesh 예제에서 이런 일이 발생할 때 오류가 어떻게 발생할 수 있습니까? :)

당신은 말했다 :

오류는 귀하의 편일 수 있습니다.
일반적인 실수 : 스킨 모디파이어가 제대로 적용되지 않았습니다.
오류 1 : 너무 많은 골격으로 제어되는 정점
오류 2 : 가중치가없는 (또는 가중치가 매우 작은) 정점.

FBX는 ThreeJS에서 왔으며 GLTF 또는 다른 형식으로 시도 할 수 있습니다. 문제는 동일합니다.

var loader = new THREE.FBXLoader ();
loader.load ( 'https://threejs.org/examples/models/fbx/xsi_man_skinning.fbx', OnFBXLoaded);

@ Mugen87 이 단서를 찾았습니다. GPU 스킨 메쉬를 만든 사람이 문제를 해결할 수 있기를 바랍니다.

ThreeJS의 모든 skinnedmesh 예제에서 이런 일이 발생할 때 오류가 어떻게 될 수 있습니까?

나는 "오류는 당신 편일 수 있습니다."라고 말했습니다.
결론:
스킨 수정자가 제대로 적용된 간단한 SkinnedMesh 사용 :

• 정점 당 최대 4 개의 뼈
• 모든 가중치 = 1.0000

버그를 재현 할 수 있는지 확인하십시오.

미쳤어? :)
이 버그는 내 편이 될 수 없습니다. 모델 (fbx, gltf, dae 등)과 코드 소스는 ThreeJS에서 가져 왔습니다.

@ Mugen87 게시물을 읽으십시오.

스킨 수정자가 제대로 적용된 간단한 SkinnedMesh 사용 :

• 정점 당 최대 4 개의 뼈
• 모든 가중치 = 1.0000

버그를 재현 할 수 있는지 확인하십시오.

지금 가야 해요.
건배

흠. 어떤 사람인지 알아? 이것은 데스크탑에서도 일어나고 있습니다 :(

ThreeJS 예제 메시는 거대 (높이 100m)이므로 매우 멀리 배치했습니다. z = 10000000
그리고 같은 문제를보세요.
http://cornflex.org/webgl/skinning-bug4.html

@ Mugen87에 의해 노출 된 것처럼 월드 스페이스 본 위치 및 본 매트릭스 계산과 관련된 것이

https://www.opengl.org/discussion_boards/archive/index.php/t-159613.html
https://www.opengl.org/discussion_boards/archive/index.php/t-159364.html

이전에 @mrdoob에 설명했듯이 이미 메시를 축소하려고 시도했지만 문제는 더 나빠졌습니다 ... 심지어 데스크톱에서도 0,0,0에서 그리 멀지 않은 버그가 발생합니다.

내 게임 (현실적인 스케일 1 : 1 사용)에서 버그는 이미 z : 100에 나타납니다.

잘못 설계된 스킨 메시를 계속 사용합니다.
어쨌든,이 주제를 끝내기 위해 1에서 1,000,000 (백만 !!!) 사례 연구가 있습니다.
http://necromanthus.com/Test/html5/Lara_1000000.html
스테이지를 클릭하여 Y = 0과 Y = 1000000 사이를 전환합니다.
스위치별로 사소한 전역 조명 변경이 가능합니다.
따라서 스키닝 된 메시가 적절하게 디자인 되었다면 그 결과는 완벽에 가깝습니다.
건배

이번 달 출시 이후에 살펴 보겠습니다.

@mrdoob 감사합니다.

@RemusMar 당신은 여기에서 말한 것을 계속 무시합니다. 전체 스레드를 다시 읽으십시오 :)

나는 당신에게 실제적인 예를 들었지만 당신은 여전히 ​​이해하지 못합니다.
http://necromanthus.com/Test/html5/Lara_1000000.html

그리고 당신은 나쁜 관행 에 대해 계속 이야기
다음 사항에 유의하십시오.
단 정밀도 부동 소수점 자릿수는 7입니다.
1234,567 및 123456.7을 포함합니다.
대부분의 가중치 맵에는 소수점 4 자리가 있지만 하나라도 괜찮은 결과를 제공합니다.
이러한 이유로 모든 3D 엔진은 세계 크기에 대해 최대 값 10,000을 권장했습니다.
0000.001에서 9999.999까지
우리 모두는 "무한"또는 거대한 3D 세계를 원하지만 그것은 불가능합니다.
당신이하는 일은 많은 관점에서 완전히 잘못되었습니다.
게임 디자인, 공연, 애니메이션 및 충돌.
이제 주요 사진을 얻으 셨기를 바랍니다.

관련 정보 : http://davenewson.com/posts/2013/unity-coordinates-and-scales.html

뿡 빵뀨
나는 당신이 말한 것을 아주 잘 이해했지만 불행히도 당신의 모델에는 같은 문제가 있습니다.
http://cornflex.org/webgl/skin-bug2.mp4

출처:
http://cornflex.org/webgl/skinning-bug5.html

그리고 z = 60000보다 높은 위치를 주면 점점 더 나 빠지고 ... 100000까지 완전히 보이지 않습니다.

우리 모두는 "무한"또는 거대한 3D 세계를 원하지만 그것은 불가능합니다.

LOL, 나는 무한한 거대한 세계를 원하지 않는다 ... 나는 ThreeJS로 전에 여러 번했던 것처럼 러너 게임을 만들고 싶지만 이번에는 아바타로 skinnedmesh가 필요합니다.

내 장면 : http://cornflex.org/webgl/skin-bug.mp4

수 미터를 넘어가는 아바타를 애니메이션 할 수 없다면, 요점은 무엇입니까 ?? (현실적인 규모 1m = 1 threejs 단위, 버그는 이미 100에서 나타납니다).

BTW, 당신의 모델은 키가 150m입니다. 이것은 실제적인 스케일이 아닙니다.
편집하다:
여기에 모델에 배율 (0.01, 0.01, 0.01)이있는 동일한 장면을 사용하여 실제 크기 (약 1.5m)를 얻습니다. 보시다시피 모바일에서 이미 z = 300에서 버그가 발생했습니다.
http://cornflex.org/webgl/skin-bug3.mp4

당신이하는 일은 많은 관점에서 완전히 잘못되었습니다.
게임 디자인, 공연, 애니메이션 및 충돌.

LOL LOL ... 게임 제작에 대한 웹 사이트와 블로그 (http://quentinlengele.com, http://cornflex.org, http://www.ddrsa.com, http://br9732.com)를 방문하는 것이 좋습니다. )

편집 : iOS, 빈 화면 (http://necromanthus.com/Test/html5/Lara_1000000.html)에서 장면이 보이지 않습니다.

스키닝은 세계 공간 또는 로컬 공간에서 수행되는 것처럼 보이지만 중심에서 멀리 이동하면 늘어납니다. 이것이 0,0,0에서 꽤 잘 실행되는 이유입니다.

보자 :

vec3 transformed = vec3( position );
...
#ifdef USE_SKINNING
    vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 );
    vec4 skinned = vec4( 0.0 );
    skinned += boneMatX * skinVertex * skinWeight.x;
    skinned += boneMatY * skinVertex * skinWeight.y;
    skinned += boneMatZ * skinVertex * skinWeight.z;
    skinned += boneMatW * skinVertex * skinWeight.w;
    transformed = ( bindMatrixInverse * skinned ).xyz;
#endif

나에게 세계 공간처럼 보이지 않습니까? 일반 메시에서 transformed 는 position 속성, 즉 로컬 좌표로 설정됩니다.

그래서 무슨 일이 일어나 든 js 측에서 일어나고 bind와 bone 행렬이 계산됩니다. 바인드 매트릭스는 많은 스트레치를 수행하고, 본 매트릭스는 바인드 매트릭스에서 그다지 많은 스트레치가 필요하지 않은 다른 좌표에서 작동하도록 닥터 링 될 수 있습니다.

(편집 : nvm, 나는 이것이 잘못되었다고 생각합니다)

@makc 불행히도 스키닝 셰이더의 복사 / 붙여 넣기에서 계산이 로컬 또는 월드 공간 좌표에서 수행되었는지 알 수있는 충분한 데이터가 없습니다.

내가 말했듯이 뼈 행렬 계산에 분명히 잘못된 것이 있거나 이러한 행렬 계산의 순서가 올바르지 않을 수 있습니다. OpenGL 포럼에서 볼 수 있고 @ Mugen87이 언급했듯이, 이것은 적어도 나에게는 가장 반증적인 단서입니다.

지 터링은 플로트에만 자연스럽고, 숫자가 높을수록 변수의 정밀도가 떨어 지므로 1.0에 가까울수록 정밀도가 가장 좋습니다. 이제 이것은 실제로 문제가되지는 않지만 엄청난 수의 행렬 계산을 많이 수행하면 정밀도 저하 (일명 지 터링)가 많이 발생할 것임을 의미합니다. 그래서 당신은 합리적인 숫자로 원점을 중심으로 모든 수학을 한 다음 번역해야합니다.

다시 설명했듯이 개체의 크기가 버그에 영향을줍니다.
ThreeJS 소스를 사용한 예제는 z = 100000에서만 버그를 나타내지 만 메시의 크기 (ThreeJS 소스에서도 제공됨)가 거대하기 때문입니다. 달리는 소년의 키는 150m입니다.

게임을 할 때 당연히 그런 종류의 스케일을 사용하지 않습니다. 당신은 항상 1m = 1unit으로 당신의 세계를 지키려고 노력합니다. 이것은 좋은 물리학과 행동을 얻기 위해 필수적입니다.

여기서 문제는 실제 크기의 SkinnedMesh를 사용하는 경우입니다. 버그는 이미 z = 300에 나타납니다.

어떤 엔진에서든 SkinnedMesh를 x : 30000, y : 60000, z : 140000000에 놓을 수 있으며 뼈대와 스키닝에 문제가 없습니다. 지 터링이 없습니다.

확실히 저는 우리가 여기서 자바 스크립트 코어를 작업하고 있다는 것을 잘 이해합니다.

여기에서 "우리 모두는 무한한 세계를 원하지만 불가능한"척하는 트롤들은 학교로 돌아가서 행렬 변환을 배워야합니다. 또는 오픈 월드 게임을 더 잘보고 자신의 아바타가 씬 루트 0,0,0에서 멀리 떨어진 "skinnedmeshed"가 될 수있는 방법을 스스로 물어보십시오.

이 버그는 재밌습니다. 여기에서 데스크탑에서 재현 할 수 있었지만 60K로는 정밀도가 부족했습니다.

좋아, 그래서 z = 1e8에서, 다음은 현재 셰이더에있는 것입니다.

셰이더를 이렇게 변경하면 다음과 같습니다 (위에서 편집 한 내 머리 위 테스트의 약간 변형).

#ifdef USE_SKINNING
    vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 );
    vec4 skinned = vec4( 0.0 );
    skinned += ( bindMatrixInverse * boneMatX ) * skinVertex * skinWeight.x;
    skinned += ( bindMatrixInverse * boneMatY ) * skinVertex * skinWeight.y;
    skinned += ( bindMatrixInverse * boneMatZ ) * skinVertex * skinWeight.z;
    skinned += ( bindMatrixInverse * boneMatW ) * skinVertex * skinWeight.w;
    transformed = skinned.xyz;
#endif

여전히 흔들리지 만 훨씬 좋아 보입니다. :) 이제이 문제의 맥락에서 이것이 무엇을 의미합니까?

첫째, 쉐이더에이 해킹을 복사하여 붙여 넣을 수는 없습니다. 내 말은, 당신은 할 수 있지만 그것은 1 행렬 곱셈을 4로 대체합니다. 대신 내가 제안하는 것은 a) js 측에서 결합 행렬의 역과 뼈 행렬을 병합하고 단일 유니폼으로 전달하거나 b) 이것만을 위해 다른 유니폼을 만드는 것입니다. 셰이더 조각. 그런 다음이 문제를 (다소) 해결하고 셰이더의 행렬 곱셈 수를 1 씩 줄입니다.

아, 그리고

여기 트롤들은 "우리 모두는 무한한 세계를 원하지만 불가능한"척합니다.

그들이 말하려는 것은 라이브러리를 고치지 않고도 문제를 해결할 수 있다는 것입니다. 필요하지는 않지만 할 수 있습니다.

@makc 시간을 내 주셔서 대단히 감사합니다.
불행히도 너무 늦었습니다. 금요일 배달해야합니다. 해결 방법으로 PNG 시퀀스를 사용했습니다.

이것을 충분히 디버깅하고 싶다면. 사실적인 메쉬 크기를 사용해 볼 수 있습니까?
다시 말하지만,이 라라 모델도 제가 잘 기억한다면 60m 정도의 키입니다.

당연히 당신의 패치가 현실적인 규모로도 작동하는지 궁금합니다. :)

아 그리고 ... iOS에서 테스트하고 있습니까?
이 스레드에서 설명했듯이 이는 주로 iOS 장치 (6, 8)에서 발생합니다.
데스크톱에서는 매우 큰 값만이 문제를 가져옵니다.

다시 한 번 감사합니다

@OrtOfOn 코드 상단에 다음을 추가하여 @makc 패치를 시도 할 수 있습니다.

THREE.ShaderChunk.skinning_vertex = `
#ifdef USE_SKINNING
    vec4 skinVertex = bindMatrix * vec4( transformed, 1.0 );
    vec4 skinned = vec4( 0.0 );
    skinned += ( bindMatrixInverse * boneMatX ) * skinVertex * skinWeight.x;
    skinned += ( bindMatrixInverse * boneMatY ) * skinVertex * skinWeight.y;
    skinned += ( bindMatrixInverse * boneMatZ ) * skinVertex * skinWeight.z;
    skinned += ( bindMatrixInverse * boneMatW ) * skinVertex * skinWeight.w;
    transformed = skinned.xyz;
#endif
`;

THREE.WebGLShader : 셰이더를 컴파일 할 수 없습니다. : /

오 이런. 잘못된 따옴표와 한 줄 형식으로 끝났습니다. 어떻게 복사-붙여 넣기를하나요?

또한 호기심을 충족시키는이 엉뚱한 이미지를보기 위해 그렇게했습니다. 나는 다른 누군가가 여기에서 가져갈 것이라고 믿습니다. :)

@makc CTRL + C / CTRL + V ... 바로 여기에서 ... : /

불행히도 버그는 이전보다 덜 강하지 만 여전히 존재합니다.

iOS에서 테스트 됨 (패치 적용됨) :

스케일 1.0의 메시 (정확히 20m 높이의 아바타), 위치 z = 10000
http://cornflex.org/webgl/skin-patch1.mp4

스케일 0.1 (2m 높이의 아바타), 위치 z = 3000의 메시
http://cornflex.org/webgl/skin-patch2.mp4

@mrdoob 재현 해 보겠습니다. :) 한 줄로 나왔습니다. 나는 당신의 답장이 튀어 나오는 것을 보았을 때 페이지에 글을 쓰고 있었고 정상적으로 나타나지 않았습니다. 약속합니다 : p ...이 보너스 포인트를 얻을 것입니다.

편집 : BTW 당신은 ​​당신의 게시물을 편집 했습니까? :)

잔여 효과는 스키닝과 관련이 없으며 실제로 모든 것에 영향을 미칠 수 있다고 생각하지만 애니메이션이 없기 때문에 눈치 채지 못합니다.

@OrtOfOn 당신의 장소에서 나는 당신의 전체 장면 (카메라로)을 여분의 Object3D로 감싸고이 객체 좌표를 -1 * 아바타 좌표로 설정하려고 노력할 것입니다. 이것은 0,0,0 세계 좌표를 영원히 유지합니다.

@markc 나는 정말로 이렇게 속이는 것을 좋아하지 않습니다. 게임 플레이와 장면은 그렇게 고문을 당하도록 설계되지 않았으며 모바일 퍼스트 게임으로서 perfs는 물론 최적이어야합니다.

또한 ... 내 경우는 아니지만 SkinnedMesh의 여러 적들과 함께 이것을 상상해보십시오.

마감일이 지났고 SkinnedMesh를 스프라이트 시트 애니메이션으로 대체했기 때문에 선택의 여지가 없었습니다 (클라이언트는 괜찮습니다). 그렇지 않으면 나는 이런 일을 겪는 것 외에는하지 않았다. 거의 모든 웹 프로젝트에서 ThreeJS를 사용하고 있으며 매우 만족합니다.

우리는 "무한 세계"를 원하지 않지만 유명한 엔진 에서처럼 월드 공간 좌표에서 이러한 멋진 SkinnedMesh 및 애니메이션 기능을 사용할 수 있기를 바랍니다. :)

저는 약간 실망 스럽습니다. 크로스 페이드 기능을 기반으로 매우 멋진 Animator 스크립트를 만들고 mecanim에서 영감을 얻었 기 때문에 ... 다음 프로젝트를 위해 확실히 : /

@markc 나는 정말로 이렇게 속이는 것을 좋아하지 않습니다.

나는 그것이 전혀 속임수라고 생각하지 않습니다. 이것이 모든 공간 시뮬레이션이 작동하는 방식입니다. 실제로 실시간 3D 렌더링은 기본적으로 전체 장면을 상쇄하므로 중앙이 카메라가있는 곳입니다.

@mrdoob 예, 카메라가 존재하지 않는다는 것을 알고 있습니다. 행렬의 힘 :) (저는 네이티브 WebGL / OpenGL 개발을 직접 수행합니다).

어쨌든, 모든 씬을 게임 오브젝트에 넣는 것은 나에게 약간 바바 인 것처럼 보입니다. 특히 스킨 된 애니메이션이 작동하도록합니다.

@OrtOfOn 실제로 장면 자체를 사용할 수 있습니다. 예를 들어 lara 예제에서 다음을 수행하십시오.

scene.add(camera);
scene.position.z = -60000;

그리고 괜찮습니다 (편집 :하지만이 작업을 할 때 조명에 문제가 있습니다 .... @mrdoob ?)

@makc 패치를 제안

나는 전혀 비관적 인 사람이되고 싶지 않지만 이런 종류의 조작을함으로써 조명이 유일한 문제가 아니라는 사실이 있습니다. 이것이 결과의 불확실성과 파이프 라인의 다른 부분에 대한 결과 때문에 이러한 트릭과 치트라고 부르는 이유입니다.

불행히도 게임을 만드는 사람들은 물리학, 레이 캐스터, 파티클 등을 가지고 있습니다. 사실적인 스케일로 세계 공간에 있도록 설계되고 설계되어야하는 많은 것들이 있습니다.

또한 씬의 일부 위치에 숨어 있거나 스폰되는 적과 같이 하나 이상의 SkinnedMesh에서 이러한 패치가 작동하는 모습을보고 싶습니다. 그렇다면 0,0,0에서 하나의 skinnedmesh 아바타로 제한되는 점은 무엇입니까?

가능한 한 빨리 소스를 깊이 파고들 겠지만 2 일 안에 뭔가를 전달해야합니다 ... 그래서 내 스프라이트 시트 애니메이션은 당분간 꽤 괜찮습니다.

그렇다면 0,0,0에서 하나의 skinnedmesh 아바타로 제한되는 점은 무엇입니까?

요점은 스킨을 0,0,0에 렌더링하고 다른 스킨을 z = 60000에 동시에 렌더링 할 가능성이 거의 없다는 것입니다. 0,0,0 주변의 몇 개의 스킨 만 화면에 표시되며 버그를 유발할만큼 멀지 않습니다.

@makc 다시 말하지만, 패치는 데스크톱에서 유효하지만 실제 크기 조정 된 메시로 0,0,0에서 몇 미터 떨어진 곳에 버그가 이미 나타나는 iOS 장치에서 사례를 테스트하고 있지 않습니다. 나는 그것에 대해 충분한 비디오를 보여주었습니다. 예를 들어 이것은 z = 100에서만 버그를 나타냅니다.
http://cornflex.org/webgl/skin-bug.mp4

게임에서 항상 20m 높이의 아바타를 사용하십니까? :)
초점을 맞춘 숫자 (60000)는 모바일이 아닌 데스크톱 (매우 거대한 라라 또는 거대한 threejs fbx 샘플)에서 버그를 노출하는 데만 사용되기 때문입니다. 그리고 내 아바타는 당연히 그렇게 멀리 가지 않습니다 ...

나는 이것이 iOS 문제임을 확인할 것입니다. 적어도 6S / 6S + 세대 이후로 iOS는 floatVertexTextures에 문제가있었습니다. 우리가 사용하고있는 수정 사항은 iOS에서 해당 기능을 비활성화하는 것입니다. 이것은 우리가 사용할 수있는 뼈대를 제한하지만, 어차피 끔찍한 전화기를 지원하기 위해 뼈대를 제한해야합니다.

iOS 기기가 @ Mugen87 에서 게시 한 적합성 테스트에 실패하면 iOS에서 기본적으로 floatVertexTextures 또는 심지어 floatFragmentTextures를 비활성화하는 것이 좋습니다. 지원하도록 광고하는 기능을 올바르게 구현하지 않기 때문입니다.

@ daniel-nth 말이되는 것 같아요. 그러나 ... @OrtOfOn 은 z = 60K가 데스크탑에서 문제를 재현한다고 말하고 있습니다. 데스크탑에서 60K에서는 문제가 없습니다. "재현"하는 데는 1e8만으로 충분했습니다. 따라서이 문제는 실제로 최소한 3 개의 개별 문제 일 수 있습니다.

• iOS에서 플로팅 텍스처,
• @OrtOfOn 의 데스크탑에서 60K로
• 뼈 셰이더 비트의 잘못된 행렬 곱셈 순서로 인해 1e8에서 정밀도가 부족합니다 (위에서 엉망으로 만든 것).
• 패치 후에도 소녀가 여전히 약간 흔들 렸기 때문에 정점 셰이더에 다른 것이있을 수 있습니다.

안녕하세요 여러분,
먼저이 버그로 돌아와 주셔서 감사합니다. 나는 여전히 그것을 파낼 시간을 찾지 못했습니다 :(

@ daniel-nth 개체의 크기가 버그에 영향을줍니다.

iOS에서이 매우 큰 "Lara"개체 (height = 120, scale = 1)를 사용하면 실제로 z = 60000에 버그가 나타납니다. 그러나 사실적인 크기의 메시 (높이 = 1.8, 배율 = 1)를 사용하면 이미 z = 100에서만 나타납니다.

skinnedmesh가 클수록 버그를 보려면 번역해야합니다.

이 스레드에서 이미 테스트하고보고했듯이 iOS에서 floatTextures를 비활성화하면 스키닝이 전혀 발생하지 않습니다.

나는 또한 뼈 행렬의 잘못된 행렬 곱셈 또는 막대 곱셈 순서가 의심됩니다.

iOS에서이 매우 거대한 "Lara"개체 (height = 120, scale = 1)를 사용하면 버그가 z = 60000에 나타납니다.

@OrtOfOn 기다려, 그래서 ios? 그러나 당신은 또한 말했다 :

초점을 맞춘 숫자 (60000)는 모바일이 아닌 데스크톱 (매우 거대한 lara 또는 거대한 threejs fbx 샘플 포함)에서 버그를 노출하는 데만 사용됩니다.

iOS에서이 매우 큰 "Lara"개체 (height = 120, scale = 1)를 사용하면 실제로 z = 60000에 버그가 나타납니다.

전혀 크지 않습니다.
그리고 여전히 모델 크기와 세계 규모 사이의 관계를 이해하지 못합니다.
마지막으로:
http://necromanthus.com/Test/html5/Lara_1000000.html
Modeil 높이는 대략 75이고 세계 규모는 9,999,999입니다.
Z = 0에서 Z = 1,000,000 (백만 !!!)
단 정밀도 부동 소수점 자릿수는 7이기 때문에 소수가 전혀 남지 않습니다 !!!
내가 가지고있는 모든 노트북과 데스크탑에서 완벽하게 실행됩니다.
더 나아가:
Android 6 및 7 및 다양한 삼성 휴대폰에서 완벽하게 실행됩니다.

귀하의 예에서 @RemusMar 는 다음을 콘솔에 입력하십시오.

camera.position.z += 1e8;
scene.children[2].position.z += 1e8;

다음과 같은 내용이 표시됩니다.

그것은 삼중이다

z = 1e6도 나쁘지 않다는 것을 알려 드리겠습니다. 1e7 즈음에는 이미 눈에 띄고 1e8은 미쳤습니다.

@OrtOfOn capabilities.floatVertexTextures를 false로 설정하면 iOS에서 작동합니다. 나는 당신의 모델이 유니폼에 맞추기 위해 많은 뼈를 사용한다고 생각합니다.

z = 1e6도 나쁘지 않다는 것을 알려 드리겠습니다. 1e7 즈음에는 이미 눈에 띄고 1e8은 미쳤습니다.

알아요,하지만 그 값들에 대해서는 정확하지 않습니다.
스키닝 된 메시 정점 가중치 정밀도의 경우 최대 표준 크기는 9.999.999입니다.
이는 더 이상 수백만의 최대 거리로 변환됩니다.
건배

@makc 사실, 데스크탑에 대한 잘못된 번호가 있습니다. 그것은 매우 거대해야합니다. 당신 말이 맞습니다. 저는 사실 이전에 스레드에서 언급했습니다 : / https://github.com/mrdoob/three.js/issues/13288#issuecomment -364650679

@ daniel-nth 잘 알고 있지만 확실합니까? 다음은 threejs 소스의 3d 모델을 사용하여이 스레드에서 수행 한 테스트입니다. 여전히 코드를 볼 수 있습니다. @ Mugen87 도 동일한 피드백을 만들었 https://github.com/mrdoob/three.js/issues/13288#issuecomment -364572653

아, 모델이 더 이상 존재하지 않는 것 같습니다. https://threejs.org/examples/models/fbx/xsi_man_skinning.fbx의 404

@ daniel-nth 뼈가 적은 새 모델을 사용하는 경우 나는 당신을 믿습니다;)

@RemusMar 꽤 최근 게시물에서 유발 된 거리에 대해 당신과 동의했습니다. 숫자 (1e6, 1e8, 1e9, ...)는 확실히 정확도가 떨어집니다. 그것에 대해 의심의 여지가 없습니다. 하지만 제발 그만 트롤링하세요. 내가 아무것도 이해하지 못하는 척하지 말고 높이가 120 인 아바타 메시가 크지 않은지 자문 해보십시오. 저에게는 아티스트, 레이 캐스트, 물리학, 조명 등이 제작 한 다른 현실적 스케일 오브젝트와 함께 게임 개발에서 매우 거대하고 유용하지 않으며 3 주 내에 제공됩니다.

나는 주장합니다 : 미터법 단위로 자산을 현실적인 규모로 유지하는 것은 물리적 기반 게임을 올바르게 구축하는 데 필수적입니다. :)

안타깝게도 iOS에서는 이러한 현실적인 스케일 조건에서 100m 이상 아바타를 실행할 수 없습니다.

업데이트 : 어쨌든 @ daniel-nth는 이제 floatTextures를 끄고 매우 제한된 뼈 수로 작업하고 있다고 말하는 것 같습니다.

하지만 제발 그만 트롤링
나는 주장합니다 : 미터법 단위로 자산을 현실적인 규모로 유지하는 것은 물리적 기반 게임을 올바르게 구축하는 데 필수적입니다. :)

나는 당신을 트롤링하지 않습니다.
그러나 1.5 단위는 1.5 미터를 의미하지 않습니다.
건배

뿡뿡

나는 주장합니다 : 미터법 단위로 자산을 현실적인 규모로 유지하는 것은 물리적 기반 게임을 올바르게 구축하는 데 필수적입니다. :)

그러나이 척도는 임의의 자체 부과 값입니다. 센티미터를 사용하기로 결정할 수도 있습니다. 그러면 "높이가 120 인 아바타 메시"는 실제로 평균보다 작습니다.

@makc 물론입니다.하지만 물리 엔진 / libs에서는 미터법 값을 사용할 것으로 예상합니다. 이미 크기가 조정 된 오브젝트 또는 비 메트릭 값으로 일부 물리를 시도 했습니까? 개발하는 것은 금방 끔찍 해지고 예상치 못한 비현실적인 결과를 얻게됩니다. 모든 병력도 검토되고 확장되어야합니다. 작동하지만 정확하지는 않습니다.

물론 달성해야하는 정밀도 수준에 따라 다르며 1e6, 1e7, ...과 같은 값은 너무 커서 정밀도 문제가 발생합니다. 그리고 skinnedmesh를 그렇게 멀리 이동할 필요가 없습니다. 우리는 그것에 대해 동의했습니다. 그러나 iOS에서는 적어도 수백 단위 범위에서 GPU skinnedmesh (1.5 단위 높이)를 이동할 수 있어야합니다.

그러나 물리 엔진 / libs는 메트릭 값을 사용하기를 기대합니다.

그건 사실이 아니야.
미터, 센티미터, 인치 등은 관련이 없습니다.
전에 말했듯이 (여러 번) 중요한 것은 세계 크기 (규모)와 정확성입니다.
다음 사항에 유의하십시오.
높이가 1.5 단위 인 스키닝 된 메시가있는 경우 정점 가중치 맵에서 최소 2-3 개의 소수를 사용하도록 강제됩니다.
물리 엔진 (있는 경우)의 경우 허용 가능한 결과를 위해 3-4 개의 소수가 필요할 수 있습니다.
전역 정확도에 4 자리 소수가 필요한 경우 최대 세계 크기는 999입니다 (단 정밀도 부동 소수점 자릿수는 7이기 때문).
즉, 괜찮은 애니메이션과 괜찮은 물리학을 원한다면 수백의 거리를 사용할 수 있습니다.
이번에는 전체 사진을 얻으 셨기를 바랍니다.
건배

@RemusMar 여기서 멈출 게요. iOS 기기에서 케이스를 테스트하지 않았거나 원하지 않는 것 같습니다. GPU skinnedmeshes가있는 이러한 장치에서는 "수백 거리"를 사용할 수 없습니다. 메시가 매우 빨리 미쳐 버립니다. 이것이이 스레드의 요점이며 처음에이를보고하고 싶었습니다. 그게 다입니다.

여기에있는 다른 사람들과 내 화면 캡처에 의해보고 된대로 모든 제안과 샘플이 iOS 장치에서 작동하지 않는다는 사실을 알고 있기를 바랍니다.

GPU skinnedmeshes가있는 이러한 장치에서는 "수백 거리"를 사용할 수 없습니다.

또 틀렸어.
위의 스크린 샷을 참조하십시오 (Android 7-Samsung 휴대폰).
모델 높이 = 75 (경계 구 반경 약 38) 및 거리 1,000,000 (백만 !!!)
또는 모델 높이 = 1.5 및 거리 20,000.

추신
iOS가 항상 버그 모음이라는 것이 내 문제가 아닙니다.

@RemusMar 내가 틀린 게 아니에요, 당신은 트롤. 나는 iOS에 대해 이야기하고 있고 당신은 다른 장치에 대해 이야기하고 있습니다. 당신은 화났습니까 ??

당신이 애플을 너무 싫어한다면 내 문제가 아닙니다. 내 고객 중 한 명이 ThreeJS로 만든 3D 웹 기반 게임을 원할 때 "iPhone으로 좆까"라고 말하지 않습니다. 그렇게한다면 죄송합니다.

여기서 전송의 끝 ... 더 이상 따라갈 수 없습니다.

@OrtOfOn 예, 제가 사용한 모델에는 19 개의 뼈가 있고 404 fbx에는 67 개의 뼈가 있습니다.

https://github.com/mrdoob/three.js/issues/13288#issuecomment -364550036에는 균일 한 뼈 제한을 보여주는 페이지에 대한 링크가 있습니다. 페이지에서 사용하는 공식은 Math.floor((data.webgl.params.MAX_VERTEX_UNIFORM_VECTORS - 20) / 4); 입니다. three.js의 경우 100 % 정확한지 확실하지 않지만 iPhone X에서도 27 건을보고합니다. 불행히도 Galaxy S3의 절반도 안되지만 여전히 충분합니다. 모바일 WebGL 게임. 내 작업 폴더와 26 개의 WebGL 프로젝트에서 단 하나만 더 많은 뼈가있는 모델을 가지고 있으며 해당 모델은 0,0,0에 유지됩니다.

@OrtOfOn : 고정 된 장면에서 비슷한 문제가 발생하고 장면에서 스킨이 적용된 캐릭터가 움직입니다. 캐릭터가 iOS에서 심하게 흔들립니다. 뼈의 수는 22입니다. 장면의 크기는 합리적입니다. 문제는 정점 텍스처를 사용하면 Threejs가 월드 공간에서 스키닝을 계산한다는 위의 주장과 함께 32 비트 부동 소수점으로 제한된다는 것입니다.

나는 지금 세계 공간 주장을 조사하고 있으며, 지역 공간에서 수직 위치를 계산 한 다음 객체를 번역하는 적절한 방법을 구현할 것입니다. 스키닝을 사용하여 객체를 월드 공간에 배치하는 사람에 대해 들어 본 적이 없어서 구현자가 왜 그런 일을했는지 ​​모르겠습니다.

해결책이 있으면 다시 게시하겠습니다.

참고로 ios의 float 텍스처는 버텍스 셰이더로만 깨지지 않습니다. 나는 최근에 ios에서 색상 밴딩을 수정하기 위해 float 텍스처를 정수 텍스처로 변경하고 있었기 때문에 보편적 인 ios 문제입니다. 정말로 원한다면 정수 텍스처를 사용하여 ios의 뼈를 수정할 수도 있습니다. 여기에 다른 사람의 셰이더에서 가져온 관련 스 니펫이 있습니다.

vec2 encodeFloatRG( float v )
{
    vec2 kEncodeMul = vec2(1.0, 255.0);
    float kEncodeBit = 1.0/255.0;
    vec2 enc = kEncodeMul * v;
    enc = fract (enc);
    enc.x -= enc.y * kEncodeBit;
    return enc;
}

float decodeRGFloat( vec2 enc )
{
    vec2 kDecodeDot = vec2(1.0, 1.0/255.0);
    return dot( enc, kDecodeDot );
}

... 사실, 당신은 아마도 (여기서는 그런 것을 시도하지 않았다고 가정하고 있습니다), ios 정밀도를 전역 정밀도 제한으로 받아들이고 하나가 아닌 2 개의 float를 텍스처에 저장한다면 플로트 본 텍스처도 작동하게 만들 수 있습니다.

나는 threejs가 속한 지역 공간에서 스키닝 계산을 수행하고 세계 공간 매트릭스를 통해 표준 방식으로 모델을 실제 세계 좌표로 변환함으로써 문제를 완전히 해결했습니다.

위의 문제는 iOS 스키닝에서 완전히 수정되었습니다. 또한이 솔루션은 보편적이라는 점을 지적해야합니다. 테스트 한 Android 기기는 물론 모든 데스크톱 브라우저에서 완벽하게 작동합니다. IMHO 로컬 공간 스키닝은 거의 모든 경우에 올바른 방법이며이 방법은 ThreeJS의 기본값이어야합니다. @mrdoob : 이것에 대한 당신의 견해는 무엇입니까?

mesh = new THREE.SkinnedMesh(geo.geometry, mat);
mesh.bindMode = 'detached';
var skel = new THREE.Skeleton(bones, boneInvs);
var bsm = new THREE.Matrix4().fromArray(geoPrims.bsm);
mesh.bind(skel, bsm);

// make bsmInv identity for models that have multiple skins
mesh.bindMatrixInverse = new THREE.Matrix4();

// patch SkinnedMesh's updateMtxWorld:
// we're using local skinning, so don't keep resetting binMatrixInverse (leave identity)
// the reason we're using .bind here is for models that have more than one skin
mesh.updateMatrixWorld = PatchSkinnedMeshUpdateMW.bind(mesh);

// re-normalize since input data has been compressed
mesh.normalizeSkinWeights();

// remove bone roots and add to bone root list
for (var bi = 0, bl = bones.length ; bi < bl ; bi++) {
    if (bones[bi].parent && !bones[bi].parent.isBone) {
        bones[bi].parent.remove(bones[bi]);
        boneRoots.push(bones[bi]);
    }
}

루트 씬 오브젝트에 'boneRoots'를 추가해야하는 경우 (따라서 매트릭스 업데이트를 받지만 실제 skinnedmesh로 이어지는 계층 구조의 모든 매트릭스를 상속하지는 않습니다). 이 boneRoots를 장면 루트에 추가합니다 (코드는 표시되지 않음).

그리고 다음은 threeJS의 SkinnedMesh 구현을 대체하는 패치입니다 (threejs의 updatematrixworld가 우리가 ID로 유지하려는 bindMatrixInverse를 방해하기 때문에 이것은 필요합니다). 또는 패치 함수를 사용하는 대신 THREE.Mesh..prototype.UpdateMatrixWorld에 직접 바인딩 할 수 있습니다.

function PatchSkinnedMeshUpdateMW( force ) {
    THREE.Mesh.prototype.updateMatrixWorld.call( this, force );
}

@ denbo-ft 나에게 좋은 소리라고 생각합니다. PR을 작성 하시겠습니까?

@ denbo-ft 귀하의 노력에 감사드립니다. 답장이 늦어서 죄송합니다. 더 이상이 스레드를 팔로우하지 않았습니다.

우리 제품에도이 문제가 있습니다. 모든 브라우저 (0,0,0에서 충분히 멀리 떨어져있는 경우)이지만 약 2-3 단위 떨어져 있으면 iOS에서 더 두드러집니다. 우리에게 비판적이지만 적어도 우리가 이것을 볼 때 우리는 좋은 웃음을 가지고 있습니다.

이걸 필요로하는 사람들이 더 많은 것 같습니다. 나는 github 오픈 소스 프로젝트에 기여한 적이 없지만 git에 익숙하며 PR을 만들려고 노력할 것입니다. :)

여기도 마찬가지입니다. 내 SkinnedMesh는 iPhone의 전문 치료사 Dr. Katz의 에피소드와 같습니다.

참고로, 5 월 21 일의 게시물에 전체 솔루션이 있습니다. ThreeJS 소스에 대한 수정 사항은 많지 않습니다. 대부분의 수정 사항은 개별 프로젝트의 로더 및 / 또는 장면 설정 코드에 있습니다.

기본 수정은 '분리'모드 (문서화되지 않음, btw)를 사용하고 뼈 계층 구조를 실제 렌더링 가능한 캐릭터 계층이 아닌 루트 장면 수준에서 장면에 배치하는 것입니다. 그런 다음 엔진 (SkinnedMesh.update)에서 간단한 한 가지를 패치하면 바로 사용할 수 있습니다.

편집하다:
우리는 TJS를위한 완전한 사용자 정의 파일 형식과 로더를 가지고 있으므로, 불행히도 예제 솔루션으로 완전한 PR을 생성하려면 제공된 캔 로더 (예 : Collada) 중 하나를 수정해야합니다. 나는 지금 이것을 할 것입니다

감사합니다. 좀 더 일반적인 방식으로 솔루션을 이해하고 적용하는 데 시간을 할애하려고했습니다 (귀하의 솔루션은 프로젝트에 약간 특정한 것 같았습니다). 코드에 대한 더 많은 컨텍스트를 공유 할 수 있습니까?

전문 치료사 Dr. Katz

나는 푹 빠진 것도 아니지만 젠장 .

편집하다:

풀 요청을 성공적으로 생성했습니다. 추가로 할 수있는 일이 있으면 알려주세요.

원본 게시물 :

변경된 로컬 지점이 있지만 원본으로 푸시 할 수없는 것 같습니다. 내 github creds를 제공하더라도 다음 오류가 발생합니다.

https://github.com/mrdoob/three.js.git로 푸시
remote : mrdoob / three.js.git에 대한 권한이 denbo-ft에 거부되었습니다.
치명적 : ' https://github.com/mrdoob/three.js.git/ '에 액세스 할 수 없음 : 요청 된 URL에서 오류를 반환했습니다 : 403

이것이 github에 대한 첫 번째 기여이기 때문에 조언을 좋아할 것입니다. 감사!

참고로 PR이 mrdoob에서 작동하고 통합 된 경우이 변경을 지원하는 새로운 바인드 모드 "로컬"이 있습니다. 문서화되지 않은 "분리 된"바인드 모드를 패치하거나 변경하고 싶지 않았습니다. 누가 또는 무엇을 사용하고 있는지 표시되지 않았고 내가 알지 못하는 것을 깨고 싶지 않았기 때문입니다. 하지만이 목적을 위해 의도 된 것 같습니다.

모든 binMode = "local"은 ID를 유지하는 대신 bindMatrix의 역으로 ​​재설정하는 "분리"와 달리 업데이트 중에 bindMatrixInverse를 변경하지 않습니다.

이 PR의 webgl_loader_collada_skinning.html 예제를 참조하여 장면을 돌아 다니는 캐릭터에 대한 적절한 로컬 스키닝을 얻기 위해 장면 수준에서 필요한 몇 가지 변경 사항을 확인하십시오.

Stormtrooper DAE 로더 데모는이 수정 사항을 테스트하는 데 사용되었습니다. 이 테스트를 위해 캐릭터는 원점에서 2000 단위 떨어진 곳으로 이동했습니다. 아래 스크린 샷.

아래 사진은 iPhone X / Safari 11에서 가져온 것입니다.

변경 전 (2000,2000,2000) :

이 변경 후 :

루트 씬 레벨 및 (0,0,0)에 뼈대없이이를 달성 할 수있는 방법이 있다고 생각하십니까? 나는 뼈를 사용하여 아바타에 물건을 붙이고, 포인트를 보도록하는 등의 작업을하고 있습니다. 그리고 제가 유일한 사람은 아닌 것 같습니다.

두 가지 옵션이 있습니다.

1) threejs에서 구현 된 것처럼 로컬 스키닝의 이점을 얻으려면 뼈를 월드 공간에 루트로 유지하십시오. 그런 다음 무기를 뼈에 꼭 부착해야하는 경우 (예 : 아바타 공간으로 가져 오기 위해) 추가 변형을 수행하십시오.

2) Bones를 아바타 공간에 그대로두고 iOS에서 뒤틀림을받습니다.

나는 확실히 # 1을 할 것이다. 이미 Bone 위치와 캐릭터의 위치가있을 때 어떤 프레임에서든 부착 가능한 오브젝트가 있어야하는 위치를 계산하기 위해 항상 수학을 수행 할 수 있습니다. 그러나 왜곡이 iOS 장치의 HAL 수준에서 패킹되어 발생하고 이에 대해 할 수있는 작업이 없기 때문에 # 2에 대한 해결 방법이 없습니다. 물론 위의 다양한 HalfWord 패킹 등을 사용하여 추가 해킹을 추가 할 수 있지만 모두 문제를 해결하는 것이 아니라 문제를 줄이는 것입니다. iOS의 스키닝 문제는 로컬 공간에서 스키닝을 수행하면 완전히 사라질 것입니다 (보다 구체적으로 뼈를 월드 원점을 중심으로 유지하여 숫자를 가능한 한 작게 유지). 그런 다음 첨부 파일을위한 문자 공간으로 xform합니다.

더 많은 정보:

TJS에서 구현되는 방식의 문제는 특별히 TJS가 아니지만 셰이더 프로그램 당 제한된 개수의 유니폼으로 인한 뼈 제한 문제를 해결하기 위해 BoneTextures를 사용하고 있습니다. 이것은 꽤 표준적인 솔루션입니다. 그러나 iOS에서는 텍스처의 부동이 32 비트보다 작은 것으로 양자화 (패킹 / 압축)됩니다. 이것은 숫자의 크기 / 크기가 "크게", 즉 수백이 넘을 때 "사마귀"또는 문자의 다른 이상한 효과를 유발합니다.

좋습니다. 이제 무엇을해야합니까? 음, 게임의 모든 큰 기능 (실제로 게임 엔진)에는 일반적으로 표준 실행이 필요합니다. 예 : 아티스트에게 캐릭터의 원점을 중심에 두도록 지시하십시오. 캐릭터의 루트 노드를 발 /지면에 배치하고 특정 방식으로 뼈와 스킨을 제작합니다. 그런 다음 수출업자 (또는 TJS 케이스의 수입업자)와 프로세스 규칙을 알고있는 수입업자를 작성하십시오. 그런 다음이 구성이있는 자산을로드 할 때 엔진의 최종 기능을 지원합니다. 이것이 우리가 게임 산업에서 일하는 방식입니다.

모든 저작 방법, 모든 파일 형식 및 모든 일반 로더가 게임의 모든 기능을 완벽하게 처리 할 것으로 기대하는 것은 관리 할 수없고 결정적이지 않습니다 (게임 개발에있어 끔찍한 일). 그 과정에서 몇 가지 표준과 프로세스가 있어야합니다.

캐릭터가 스키닝을 사용하고 무기 등에 지오를 첨부해야하는 경우 엔진이 스키닝하는 데 필요한 것이 무엇인지 생각한 다음 작업하십시오. 나는 그러한 솔루션을 예로 제시했습니다. 불행히도, 어떤 이유로 든 로더를 변경하고 싶지 않기 때문에 PR이 수락되지 않았습니다. 어쨌든, 나는 내가 제출 한 PR뿐만 아니라 위의 스레드의 문제와 해결책에 대해 설명했기를 바랍니다.

내가 이미 가지고있는 것보다 더 많이 기여할 수는 없습니다. 내가 어떤 사람들을 도왔 으면 좋겠는데 ...

행운을 빕니다!

iOS의 스키닝 문제는 로컬 공간에서 스키닝을 수행하면 완전히 사라집니다.

처음부터 말했듯이 이는 iOS 제한 (버그)에 대한 해결 방법이며이를 위해 처리 능력을 낭비해야합니다.
그것은 해결책이 아닙니다!
실제 해결책은 iOS에서 부동 소수점 정확도를 높이는 것입니다 (일반 값인 7 자리).
http://davenewson.com/posts/2013/unity-coordinates-and-scales.html

@ denbo-ft 저는 실제로 귀하의 PR을 구현했습니다 (우리는 자체 로더가 있습니다). 귀하의 기여에 감사드립니다. 감사합니다. 씬에 여러 아바타가 있고, 이리저리 움직이고, 아이템을 잡고, 서로 상호 작용하는 등 다른 접근 방식을 바랐습니다. 코드, 새로운 문제가 발생할 위험이 있습니다.

나는 문제에 대해 생각하는 데 시간을 보냈지 만 더 나은 해결책을 찾지 못했습니다. (아직 노력 중)

뿡뿡

실제 해결책은 iOS에서 부동 소수점 정확도를 높이는 것입니다.

누군가는 먼저 @grorg 와 co에게 물어 그런가요 ? 그냥 버그가 아니라 다른 문제에 대한 사과의 "해결책"이라는 느낌이 들어서

그냥 버그가 아니라 다른 문제에 대한 사과의 "해결책"이라는 느낌이 듭니다.

아마도 사실 일 것입니다.
Firefox Android의 문제와 유사합니다. 버그가보고되고 개발자가 확인했지만 지난 5 개월 동안 수정되지 않았습니다 (2 개 릴리스)!?!

오늘날 소프트웨어 개발이 작동하는 방식은 다음과 같습니다.
올바른 위치에 수정하는 대신 타사에 해결 방법이 있습니다.
최종 결과 : 버그 모음, 낭비 된 리소스 및 블로 트웨어 !!!

뿡뿡
뼈 계층 구조를 루트에 유지하고 아바타의 실제 위치 매트릭스의 martixWorld를 곱하여 뼈의 최종 WS 위치를 잡는 함수를 추가하는 것이 좋습니다. 매우 간단하며 수정하기 전에 가지고 있던 것을 돌려 줄 것입니다.

또는 버그가있는 경우 원래 방법으로 돌아가서 (버그가있는) 뼈 텍스처에 로컬 행렬을 포함하고 텍스처 사용량을 두 배로 늘린 다음 셰이더 조각을 수정하여 스키닝 중에 GPU에서 추가 계산을 수행 할 수 있습니다. . 이 솔루션은 코드 관점에서 "더 깔끔"하지만 매 프레임마다 GPU에 업로드되는 텍스처의 양을 두 배 (4 배가 될 수 있음)하므로 위의 제안보다 훨씬 덜 효율적입니다. 그러나 내가 알지 못하는 이유가 무엇이든 후자의 방식으로 수행하는 것이 더 유익 할 수 있습니다.

이전에는 솔루션이 없었던 것에서 이제 모든 장치와 호환되는 몇 가지 옵션이 있으며, 이는 대부분의 프로젝트에서 명백한 요구 사항입니다.

0,0,0에서 뼈를 사용하고 다른 항목에 대해 몇 가지 추가 행렬 계산을 수행해야 할 것 같습니다. 감사!

@ denbo-ft가 정확합니다. 이것은 세계 공간에서 스키닝으로 인해 발생하는 three.js 문제입니다.

참고로, 여기에서 world-space-skinning이 변경되었습니다 : https://github.com/mrdoob/three.js/pull/4812.