Troika: 기능: 텍스트 지오메트리에 문자/단어/라인 인덱스 속성 추가

또한 아마도 wordIndex , lineIndex ...?

단어와 줄은 https://greensock.com/splittext/ 와 매우 유사하게 줄 및 단어당 애니메이션이 활성화됩니다(이 변경이 활성화할 수 있는 좋은 예를 고려할 수 있음).

이것이 프래그먼트 셰이더에서 토큰별(문자, 단어, 줄) 변경도 허용한다고 가정하는 것이 맞습니까?

이것이 프래그먼트 셰이더에서 토큰별(문자, 단어, 줄) 변경도 허용한다고 가정하는 것이 맞습니까?

가변으로 정점에서 조각으로 전달해야 하지만 그렇습니다. :)

우리는 토끼굴 아래로...

다음 모든 인덱스에 대한 용도와 각 인덱스의 총 개수를 생각할 수 있습니다.

• charIndex, totalChars
• wordIndex, totalWords
• lineIndex, totalLines
• charInWordIndex, totalCharsInWord
• charInLineIndex, totalCharsInLine
• wordInLineIndex, totalWordsInLine

우리는 이러한 모든 옵트인을 만들고 우리가 도입하는 새로운 glsl 속성의 수를 최소화하기 위해 스마트 패킹을 수행하고 싶습니다. 이 API에 대해 더 생각해야 합니다.

사용자가 플래그를 사용하여 모두 선택하도록 할 수 있으므로

{
split: { 단어: true, 문자: true, 줄: true }
}

똑똑한 포장을 해

이것에 대해 확장하시겠습니까? 궁금해요 👐

사용자가 분할을 선택할 수 있다는 아이디어가 마음에 듭니다.

패킹한다는 것은 12개의 새로운 attribute float foo 선언을 추가하고 싶지 않다는 뜻입니다. 그렇지 않으면 제한에 도달하게 됩니다(webgl에서는 총 16개의 속성이라고 생각합니다). 하지만 최대 3개의 새로운 선언으로 패킹할 수 있습니다. attribute vec4 foo 선언을 하고 셰이더 내에서 더 멋지게 보이는 float 변수로 압축을 풉니다.

오 예, 많은 의미가 있습니다. 감사합니다!

charIndex 증분에 공백을 포함해야 합니까? 아니면 보이는 글리프만 증가시키나요? 나는 보이는 글리프에만 기대고 있습니다.

공백을 세면 인덱스로 애니메이션할 때 이상한 비틀거림을 만들 수 있으므로 보이는 쪽으로 기울었습니다.

정리해야 할 것이 많지만 위의 개수에 대한 초기 POC가 있습니다. 다음은 프래그먼트 셰이더에서 색상을 변경하기 위해 다양한 인덱스/총 쌍을 사용하는 예입니다.

charIndex / totalChars:

charInWordIndex / totalCharsInWord:

charInLineIndex / totalCharsInLine:

wordIndex / totalWords: (이 예에서 charIndex/totalChars와 매우 유사해 보이지만 미묘한 차이가 있습니다)

wordInLineIndex / totalWordsInLine:

lineIndex / totalLines:

나는 모든 데이터를 최대 3개의 유니폼 + 2개의 속성으로 가져올 수 있었는데, 이는 꽤 좋습니다. 나는 여전히 그것들을 선택적으로 만들고 싶다.

놀라운! 테스트 버전이 준비되면 알려주세요 😄

이 문제를 해결할 수 있는 기능을 찾고 있었습니다. 구 주위에 붙일 3 글자 레이블이 있습니다. 뷰 매트릭스나 모델링 매트릭스에 적용된 스케일링에 상관없이 항상 뷰어를 향하도록 조정하고 화면에서 항상 동일한 크기가 되도록 조정합니다.
지금은 레이블당 하나의 Text 개체를 만들고 변환을 적용합니다.
모든 레이블을 단일 텍스트로 포장하고 정점 셰이더에서 올바른 변환을 수행하기 위해 각 레이블의 구에 위치를 갖는 속성을 가짐으로써 훨씬 더 나은 성능을 얻을 수 있다고 생각했습니다.
@lojjic 사용자 지정 셰이더를 만드는 방법을 문서화할 수 있습니까? BufferGeometry 의 기존 메소드 setAttribute 처럼 속성을 추가하는 것은 어렵지 않을 것이라고 생각합니다.

내가 고려하고 있던 다른 옵션은 모든 레이블에 3개의 글자가 있기 때문에 인스턴스 렌더링입니다. 그러나 그것은 확실히 WebGL 2를 필요로 할 것이고 적어도 처음에는 가치가 있기에는 너무 복잡할 수 있습니다.

@FunMiles 나는 당신이 옳다고 생각합니다. 이것은 그런 종류의 일을 용이하게 할 수 있습니다. 내가 올바르게 이해하고 있다면 최적화에는 두 부분이 포함될 수 있습니다.

1. CPU 측 JS에서 GPU 측 정점 셰이더 논리로 회전/크기 조정 논리 이동
2. 여러 텍스트 조각을 단일 그리기 호출로 결합하는 _plus_

1의 경우 이 의견 을 살펴보십시오. 실제로 이미 귀하의 요구에 충분할 수 있습니다. 이는 기본적으로 material 로 지정하는 커스텀 셰이더를 적용하는 방법에 대한 좋은 데모이기도 합니다. 거기에 Troika의 createDerivedMaterial 유틸리티를 사용했지만 ShaderMaterial 또는 자체 onBeforeCompile 수정이 있는 재료를 유사하게 전달할 수 있습니다.

2의 경우 단일 텍스트를 렌더링한 다음 _some_ 속성을 사용하여 구체 주위의 개별 문자를 대체할 수 있다고 생각합니다. 이번 호에서 설명하는 새로운 문자/단어 인덱스 속성이 도움이 될 수 있지만 꼭 필요한지 확신이 서지 않습니다. 이러한 변위를 새로운 InstancedBufferAttribute로 인코딩할 수 있습니다. 여기에서 각 벡터는 한 문자에 대한 변위를 보유합니다(텍스트의 기하학은 각 글리프에 대해 인스턴스화되는 간단한 쿼드이므로 각 글리프에 대해 추가 InstancedBufferAttributes가 단계적으로 진행됩니다).

나는 당신이 이것을하는 데 운이 있는지 알고 싶습니다!

@lojjic 올바르게 이해했습니다. 그리고 링크한 코드는 (1)에 필요한 것의 90%를 수행합니다. 귀하의 데모는 제 사용 사례와 묘하게 일치합니다.
내 이해를 수정하도록 요청할 수 있는 경우 다음은 당신이 하는 일을 보는 방법입니다.

• mvPosition 는 모델 뷰 공간의 기준점 위치로 초기화됩니다. 나는 그 기준점이 기준점이라고 가정한다. 맞나요?
• position 는 해당 참조점으로부터의 오프셋이며 x 및 y가 0이 아닌 좌표만 있다고 가정합니다. (그래서 스케일의 z 구성 요소 계산을 건너뛸 수 있다고 생각합니까?) (추신: 인스턴스화된 렌더링 정점 셰이더 코드를 보면 텍스트를 회전할 수 있는 것 같습니다. 이 경우 z 구성 요소는 0이 아닙니다)
• 각 방향의 스케일은 3x3 블록이 스케일링과 회전의 구성만 포함한다는 가정 하에 복구됩니다.
• 축척된 position 가 추가되고 z-성분이 0이면 이 기여는 투영 평면과 평행한 평면에서 위치를 유지합니다.

(1)을 수행하기 위해 이 코드에 대한 변경 사항은 대부분 크기 조정과 약간의 좌표 이동에 있으므로 텍스트가 내가 가진 구 외부에 머물도록 합니다.

2번도 이해하셨네요. 그러나 코드를 읽을 때 약간 혼란 스럽습니다. 텍스트 렌더링이 이미 인스턴스 렌더링이라는 것을 깨닫지 못했습니다. 나를 혼란스럽게 하는 것은 InstancedBufferAttribute 에서 파생된 $# GlyphsGeometry #$ 가 있지만 Text 가 InstancedMesh 이 아니라 Mesh 의 하위 클래스라는 것입니다. Three.js를 더 깊이 파고들어야 할 것 같습니다.
그렇지 않으면 각 문자가 인스턴스화되는 경우 각 글리프 인스턴스에 대해 position 를 오프셋하는 벡터가 있는 속성만 있으면 됩니다. 맞나요?

나는 이것에서 잠시 떨어져야했지만 다음은 빠른 상태 업데이트입니다.

PR #109는 다양한 카운트를 수집하고 노출하는 측면에서 꽤 견고하게 느껴집니다. 나는 그들이 옵트인하게 하고 싶지만 그렇지 않으면 그것이 어디에 있는지에 만족합니다.

그러나 셰이더 기반 애니메이션에는 이러한 새로운 카운트뿐만 아니라 다음과 같은 다른 데이터에 대한 액세스도 필요하다는 강한 직감이 있습니다.

• 현재 글리프의 쿼드 경계
• 전체 블록 경계
• 쿼드에서 추론할 수 없는 베이스라인/어센더/디센더와 같은 글꼴 메트릭 정보
• 다른?

이들 중 일부는 이미 기술적으로 셰이더에 존재하지만 사용자가 이에 의존하려면 친숙한 이름으로 노출하고 신뢰할 수 있는 계약으로 문서화해야 합니다.

누구든지 그 PR 브랜치를 가지고 놀고 일부 셰이더 애니메이션을 구현해 보고 어떤 정보가 누락되었는지 알려주면 큰 도움이 될 것입니다.

@lojjic 이 기능에 대한 관심을 표현하고 싶을 뿐입니다 😺

https://github.com/canadaduane/troika/tree/char-indices 에서 최신 마스터와의 병합 충돌을 해결했습니다.

아직 테스트할 기회가 없었지만 며칠 내로 테스트할 예정입니다.

나는 오랫동안 이 토론에서 떨어져 있었다. 그러나 나는 그것을 다시보고 싶다는 것을 상기 시켰습니다.
이 게시물의 끝에 createDerivedMaterial 를 사용하여 수행한 작업의 예가 있습니다.
그러나 지금은 레이블당 하나의 메쉬가 있고 레이블 수가 매우 많아지면 저가형 전화기에서 렌더링이 크게 흔들립니다. 각 레이블에 대한 CPU 호출 때문이라고 가정합니다. 이 문제를 해결하기 위해 여러 메시를 모든 레이블이 있는 단일 메시로 바꾸고 나머지는 개선된 정점 셰이더를 사용하고 싶습니다.

@lojjic 이 언급했듯이 단어에 약간의 경계가 필요하다고 생각합니다. 또는 적어도 내가 사용하기 위해 각 단어의 중심.
다른 방법으로 수행하는 방법이나 해당 센터를 얻는 방법에 대한 다른 제안이 있습니까?

https://flightlog-beta.vercel.app/circles?route=BRU-HER-ATH-IST-AMM-CAI-TUN-CMN-RAK-MAD-LIS-ZRH-GVA-NCE-CDG-DUS-FRA- MUC-LHR-LCY-LGW-DUB-HBA-SYD-MEL-CNS-KTM-DEL-BLR-COK-MAA-CMB-MLE-HKG-HND-NRT-KIX-ICN-GMP-MNL-DPS-JOG- CGK-SIN-KUL-PEN-LGK-BKK-SGN-HAN-LPQ-CNX-DOH-AUH-DXB-JNB-CPT-LVI-ZNZ-JRO-DAR-SSH-BUD-OTP-IPC-SCL-PMC- GRU-EZE-GIG-BSB-LIM-LPB-BOG-PTY-SJO-SJU-CUN-ACA-MEX-MTY-JFK-BOS-PHL-DCA-IAD-BWI-CLT-ATL-MSP-MIA-DFW- DTW-ORD-IAH-COS-DEN-PHX-SAN-LAX-SJC-SFO-SEA-PDX-YVR-YYZ-YUL-LGA-EWR-ASP-BNE-AKL-CHC-ZQN-VIE-SJJ-VCE- MXP-FCO-BCN-PEK-PVG-HNL-OGG-KOA-HIJ-RGN-PBH-TIP-AMS-CPH-SLC-CVG-GSP-TPE-ULN-PNH-VTE-ABQ-BUF-MCO-HKT- MDL-