Google I/O를 시청해 주셔서 감사합니다. 주문형 콘텐츠를 확인하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebVR에서 텍스트 렌더링

(https://with.in/)에는 스토리텔링을 위한 플랫폼이 있습니다. 가상 현실입니다. 그래서 팀이 WebVR에 대해 들었을 때 2015년 우리는 AI의 잠재력에 즉시 관심을 보였습니다. 오늘날에는 Google 웹 플랫폼의 고유한 하위 도메인에 나타나기 때문에 https://vr.with.in/. VR 지원 브라우저를 사용하는 누구나 할 수 있는 작업 사이트에 가서 버튼을 클릭하고 헤드셋을 착용하여 포트폴리오를 운영하고 있습니다.

현재 여기에는 Daydream View에서 실행되는 Chrome이 포함되며 이에 국한되지 않습니다. 대상 기기 및 머리 장착형 디스플레이에 관한 정보를 자세히 알아보려면 https://webvr.info/.

다른 가상 현실 전용 렌더링 환경과 마찬가지로 웹은 주로 장면의 3D 표현에 의존합니다. 이 장면에는 카메라, 시점 및 사물이 포함됩니다. 데이터 관리 이 장면, 카메라, 객체는 Three.js는 <canvas> 요소를 활용하여 매우 저렴합니다. 여러 유용한 Three.js 부가기능이 WebVR에서 장면을 볼 수 있도록 만듭니다. 주요 두 가지는 THREE.VREffect 각 눈에 대한 표시 영역을 생성하고 THREE.VRControls 을 사용하여 원근을 변환합니다 (예: 원근법의 회전 및 위치 납득할 만한 디자인입니다. 데이터 레이크의 구현 방법을 알아보겠습니다. 자세한 내용은 Three.js WebVR 예시 를 참조하세요.

WebVR에 대해 더 자세히 살펴보면서 문제에 부딪혔습니다. 예를 들어 텍스트는 콘텐츠의 중요한 부분입니다. 대다수의 YouTube 콘텐츠 중 일부는 사이트 내 텍스트가 콘텐츠를 둘러싸고 있음 영화 또는 관련 영화에 대한 사용자 인터페이스와 추가 정보가 모두 있는 경우 구성됩니다. 또한 이 모든 텍스트는 DOM에서 생성됩니다. Google의 WebVR 탐색 및 https://vr.with.in/은 모두 <canvas>입니다.

WebVR에 사용되는 텍스트 — </ph> vr.with.in용으로 WebVR에서 사용되는 텍스트

어떤 옵션이 있나요?

다행히 이 기능을 제공하기 위해 노력하고 있습니다. 실제로 연구에 따르면 텍스트를 3D 이미지로 렌더링하는 여러 효과적인 방법을 <canvas> 요소의 환경입니다. 다음은 Google Cloud에서 발견한 다음과 같은 장단점이 있습니다.

	해상도 무관	활자 특징	성능	구현의 용이성
2D 캔버스 텍스트		예	예	예
삼각형 벡터 텍스트	예		예
돌출된 3D 텍스트	예
서명된 거리 필드 비트맵 텍스트	예	예	예

Google의 결정: SDF 비트맵 글꼴

ctx.fillText() 기능이 있는 2D 캔버스에서는 텍스트 줄바꿈, 문자 간격, 줄바꿈 기능을 사용할 수 있습니다. 실제로 확대하면 오버플로가 잘리고 텍스트가 흐려집니다. 멀리 있습니다. 캔버스 질감의 크기를 늘릴 수 있지만 텍스처 크기 제한이 있거나 텍스처가 너무 크면 성능이 저하될 수 있습니다.

돌출된 3D 텍스트는 기본적으로 삼각형 벡터 텍스트와 동일하지만 적어도 두 배 이상의 도형을 포함하게 됩니다. 다음 중 하나 제목이나 로고에 소량으로 사용할 수는 있지만 활자 특징이 없으며 다량의 텍스트에 적합합니다.

SDF 비트맵 워크플로에 글꼴 적용 — SDF 비트맵에 글꼴 추가 워크플로

비트맵 글꼴은 문자당 하나의 쿼드 (두 개의 삼각형)를 사용하므로 더 적게 사용합니다. 더 나은 성능을 삼각 측량 벡터와 같습니다. 텍스처 맵 스프라이트를 사용하기 때문에 여전히 래스터를 기반으로 하지만 SDF가 있습니다. 셰이더는 기본적으로 해상도에 독립적이므로 2D보다 잘 보입니다. 캔버스 질감입니다. 맷 데스로리어스의 3-bmfont-text에는 텍스트 줄바꿈을 위한 신뢰할 수 있는 활자 기능도 포함되어 있습니다. 문자 간격, 줄 간격, 정렬을 설정할 수 있습니다. 오버플로가 잘리지 않습니다. 글꼴 규모는 조정을 통해 제어됩니다 우리가 이 방법을 선택한 이유는 성능을 유지하는 동시에 최고의 디자인 옵션을 제공합니다. 안타깝게도, 쉽게 구현할 수 있으므로 동료 여러분이 Google Cloud를 지원하는 데 도움이 되고자 웹 VR에서 작업하는 개발자들입니다.

1. 비트맵 글꼴 (.png + .fnt) 생성

Hiero는 비트맵 글꼴 패킹입니다. Google Kubernetes Engine에서 실행되는 것입니다 Hiero 문서에서는 복잡한 빌드 프로세스를 거치지 않고 실행할 수 있습니다 먼저 다음과 같은 경우에 Java를 설치합니다. 해야 합니다. 그런 다음 runnable-hiero.jar를 두 번 클릭해도 연결되지 않으면 Hiero를 열고 콘솔에서 다음 명령어를 사용하여 실행해 보세요.

java -jar runnable-hiero.jar

Hiero가 실행되면 .ttf 또는 .otf 데스크톱 글꼴을 열고 추가 항목을 입력합니다. 원하는 문자를 포함시키고 렌더링을 Java로 변경하여 효과를 사용 설정하거나 글자가 전체 글리프 캐시 정사각형을 채우도록 크기를 키우고 거리 필드 효과를 추가하고 거리 필드의 배율과 범위를 조정합니다. 이 배율 값은 해상도와 같습니다. 높게할수록 덜 흐릿하고 Hiero가 미리보기를 렌더링하는 데 시간이 오래 걸립니다. 그런 다음 비트맵 글꼴. .png 이미지와 AngelCode .fnt 글꼴 설명 파일.

2. AngelCode를 JSON으로 변환

이제 비트맵 글꼴이 생성되었으므로 Matt DesLauriers의 자바스크립트 앱 load-bmfont npm 패키지

load-bmfont를 브라우저화하여 프런트 엔드에서 사용할 수 있지만 대신 실행 중 load-bmfont.js를 Node.js는 Hiero의 AngelCode .fnt를 .json 파일:

npm install
node load-bmfont.js

드림 <ph type="x-smartling-placeholder">

이제 load-bmfont를 우회하고 .json 글꼴 파일입니다.

var r = new XMLHttpRequest();
r.open('GET', 'fonts/roboto/bitmap/roboto-bold.json');

r.onreadystatechange = function() {
    if (r.readyState === 4 && r.status === 200) {
    setup(JSON.parse(r.responseText));
    }
};

r.send();

function setup(font) {
    // pass font into TextBitmap object
}

3. Browserify 3-bmfont-text

글꼴을 로드하고 나면 Matt의 세 개의 bmfont-text가 있습니다. 이 앱에는 Node를 사용하지 않으므로 브라우저화 three-bmfont-text.js 사용 가능한 three-bmfont-text-bundle.js로

npm install -g browserify
browserify three-bmfont-text.js -o three-bmfont-text-bundle.js

4. SDF 셰이더

afwidth 및 threshold 슬라이더를 조정합니다. vr.with.in/archive/text-sdf-bitmap/ 부호 있는 거리 필드 셰이더의 영향을 확인합니다.

5. 사용

편의를 위해 TextBitmap 래퍼 클래스 3-bmfont-text라는 텍스트입니다.

<script src="three-bmfont-text-bundle.js"></script>
<script src="sdf-shader.js"></script>
<script src="text-bitmap.js"></script>

.json 글꼴 파일에 대한 XHR 요청을 만들고 콜백을 사용합니다.

var bmtext = new TextBitmap({ options });

텍스트를 변경하려면 다음 단계를 따르세요.

bmtext.text = 'The quick brown fox jumps over the lazy dog.';

scene.add( bmtext.group );
hitBoxes.push( bmtext.hitBox );

text-bitmap .js에서 비트맵 글꼴의.png가 THREE.TextureLoader로 로드됨

TextBitmap에는3.js 레이캐스트 상호작용을 위한 보이지 않는 히트박스도 포함되어 있습니다. 마우스, 카메라, 손으로 추적한 모션 컨트롤러(예: Oculus Touch 또는 Vive 컨트롤러를 사용합니다 텍스트를 변경하면 히트박스의 크기가 자동으로 업데이트됩니다. 있습니다.

Bmtext.group이 two.js 장면에 추가됩니다. 하위 요소에 액세스해야 하는 경우 / Object3D에서 텍스트의 장면 그래프는 다음과 같습니다.

6. JSON 축소 및 xoffset 수정

커닝이 잘 보이지 않으면 json에서 xoffset을 수정해야 할 수도 있습니다. 붙여넣기 JSON을 Jsbeautifier.org로 전달하여 축소되지 않은 버전입니다.

xoffset은 기본적으로 한 문자에 대한 전역 커닝입니다. 커닝은 두 가지를 위한 것입니다. 특정 문자가 나란히 표시됩니다 커닝 배열은 실제로 차이가 없으며 이 배열을 비우면 json 파일 크기를 줄일 수 있습니다. 그런 다음 커닝을 위한 xoffset을 수정합니다.

먼저 어떤 문자가 어떤 문자 ID와 함께 쓰여지는지 JSON으로 저장합니다 three-bmfont-text-bundle.js에서, 240행 뒤에 console.log를 삽입합니다.

    var id = text.charCodeAt(i)
    // console.log(id);

그런 다음 dat.gui 텍스트 입력란에 https://vr.with.in/archive/text-sdf-bitmap/ 콘솔에서 해당 캐릭터의 ID를 찾습니다.

예를 들어, 비트맵 글꼴에서 'j'는 항상 오른쪽으로 너무 멀리 떨어져 있습니다. 자체 char ID는 106입니다. JSON에서 "id": 106를 찾아 xoffset을 -1에서 변경합니다. -10으로 변경합니다.

7. 레이아웃

텍스트 블록이 여러 개 있고 텍스트가 위에서 아래로 흐르도록 하려면 절대 위치 지정과 유사하게 모든 항목을 수동으로 배치해야 합니다. CSS를 사용하여 모든 DOM 요소를 직접 처리할 수 있습니다. CSS에서도 이 작업을 할 수 있을까요?

    * { position: absolute; }

이것이 3D의 텍스트 레이아웃입니다. 제목, 저자, 설명, 기간은 각각 자체가 있는 새 TextBitmap 객체입니다. 스타일, 색상, 배율 등:

author.group.position.y = title.group.position.y - title.height - padding;
description.group.position.y = author.group.position.y - author.height - padding;
duration.group.position.y = description.group.position.y - description.height - padding;

여기서는 각 TextBitmap 그룹의 로컬 원점이 세로 방향이라고 가정합니다. TextBitmap 메시의 상단에 맞춰 정렬됩니다 (중앙에 배치 참조 text-bitmap.js 업데이트). 나중에 이러한 객체의 텍스트를 변경하고 높이를 변경하면 변경하면 해당 위치도 다시 계산해야 합니다. 여기에서 텍스트의 y 위치만 수정되지만 3D는 z 방향으로 텍스트를 밀고 당기는 것은 물론 x, y, z축을 중심으로 움직입니다.

결론

WebVR의 텍스트와 레이아웃은 훨씬 쉽고 간단해지기 전에 가야 할 길입니다. HTML 및 CSS로 널리 사용됩니다. 하지만 실제로 작동하는 솔루션이 존재하며 훨씬 더 많은 작업을 할 수 있습니다 훨씬 더 강력합니다. WebVR은 오늘날에도 존재합니다. 내일은 더 나은 도구가 나올 것입니다. 그때까지는 사용해 보고 있습니다. 보편적인 프레임워크 없이 개발하면 정말 흥미롭습니다.