ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

หน้านี้ได้รับการแปลโดย Cloud Translation API

การแสดงผลข้อความใน WebVR

Internal (https://with.in/) เป็นแพลตฟอร์มสําหรับการเล่าเรื่องใน Virtual Reality ดังนั้นเมื่อทีมได้ทราบเกี่ยวกับ WebVR ใน ปี 2015 นี้เราสนใจในศักยภาพของ AI อย่างมาก ปัจจุบัน ความสนใจดังกล่าว ออกมาเป็นโดเมนย่อยเฉพาะของแพลตฟอร์มเว็บของเรา https://vr.with.in/. ผู้ใช้ทุกคนที่มีเบราว์เซอร์ที่เปิดใช้ VR สามารถ ไปที่เว็บไซต์ คลิกที่ปุ่ม แล้ววางชุดหูฟังเพื่อดื่มด่ำกับ ของภาพยนตร์ VR

ในปัจจุบัน ซึ่งรวมถึงแต่ไม่จำกัดเพียง Chrome ใน Daydream View สำหรับ ข้อมูลบนอุปกรณ์และจอแสดงผลแบบติดศีรษะของคุณ ให้ดูที่ https://webvr.info/.

เช่นเดียวกับสภาพแวดล้อมการแสดงผลที่เจาะจง Virtual Reality อื่นๆ มักจะอาศัยการนำเสนอฉากแบบ 3 มิติ ช่วงเวลานี้ จะมีกล้อง มุมมอง และวัตถุกี่รายการก็ได้ เพื่อช่วยจัดการ ฉาก กล้อง และวัตถุนี้เราใช้ไลบรารีที่เรียกว่า Three.js ซึ่งใช้ประโยชน์จากองค์ประกอบ <canvas> เพื่อส่ง การแสดงผลลงใน GPU ของคอมพิวเตอร์ มีส่วนเสริม Three.js ที่เป็นประโยชน์สำหรับ ทำให้ฉากของคุณมองเห็นได้ใน WebVR สองประเภทหลักคือ THREE.VREffect สำหรับการสร้างวิวพอร์ตสำหรับดวงตาแต่ละข้างและ THREE.VRControls เพื่อแปลมุมมอง (เช่น การหมุนและตำแหน่งของ ที่ติดศีรษะ) เข้ากับฉากของคุณได้อย่างน่าเชื่อถือ มีตัวอย่างของ วิธีการในเรื่องนี้ โปรดดู ตัวอย่าง WebVR ใน Three.js เพื่อดูวิธีเริ่มต้น

ขณะสำรวจ WebVR เพิ่มเติม เราพบปัญหา หากเราดูที่ ที่เนื้อหาของเว็บ ข้อความจึงเป็นส่วนประกอบที่สำคัญ ขณะที่ประชากรส่วนใหญ่ ของเนื้อหาของเราเป็นแบบวิดีโอ หากคุณไปที่ ข้อความภายในเว็บไซต์ล้อมรอบเนื้อหา และข้อมูลเพิ่มเติมเกี่ยวกับภาพยนตร์ หรือภาพยนตร์ที่เกี่ยวข้อง โดยใช้ข้อความ นอกจากนี้ ข้อความนี้ทั้งหมดยังสร้างขึ้นใน DOM การสำรวจ WebVR และ https://vr.with.in/ มาแล้ว <canvas>

ตัวเลือกของฉันมีอะไรบ้าง

โชคดีที่เรากำลังดำเนินการอยู่เพื่อให้การดำเนินการนี้เกิดขึ้นได้ อันที่จริงงานวิจัยของเรา เราพบวิธีที่มีประสิทธิภาพหลายวิธีในการแสดงข้อความใน 3 มิติ ในเอลิเมนต์ <canvas> ด้านล่างนี้คือเมทริกซ์ของ 2-3 รายการที่เราพบ ระบุข้อดีและข้อเสียของแต่ละประเภท ดังนี้

	อิสระจากการแก้ปัญหา	ฟีเจอร์ตัวอักษร	ประสิทธิภาพ	ติดตั้งใช้งานได้ง่าย
ข้อความ Canvas แบบ 2 มิติ		ใช่	ได้	ใช่
ข้อความเวกเตอร์ที่มีสามเหลี่ยม	ใช่		ใช่
ข้อความ 3 มิติที่แยกออกมา	ใช่
ข้อความบิตแมปของช่องระยะทางที่ลงชื่อ	ใช่	ได้	ใช่

การตัดสินใจของเรา: แบบอักษรบิตแมปของ SDF

แคนวาส 2 มิติที่มี ctx.fillText() สามารถทำการตัดข้อความ ระยะห่างของตัวอักษร และบรรทัดได้ ความสูง แต่ส่วนเกินจะถูกตัดออก และข้อความจะเบลอถ้าคุณซูมเข้าจริงๆ ไกล คุณเพิ่มขนาดของพื้นผิวแคนวาสได้แต่อาจสูงขึ้น ขนาดหรือประสิทธิภาพของพื้นผิวอาจลดลงได้ถ้าเนื้อนั้นใหญ่เกินไป

โดยพื้นฐานแล้ว ข้อความ 3 มิติที่แยกออกมานั้นเหมือนกับข้อความเวกเตอร์ที่มีสามเหลี่ยม แต่ และอาจเป็นมุมเอียง เพื่อให้มีรูปเรขาคณิตมากขึ้นอย่างน้อย 2 เท่า กลุ่มใดกลุ่มหนึ่ง สิ่งเหล่านี้อาจใช้ได้กับชื่อหรือโลโก้จำนวนไม่มาก แต่ทำงานได้ไม่เหมือน เหมาะกับข้อความจำนวนมากและไม่มีลักษณะตัวพิมพ์

เวิร์กโฟลว์บิตแมปของ SDF — เวิร์กโฟลว์บิตแมปของ Font to SDF

แบบอักษรบิตแมปใช้ 1 quad (2 สามเหลี่ยม) ต่ออักขระ จึงใช้น้อยลง และทำงานได้ดีกว่า เวกเตอร์ที่มีสามเหลี่ยม โมเดลยังคงเป็นแบบแรสเตอร์เนื่องจากใช้ภาพแบบ Sprite แมปพื้นผิว แต่ใช้ SDF เฉดสีจะไร้ความละเอียดสูงกว่า 2 มิติ พื้นผิวของ Canvas Matt DesLauriers 3-bmfont-text ยังมีฟีเจอร์ทางการพิมพ์ที่เชื่อถือได้สำหรับการตัดข้อความ ระยะห่างของตัวอักษร ความสูงของบรรทัด และการจัดแนว ส่วนรายการเพิ่มเติมจะไม่ถูกตัดออก แบบตัวอักษร จะมีการควบคุมผ่านการปรับขนาด เราเลือกเส้นทางนี้เพราะให้เวลา ตัวเลือกที่ดีที่สุดสำหรับการออกแบบในขณะที่ยังคงประสิทธิภาพการทำงานไว้ได้ น่าเสียดายที่มันยังไม่ นำไปใช้ได้ง่าย เราจะได้อธิบายขั้นตอนต่างๆ เพื่อช่วย นักพัฒนาซอฟต์แวร์ที่ทำงานใน WebVR

1. สร้างแบบอักษรบิตแมป (.png + .fnt)

เอาต์พุต Hiero (ไฟล์ Bitmap PNG และ .fnt)

Hiero คือการแพคข้อมูลแบบอักษรแบบบิตแมป ที่ทำงานกับ Java เอกสาร Hiero ไม่ได้อธิบายวิธีการ โดยไม่ต้องผ่านกระบวนการสร้างที่ซับซ้อนเลย ขั้นแรก ให้ติดตั้ง Java หาก ให้ดำเนินการดังนี้ จากนั้น หากดับเบิลคลิกรันnable-hiero.jar ไม่ได้ เปิด Hiero แล้วลองเรียกใช้ด้วยคำสั่งนี้ในคอนโซล

java -jar runnable-hiero.jar

เมื่อ Hiero ทำงานแล้ว ให้เปิดแบบอักษร .ttf หรือ .otf บนเดสก์ท็อป แล้วป้อนแบบอักษรเพิ่มเติม ที่ต้องการรวมไว้ เปลี่ยนการแสดงผลเป็น Java เพื่อเปิดใช้เอฟเฟกต์ เพิ่มขนาดเพื่อให้อักขระของคุณเต็มพื้นที่แคชรูปสี่เหลี่ยมทั้งหมด เพิ่มเอฟเฟ็กต์ฟิลด์ระยะทาง ปรับขนาดและขยายขนาดของฟิลด์ระยะทาง ค่าสัดส่วนก็เหมือนกับความละเอียด ยิ่งอยู่สูงเท่าใด ก็ยิ่งเบลอน้อยลงเท่านั้น แต่ยิ่ง Hiero ใช้เวลานานในการแสดงภาพตัวอย่าง จากนั้นบันทึก แบบอักษรบิตแมป ระบบจะสร้างแบบอักษรบิตแมปที่ประกอบด้วยรูปภาพ .png และแท็ก ไฟล์คำอธิบายแบบอักษร .fnt ของ AngelCode

2. แปลง AngelCode เป็น JSON

หลังจากที่มีการสร้างแบบอักษรบิตแมปขึ้น เราต้องโหลดแบบอักษรดังกล่าวลงใน แอป JavaScript ของ Matt DesLauriers load-bmfont npmpackage

เราสามารถเบราว์เซอร์ bmfont สำหรับการโหลดและใช้ที่ฟรอนท์เอนด์ จะวิ่ง load-bmfont.js ด้วย โหนดที่จะแปลงและบันทึก AngelCode ของ Hiero เป็น .fnt ไฟล์.json:

npm install
node load-bmfont.js

ตัวอย่าง JSON ของเอาต์พุต — ตัวอย่างของเอาต์พุต JSON

ตอนนี้เราสามารถข้ามการโหลด bmfont และเพียงส่งคำขอ XHR (XMLHttpRequest) ใน ไฟล์แบบอักษร .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. ข้อความ 3 ตัวอักษรของ Browserify

เมื่อเราโหลดแบบอักษรแล้ว ข้อความ 3-bmfont-text ของ Matt จะดูแล พักผ่อน เนื่องจากเราไม่ได้ใช้โหนดสำหรับแอปของเราเอง เราจึงจะ เปิดเบราว์เซอร์ 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. การใช้งาน

เพื่อความสะดวก เราได้สร้าง คลาส Wrapper ของ TextBitmap สำหรับข้อความ bmfont-3 แบบบนเบราว์เซอร์

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

สร้างคำขอ XHR สำหรับไฟล์แบบอักษร .json และสร้างออบเจ็กต์ข้อความใน ติดต่อกลับ:

var bmtext = new TextBitmap({ options });

วิธีเปลี่ยนข้อความ

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

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

ไฟล์ .png ของแบบอักษรบิตแมปมี THREE.TextureLoader ใน text-bitmap.js

TextBitmap ยังรวมถึง Hitbox ที่ไม่ปรากฏสำหรับการโต้ตอบ raycast 3.js ผ่านเมาส์ กล้อง หรือตัวควบคุมการเคลื่อนไหวที่ติดตามด้วยมือ เช่น Oculus Touch หรือ Vive Controller ขนาดของกล่อง Hit จะอัปเดตโดยอัตโนมัติเมื่อคุณเปลี่ยนแปลงข้อความ ตัวเลือก

เพิ่ม Bmtext.group ลงในโหมดthree.js หากต้องการเข้าถึงบุตรหลาน / Object3D กราฟฉากสำหรับข้อความจะมีลักษณะดังนี้

6. ยกเลิกการลดขนาด JSON และแก้ไข xoffset

หากช่องไฟของคุณดูเหมือนไม่ถูกต้อง คุณอาจต้องแก้ไข xoffsets ใน JSON แบบเจล JSON ลงใน Jsbeautifier.org เพื่อรับ ไฟล์เวอร์ชันที่ไม่ย่อขนาด

xoffset เป็นช่องสัญญาณสากลสำหรับอักขระหนึ่งตัว Kerning สำหรับ 2 คน ที่ปรากฏติดกัน ค่าเริ่มต้นใน อาร์เรย์ kerning ไม่ได้สร้างความแตกต่างอะไรเลย และน่าเบื่อที่จะ เพื่อแก้ไขให้อาร์เรย์นั้นว่างเพื่อลดขนาดไฟล์ของ JSON จากนั้น แก้ไข xoffsets สำหรับช่องไฟ

ก่อนอื่น คุณจะต้องหาว่าอักขระใดใช้กับรหัสอักขระใน JSON ใน three-bmfont-text-bundle.js แทรก console.log หลังบรรทัดที่ 240:

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

จากนั้นพิมพ์ลงในช่องข้อความ dat.gui บน https://vr.with.in/archive/text-sdf-bitmap/ และตรวจสอบคอนโซลเพื่อค้นหารหัสที่สอดคล้องกันของอักขระ

ตัวอย่างเช่น ในแบบอักษรบิตแมปของเรา "j" อยู่ห่างไปทางขวามากเกินไปเสมอ คือ รหัสอักขระคือ 106 ดังนั้นให้หา "id": 106 ใน JSON และเปลี่ยน xoffset จาก -1 ถึง -10

7. เลย์เอาต์

หากคุณมีบล็อกข้อความหลายบล็อก และต้องการให้ส่งข้อความจากบนลงล่าง เช่น HTML ทุกอย่างจะต้องได้รับการจัดตำแหน่งด้วยตนเอง คล้ายกับการจัดตำแหน่งแบบสัมบูรณ์ และทุกองค์ประกอบด้วย CSS คุณคิดว่าจะทำเช่นนี้ใน CSS ไหม

    * { position: absolute; }

การจัดวางข้อความแบบ 3 มิติจะเป็นแบบนั้น ในมุมมองรายละเอียด: ชื่อหนังสือ ผู้แต่ง คำอธิบาย และระยะเวลาเป็นแต่ละออบเจ็กต์ 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 แต่ละกลุ่มอยู่ในแนวตั้ง อยู่ในแนวเดียวกับด้านบนของ Mesh TextBitmap (ดูที่ตรงกลางที่ text-bitmap.js อัปเดต) ถ้าคุณเปลี่ยนข้อความของวัตถุดังกล่าวในภายหลัง และความสูง ของออบเจ็กต์ดังกล่าวเปลี่ยนไป คุณจะต้องคำนวณตำแหน่งเหล่านั้นใหม่ด้วย ที่นี่ เฉพาะตำแหน่ง y ของข้อความเท่านั้นที่ได้รับการแก้ไข แต่ก็เป็นโอกาสหนึ่งในการทำงานใน 3 มิติคือเราสามารถดันและดึงข้อความในทิศทาง z รวมทั้งหมุน รอบแกน x, y และ z

บทสรุป

ข้อความและเลย์เอาต์ใน WebVR มาไกลมากก่อนที่จะใช้งานง่ายและ ใช้กันอย่างแพร่หลายในชื่อ HTML และ CSS แต่ยังมีโซลูชันการทำงานอยู่ และคุณจะทำสิ่งต่างๆ ได้มากขึ้น ใน WebVR มากกว่าที่ทำได้ด้วยหน้าเว็บ HTML แบบเดิม มี WebVR อยู่แล้วในปัจจุบัน พรุ่งนี้อาจมีเครื่องมือที่ดีกว่านี้อีก ในระหว่างนี้ ลองใช้งานและ การพัฒนาโดยไม่มีกรอบการทำงานที่พบได้ทั่วไปจะนำไปสู่ความแตกต่างมากขึ้น ซึ่งน่าตื่นเต้นจริงๆ